Configure Livechat Widgets

The Livechat channel enables businesses to engage and support their website visitors and customers. Customers can initiate a conversation with the contact center using the Livechat widget.

Before you begin

The Livechat channel assets must be created in the Webex Connect application.

Procedure


Step 1

In the Management Portal navigation bar, choose New Digital Channels to launch the default console.

Step 2

Choose Assets > Channel Assets.

Step 3

Click the Livechat tab.

Step 4

Click the Edit icon in the Action column of a Livechat asset.

Step 5

Configure the General Settings tab:

  1. Choose Default Team from the Default team drop-down list.

  2. Ensure that the Show chat conversation history to the end user on re-login toggle button is disabled.

    This toggle button controls whether to show or hide chat conversation history to customers on revisiting the website.

  3. Turn on or off the Allow customer to request for chat transcript from Livechat widget toggle button to enable or disable customers to request a chat transcript from the Livechat widget.

  4. Turn on the Clear threads at end user's widget toggle button to clear chats when a customer clicks End chat or navigate to a different website or close the browser.

  5. You can configure either an agent name or generic alias in the chat transcript as the agent identifier to protect the privacy of agents.

  6. Ensure that the Close chats on the server upon chat abandonment toggle button is disabled.

    This toggle button instructs the application to automatically close chats on the server when customers abandon the chats. This feature is currently not available for the Webex Contact Center tenants.

  7. Enable the Notification sounds toggle button to play a chime sound when the end user receives a new message.

  8. Enable the Suppress Working Hours and Agent Present Checks toggle button to make the Livechat widget available 24X7 regardless of whether the team is out of scheduled working hours, or no agents available.

  9. Click Save Changes.

Step 6

Configure the Websites tab:

  1. Click Add Website.

    The Website Settings page appears.

  2. In the General tab, configure the following fields.

    General Website Settings

    Field Name

    Description

    Chat Widget Language

    Choose a language from the Chat Widget Language drop-down list.

    The default language is English. All announcements, action button text, error notifications, chat transcripts display in the configured language on the widget.

    Display Name

    Enter the name that appears on the header of the widget.

    Byline Text

    Enter the support text that appears below the header.

    Button Text

    Enter the call-to-action (CTA) button name. The maximum number of characters allowed in the button text field is 30.

    First Message

    Enter the message that a customer views on the widget.

    PCI Compliance Banner Message

    Enter the message that a customer or an agent views when the message is not PCI-compliant.

    Domain

    Enter the domain name or subdomain name on which the widget must appear.

  3. In the Set Wait Time section, set an approximate wait time that customers see when they reach out on the widget.

    Turn on the Display Approximate Wait Time toggle button and click one of the following radio buttons:

    • Typically replies in a few minutes

    • Typically replies in a few hours

    • Typically replies in a day

  4. In the Set Chat Announcement section, turn on the Allow logging of chat announcement toggle button to configure personalized announcements on the widget.

    Compose the announcement using $(agent) and $(team) as variables in the text field. This announcement appears when an agent sends the first outgoing message from the chat console. This field accepts all Unicode characters. The maximum character limit for the chat announcement field is 100 characters.

  5. Click Save Changes.

    This activates the Appearance and Widget Visibility tabs.

  6. In the Appearance tab, configure the following fields.

    General Website Settings

    Field Name

    Description

    Widget Colour

    Enter the Colour Code for the widget. You can choose a color or provide a hex code.

    Widget Button Type

    Choose a chat widget button design that appears on your website.

    Logo

    Upload a graphic file with your logo.

    Message Composer

    configure the following settings on the Livechat message composer:

    • Show composer when quick replies are sent: You can turn on this toggle button to allow agents to compose new message in the composer if the suggested quick replies don't match the customer's intent. This setting is not currently applicable to Webex Contact Center.

    • Allow Emojis: You can turn on this toggle button to allow customers to send emojis during the conversations on the widget.

    • A default list of emojis is provided on the widget. Customers can use any of the emojis available in the default list to communicate with the agents.

    • Allow Attachments: You can turn on this toggle button to allow customers to send attachments during the conversations on the widget.

      Note

      If you choose the PCI compliance option to drop attachments, the system overrides the Allow Attachments configuration.

  7. Click Save Changes.

  8. In the Widget Visibility tab, define the visibility of the widget on the website.

    • Click the Show without any restrictions radio button to show the widget all the time regardless of any restrictions set for the widget visibility.

    • Click the Show with an OOO Banner radio button to show the widget with an out of office (OOO) banner message. You can configure the OOO message in the message composer text box.

      The maximum length of a banner is 75 characters.

      Banners don't accept < and > parameters.

    • Click the Hide completely radio button to hide the widget completely.

    • Turn on the Website Force Turn Off toggle button to force turn off the Livechat widget. Configure the following settings:

      • In the Unavailability Banner Message text field, enter a message about the unavailability of the widget. The system displays this message to the customers who try to access the widget.

      • Turn on the Hide widget for new customers or when existing customers refresh the browser toggle button to hide the widget for the new customers without displaying the banner message.

        Existing customers can view the banner message when they refresh the browser.

  9. Click Save Changes.

    When you save this change, the existing customers can continue chatting. If the customer exits the conversation and clicks the list of threads, or tries to view or refresh the web page, the system hides the widget.

    Any action on the Force Turn Off toggle button is displayed to the customer without refreshing the browser.

    Any changes that you make in the widget settings reflect only after the customers refresh the web page.

  10. In the Banned Customers tab, you can ban customers from reaching out to agents on the Livechat widget. You can configure their IP addresses in the banned customer's list.

    • To add banned customer IP Addresses:

      • Click Add IP on the banned customer’s screen.

      • Enter IP Start Range, IP End Rage, and Reason for banning a customer in the respective text boxes.

      • Click Submit.

        A success message appears on the screen and the system lists the IP details on the banned customer’s screen.

    • To edit a banned customer IP address:

      • Click the Edit icon in the Actions column of a specific customer.

      • Edit the required fields.

      • Click Save Changes.

    • To delete a banned customer IP address, click the Delete icon in the Actions column of a specific customer.

Step 7

Configure the Installation tab:

  1. Click Copy to copy the widget script.

  2. Paste the script above the </body> tag in the HTML DOM.