Table of Contents

Introduction

In this lab exercise we are going to configure a basic in Live Chat applet and deploy it on a website that you can access directly from the internet. We will be downloading Workflow templates from GitHub, creating a free website on glitch.me, work with Webex Connect Flows and much more.

Creating a Service

  • Navigate to https://cl2podXX.imiconnect.io/ (where the XX is your lab ID)
  • Click the Create New Service button
  • Create a name for your service
  • Navigate to Workflow GitHub
  • Download: Live Chat Inbound
  • Unzip workflow file
  • Click View My Flows
  • For each workflow file:

  1. Click Create Flow
  2. Use the workflow file name for the Flow Name
  3. Type: Workflow
  4. Metod: Upload a flow
  5. Attach the unzipped workflow file
  6. Click Create

To top of this lab

Creating an App

  • From the service:
    • Click configure Apps
    • Configure New App => Mobile Web
  • Give your App a Name
  • Enable Live Chat / In-App Messaging
    • Select Transport Protocols
    • Select “Use Secured Port”
    • Click Save
    • Click Register to Webex CC

To top of this lab

Create a Chat Template

  • Click the Wrench for the Tools menu
  • Click Templates
  • Click Add New Template

    Name: Give your template a meaningful name

    Channel: Live Chat / In-App Messaging

    Message Type: Form

    Title: Please provide the following information.

    Form Fields:

    Click Add Field

    Type: Name

    Name: Name

    Label: Name

    Mandatory Field: Enabled

    Create another form field for Email Address

To top of this lab

Create a Website

  • In a new tab, go to Glitch
  • Create a new account using the sign up button
    • Select Email Magic Link
    • Create a Hello World Website
      • Note the URL

To top of this lab

Connecting to Webex Contact Center

  • Log into Webex Contact Center as Admin
    • Create an Entry Point:

      Name: Name of your choice

      Channel Type: Chat

      Asset Name: Your Asset

      Service Level: 120

    • Create a Queue

      Name: Name of your choice

      Channel Type: Chat

      Queue Routing Type: Longest Available agent

      Chat Distribution: Put your team into Group 1

      Service Level Threshold: 120

      Maximum Time in Queue: 3600

To top of this lab

Launch the Engage Portal

  • Click on New Digital Channels to launch the Engage Portal
    • Click on Assets
      • You will see A live Chat Channel type With the name os your asset
      • Click edit in the Action column
      • Click Websites
        • Click Add Website

          Display Name: something like “North Pole Holiday Infused Widgets and Bobbles”

          Domain: the domain of your glitch website

          Save Changes!

          Click the Website Settings Banner back option

          Click on the Installation Tab

          Copy out the Code

To top of this lab

Adding the Applet to Your Website

  • Return to the Glitch tab in your browser
  • Open index.html
  • Scroll to the bottom of the code
  • Paste the applet code between the body and html closing tags
  • Click the preview button (note that chat will not work yet as we need to setup the flow first)

To top of this lab

Modifying the Chat Flow

  • Go back to the service that you created
  • Click on flows
  • Click on the name of the flow
  • In the upper right corner click the settings cog

    Click Custom Variables

    Change Live Chat Domain to your Glitch domain

    Change the appid to your appid

    Click Save

  • Double click on the Pre-chat Form node

    Select the Form Template From the Dropdown

    Click Save

  • Double click on the Receive node

    Select the Form Template From the Dropdown

    Click Save

  • DoubleClick the Queue Task node

    Select the queue that you created in the Queue name drop down

  • Click Save
  • Click Make Live

To top of this lab

Time to test our first chat flow!

  • Log into the contact center as an agent
  • open the chat applet on your website and start a chat

To top of this lab

Congratulations, you have completed Lab2 tasks!