Implementing Chat

  Implementing chat on your web page requires assistance from your software or website development team. If you do not have a developer available, please contact your CxEngage account representative.

 

  Please note that this section is specific to the chat widget, configurable through the configuration UI. It has default behavior and responses that cannot be modified. For a fully customizable version of web chat, refer to our new Messaging SDK (V2).

 

Enabling and configuring your CxEngage tenant with the chat app and integration is completed in multiple parts.

  1. A digital channel app is created internally. This app is required for your Chat Widget confirmation. Please contact your account representative to arrange for those details.
  1. Action Required: A chat widget is created on your tenant. These instructions are provided below.
  2. Action Required: Your web page is updated with script tags that pass in data to enable the chat widget on your site. These instructions are provided below.
  If your deployment requires CSP compatibility, contact your CxEngage representative to get the metadata required for your configuration.

When the necessary digital channel app and integration have been added to your tenant, an app id is generated that you need to add to the script for your page.

Prerequisites

Before implementing your chat widget on your page, you need: 

  • the enabled integration on your tenant, requested by contacting your account representative
  • a chat widget on your tenant, created by going to Configuration > Chat Widgets in the configuration UI
  • the Web Integration ID, available in your Chat Widget settings panel or in the widget's configuration UI URL
  • your Tenant ID

Creating a Chat Widget

To create a chat widget on your tenant: 

  1. Go to Configuration > Chat Widgets and click Create. The new widget details panel opens.
 

This page is only accessible to users with the WEB_INTEGRATIONS_APP_UPDATE permission.

If your deployment requires CSP compatibility, contact your CxEngage representative to get the metadata required for your configuration.

  1. Enter a name for your chat widget.
  2. Optionally, enter a brief description for the widget.
  3. Enter the Contact Point for chat messages through this widget.
  IMPORTANT: This contact point must match the contact point in your messaging channel's dispatch mapping.
  1. From the App dropdown menu, select the digital channel app that was provisioned for you.
  You need the DIGITAL_CHANNELS_APP_READ permission to complete this step.
  1. Optionally, use the Branding menu options to customize the chat widget displayed on your page. Additional instructions are available here.
  2. Optionally, restrict the URLs able to use your chat widget by entering them in the Allowed URLs field. Click the + button to add multiple URLs. This ensures that only messages sent from your website(s) are accepted.
  3. Click Submit.

Proactive Chat

Proactive chat produced an automatic chat bubble with a specified text after a defined length of time. For example, you can configure your chat widget to initiate a chat message offering assistance to someone who has been on the webpage for a minute.

Proactive chat is configured internally for your tenant. To have this added to your webpage and chat widget, please contact your CxEngage account representative.

Updating Your Page

To update your web page: 

  1. Add the following script tag towards the end of the head section on your page, replacing <integration-id> with the Web Integration ID found in your chat widget settings.
Copy 
<head>
        <!-- ... other head tags/code -->
        <script
           src="https://us-east-1-prod-webchat.cxengage.net/load-chat.js"
           data-cxengage-web-integration-id="<integration-id>"
           data-cxengage-tenant-id="<tenant-id>"
        >
        </script>    
    </head>

 

 Important Note for Regions: This script is for tenants in the North America region. For tenants in the European region, use "https://eu-west-1-prod-webchat.cxengage.net/load-chat.js" as the src value and add data-cxengage-region="eu-1" onto the script tag.

Optionally, you can customize the pre-chat messages sent at the start of each conversation such as a greeting and confirmation message by passing in data-cxengage-prechat-capture-greeting-text and/or data-cxengage-prechat-capture-confirmation-text as attributes onto the script tag.

  1. Add the following script tag towards the end of the body section of page:
Copy 
<body>
        <!-- ... other body tags/code -->
        <script src="https://us-east-1-prod-webchat.cxengage.net/init-chat.js"></script>
    </body>

 

  Important Note for Regions: This script is for tenants in the North America region. For tenants in the European region, use "https://eu-west-1-prod-webchat.cxengage.net/init-chat.js" as the src value.

 

  Prior to the scheduled maintenance release on February 8, 2020 the URLs to use in the script tags were http:// instead of https://. Users who implemented chat onto their page(s) prior to this date need to update their tags accordingly.


You might also be interested in: