Chat

Bright Pattern Documentation

Generated: 8/14/2022 9:44 pm
Content is available under license unless otherwise noted.


Chat Overview

Chat tutorials show you how to enable chat/messaging capabilities for your contact center. You will learn how to set up chat services, place Bright Pattern's chat widget on your website, and more.

Tutorials

Configuration

Design

Launching Chat on Webpages



How to Add a Contact Tab

After you have edited all the properties for a chat scenario entry, there is one last step you must take for your web chat to work: You must add a contact tab for the chat widget.

A contact tab is the small tab that a customer browsing your website sees and clicks to initiate a chat interaction. If you do not add a contact tab to your chat scenario entry, your webpage will not display the chat widget at all.


Example contact tab


Procedure

Step 1: Find the Chat widget tab

  1. In Contact Center Administrator, go to Configuration > Scenario Entries > Messaging/Chat.

    Configuration > Scenario Entries > Messaging/Chat


  2. Select the desired chat scenario entry.

  3. Click on the Chat widget tab.

Step 2: Add a new contact tab

  1. Beneath Chat Initiation via Contact Tabs, click add.

    Add a new contact tab


  2. The Chat Widget Configuration editor will open in a new browser tab or window.

Step 3: Edit contact tab properties

Edit the properties and fields as desired. You may revisit and edit your contact tab properties at any time.

Chat Widget Configuration editor in new browser tab/window



At the most basic level, only two properties must be completed right now:

Step 4: Save your changes

  1. Click Save to save your contact tab. Simply closing the browser window will not save your changes.

  2. Close the Chat Configuration Editor browser tab or window. You can only work on one such editor window open at a time.

Step 5: Add url

  1. Back in the scenario entry's Chat widget tab, go to Chat Initiation via Contact Tabs.

  2. Beneath the contact tab you just added, click add url.

    Make sure you add the URL of your webpage


  3. Enter the URL of the website where the chat widget will be placed, and click the green checkmark to apply your changes. If you do not know the URL, you can simply enter backslash (/) in this field.

    Apply changes or cancel


Step 6: Save

At this time, you may add or edit any of the other Chat widget tab sections. You can always come back to this for further changes.

At the bottom of the screen, click Apply to save your changes.




Chat Service Configuration

This article describes how to configure a general chat service within Bright Pattern’s Contact Center Administrator application.

Prerequisites

This article assumes that you have already completed initial configuration for your contact center.

Procedure

Step 1: Create and configure a chat service

  1. Log in to Contact Center Administrator, and go to Services and Campaigns.

  2. Click the Add service (+) button to create a new chat service.

  3. Select chat as the type of service.

    Choose from the available services


  4. In the Properties tab that appears, update the chat service properties, being sure to give the service a unique name (required). At this point, all other properties are optional. For the sake of this procedure, we are going to keep the properties simple, as shown.

    Chat service properties


  5. Click Apply to save your changes.

Step 2: Assign teams to the service

  1. In the Assignments tab, assign teams to this service. Note that the service will be created with a default service skill that can be assigned automatically to all members of the associated teams.

    Assign users to teams


  2. Optionally assign administrators and reviewers to this service.

  3. Click Apply to save your changes.

Step 3: Create additional skills and assign them

  1. Additional skills are called auxiliary skills. In Call Center Configuration > Auxiliary skills, add any other required agent skills for this chat service.

    You have to add skills before you can assign them


  2. In Users & Teams > Skill Levels, assign auxiliary skills to agents as required skill levels. The higher the numeric value, the more skilled that user is.

    Skills are assigned as percentage values (e.g., "100" or "50")


  3. Click Apply to save your changes.

Step 4: Specify service level thresholds

  1. Go back to Services & Campaigns and select the chat service you just created.

  2. In the Service Level tab, set the percentage of chats associated with this service that are expected to be answered within a certain amount of time.

    Set service level thresholds

Step 5: Create the scenario for the service

  1. Go to Configuration > Scenarios > Chat to create the chat scenario for this service.

    Configuration > Scenarios > Chat


  2. Either select an existing chat scenario from the list, or click the Add from template Add-From-Template-Button.png button at the bottom of the screen to create a new chat scenario from the “Mobile Chat” template.

    Select the "Mobile Chat" template


  3. Creating a new chat scenario from a template will open the Scenario Builder application in a new browser tab or window. For the purpose of this simple setup, leave the scenario as-is and click Save.

    Name the scenario


  4. Give the scenario a unique name (e.g., "Sales Chat") and click Save again. Your new scenario will appear in the list of scenarios.

Step 6: Add a chat scenario entry to associate the scenario and service with chat

  1. Go to Scenario Entries > Messaging/Chat.

  2. Either select an existing chat scenario entry or click the Add chat scenario entry (+) button to create a new one.

  3. If this entry is brand new, the following properties are required right now:

    1. Name - Give this entry a unique name.

    2. Scenario - Select the chat scenario you previously created.

    3. Service - Select the chat service you previously created.

      Required properties


  4. Click Apply to save your changes.

Step 7: Configure SMS/MMS access numbers

  1. Still in Scenario Entries > Messaging/Chat properties, scroll down to SMS/MMS access numbers.

  2. Click add.

  3. Select an SMS/MMS access number for inbound SMS/MMS communications. If you do not see any phone numbers, contact your service provider to get SMS enabled.

    Phone number selection


  4. Click the green checkmark.

  5. Again click Apply to save your changes.

Step 8: Update omnichannel routing settings

  1. Go to Call Center Configuration > Omnichannel Routing.

  2. Specify the number of sessions that agents can handle simultaneously. The default settings are shown.

    Phone number selection


This completes chat service configuration.


Service Configuration Quickstarts

Be sure to read Bright Pattern's other service configuration quickstarts, which will help you to set up bot-assisted chat, voice, and email services for your contact center:





How to Configure Web Chat

This procedure explains how to configure a chat scenario, chat service, and chat scenario entry point to work together to display a chat widget on your website. By the end of this procedure, you should have a working chat widget on a webpage that connects customers to your contact center.


Step 1: Create or Select a Chat Scenario

  1. Go to Configuration > Scenarios > Chat.

    Configuration > Scenarios > Chat


  2. Either select an existing Chat Scenario from the list, or click the Add from template Add-From-Template-Button.png button at the bottom of the screen to create a new chat scenario from the “Mobile Chat” template.

    Select the "Mobile Chat" template


  3. Creating a new chat scenario from a template will open the Scenario Builder application in a new browser tab or window. For the purpose of this simple setup, leave the scenario as-is and click Save.

    Name the scenario


  4. Give the scenario a unique name (e.g., "Super Chat") and click Save. Your new scenario will appear in the list of scenarios.


Step 2: Create or Select a Chat Service

  1. Go to Configuration > Services & Campaigns and choose a chat service to use with your chat scenario.

  2. If there are no existing services of type “Chat,” you have to create one.

How to Add a New Chat Service

  1. Click the Add service button and select Chat.

    Select the service called "Chat"


  2. In the Properties tab, fill out the service properties as appropriate, and click Apply.

  3. At the most basic level, give the new chat service a name (e.g., "Pacific Chat"). For definitions of each property, see the Contact Center Administrator Guide, section Properties Tab.

    Services & Campaigns > Properties


  4. Next, you need to assign a team, an administrator, and a reviewer (optional) to the service. This is done in the Assignments tab.
    Assign a team and administrator to the service


Step 3: Create or Choose a Chat Scenario Entry

  1. Go to Configuration > Scenario Entries > Messaging/Chat and select a scenario entry point to use with your chat scenario. The entry point is what starts the scenario.

    Messaging/Chat scenario entries list


  2. If there are no existing chat scenario entries shown, you have to create one.

How to Add a New Chat Scenario Entry

  1. Click the Add chat scenario entry button.

  2. In the Properties tab, fill in the properties as appropriate (see below for required and optional properties). For definitions, see the Contact Center Administrator Guide, section Messaging/Chat.

Required Properties

In the Properties tab, make sure to address the following fields right now. These are critical to chat configuration.

Messaging/Chat scenario entry properties that you need to address for chat to work

Other Properties

The remaining properties are optional at this time. You can come back to them later.


Step 4: Edit Chat Widget Style

You can edit the appearance (i.e., color, font size, location, etc.) of the chat widget in the Chat Styling section. This step is important to complete; if you don't do this, your contact tab (see Step 5 of this procedure) will not appear in preview.

  1. Click on the Chat widget tab.

  2. Beneath Chat Styling, click edit.

    Chat Styling > edit


  3. The Chat Widget Configuration editor will open in a new browser tab or window. Edit the Chat Widget Styling properties and fields as desired. At the most basic level, you can leave everything as-is at this point and save your changes. You can come back to this later.

    Chat Widget Configuration editor in new browser tab/window


  4. At the bottom of the screen, click Save.

Step 5: Add a Contact Tab

In order for this chat scenario entry to work, you must add a contact tab for the chat widget. If you don’t do this, your webpage will not display the chat widget!

  1. Click on the Chat widget tab.

  2. Beneath Chat Initiation via Contact Tabs, click add.

    Add a new contact tab


  3. The Chat Widget Configuration editor will open in a new browser tab or window. Edit the properties and fields as desired.

    Chat Widget Configuration editor in new browser tab/window


  4. Optional: To preview how the contact tab will look on your webpage, enter your URL in the Preview URL field and click Apply. Your webpage will load on the screen with the contact tab on it, and you will be asked to confirm whether you see the content.

    Example preview URL shows the webpage but not the chat widget


    Some websites are protected from being embedded into third-party websites; if this is the case, you will see the message “Chat widget not found!” in red. To preview the contact tab without your webpage displayed, leave the Preview URL field empty.

    When left empty, Preview URL shows no webpage content
  5. Required: At the most basic level, these actions are required right now:

    * Name - The unique name (any) for this new contact tab

    * Save - Click to save changes

  6. Back in the Chat widget tab, go to Chat Initiation via Contact Tabs.

  7. Beneath the contact tab you just added, click add url.

    Make sure you add the URL of your webpage


  8. Enter the path relative to your root, being sure to exclude port, domain, protocol. For example, for https://mysite.com:8443/folder/folder/page.html, you could enter /folder or /folder/folder or /folder/folder/page.html. Click the green checkmark to apply your changes.

  9. Optional: At this time, you may add or edit any of the other Chat widget tab sections. You can always come back to this for further changes.

  10. At the bottom of the screen, click Apply to save your changes.


Step 6: Get the HTML

  1. Go back to Properties tab > Web HTML snippet.

  2. Click the HTML snippet button. The HTML snippet is the code for the chat widget you just configured.

    In the Properties tab, click "HTML snippet"


  3. The HTML Snippet for Web Page dialog will open.

    HTML Snippet for Web Page dialog


  4. In the field Specify client web server hostname, enter your contact center’s name (i.e., “company.brightpattern.com”). If you don’t know what it is, look at the URL of your Contact Center Administrator application in the web browser. The hostname is the name that appears before “/admin”.

    Example of client web server hostname in browser address field


  5. Click Copy to clipboard to copy the HTML. This is the code of the chat widget.

  6. Paste the HTML onto the appropriate place on your webpage and publish. The chat widget contact tab (and any other chat widget elements that you added in chat widget configuration) will appear on the page.

    Chat widget on an example webpage


On the webpage, clicking on the contact tab will expand the widget.

Chat widget expanded to show pre-chat form fields


If you do not see the chat widget on your page, revisit the previous steps of this procedure and try again.

For more information on chat widget configuration, see the Chat Widget Configuration Guide.

Chat Widget Auto-Start

You may configure the chat widget to initiate a chat session automatically upon a webpage loading. With this configuration, no customer action is required to launch the widget and, when the webpage is loaded, the chat automatically connects to an agent or the queue.

To do this, follow these steps:

  1. Open the HTML Snippet for Web Page.
  2. Paste the copied HTML into a text editing application (e.g., Notepad++) to edit it.
  3. In the "Service Pattern Chat Config" object, add the attribute autostartChat with the value true. Note that the default value is false.
  4. Copy all and paste the edited HTML onto your web page.
  5. Publish the webpage and refresh any active chats.


The following is an example of how this looks in the HTML Snippet for Web Page. 

SERVICE_PATTERN_CHAT_CONFIG = {
        ...
        autostartChat: true,
        ...
    };



How to Configure Proactive Offers in Chat

A proactive offer is a pop-up web chat widget that offers opportunities to call or chat with a live agent. We call them proactive because, unlike typical service interactions that rely on the customer to initiate the conversation, proactive offers are initiated by contact centers.


Example of a proactive offer widget


You can use proactive offers to offer immediate help, promote sales and discounts, entice customers not to leave the website, and much more. In Bright Pattern Contact Center, proactive offers are configured to launch when specified conditions are triggered. Note that you can place a proactive offer on the same page as a web chat, or you can place the proactive offer stand-alone.

In this article, you will learn how to configure a chat scenario, chat service, chat scenario entry point and proactive offer conditions to work together to pop proactive offers on your website.

Procedure

Step 1: Create or choose a chat scenario

You may select an existing chat scenario to use, or create a new chat scenario. For details, see the Contact Center Administrator Guide, section Chat Scenarios.

Step 2: Create or choose a chat service

To launch any type of chat, you will need to have a chat service configured first. For details, see our tutorial, Chat Service Configuration.

Step 3: Create or choose a messaging/chat scenario entry

You also need to create or select an existing messaging/chat scenario entry. For details, see the Contact Center Administrator Guide, section Messaging/Chat Scenario Entries.

Step 4: Add a proactive offer

In the Contact Center Administrator application, section Scenario Entries > Messaging/Chat > Chat widget tab, beneath Proactive Offers, click add.


Messaging/Chat scenario entry > Chat widget tab


When the Chat Widget Configuration Editor opens, you will see the following areas:


Chat Widget Configuration Editor screen


Step 5: Enable the proactive offer and set contact options

The Proactive Offer tab is where you turn on the widget and determine which communication channel(s), such as chat or voice call or both, to offer the customer.


Proactive Offer tab properties


Set the following:

For example:

<h1 style="text-align: center">Header Text<br><img src="https://<domain>/image.jpg" alt="alt image label" width="300" height="180">


Example of a proactive offer widget with image inserted


Note that the proactive offer styling (e.g., text color, background color, button color, etc.) is controlled by overall chat styling, and it cannot be overridden in the proactive offer's HTML Content field. To make such style changes, go to the Contact Center Administrator application, section Scenario Entries > Messaging/Chat > Chat widget tab > Chat Styling, and click edit. For more information, see the Chat Widget Configuration Guide, section Chat Widget Styling.


Chat Styling > Edit


Contact Options

Within the Proactive Offer tab are contact options, which are the clickable methods of reaching your contact center. You do not have to set both call and chat options; you are welcome to choose one or both.

All of the following contact options should be set as desired:

Step 6: Set the proactive offer widget’s style

In Proactive Offer Styling, you can determine the look and feel of the widget itself. If you make no changes, the widget’s style will remain in the default settings shown.

To customize style, set the following as desired:


Proactive Offer Styling tab properties


Step 7: Set proactive offer conditions

In Proactive Offer Conditions, click add to set the requirements that must be met for the proactive chat to be shown to website visitors. These requirements are called conditions, and conditions are what make your proactive offers creative and specific to your use case. You can add as many conditions as you like.

Many conditions are available, but the most common conditions include the following:


Selecting the “About to exit” condition


For example, let’s say an email newsletter announces a summer promo and all you have to do is <click here> to get a special discount, where <click here> is the URL https://mycompany.com/2020/06/?utm_medium=&utm_source=newsletter&utm_campaign=20200617-enews-&utm_content=summerdiscount

In that example, you would paste that URL into the text field, as shown, to set the Referring URL condition:


Selecting the “Referring URL” condition and adding URL


Step 8: Optionally configure a pre-chat form

This step is optional, to be completed only if you enabled chat in the proactive offer and you want to collect some information from the customer before they are connected to an agent in chat.

In the Pre-Chat Form Configuration tab, select the checkbox for Enabled and set the pre-chat form properties. If you do not select Enabled, no pre-chat form will be presented to the customer.


Pre-Chat Form tab properties


Step 9: Add your webpage's URL

  1. Save your work and then close the Chat Widget Configuration Editor.

  2. Back in the Chat Widget tab, beneath your proactive offer, click add url.

    Add the URL to make the proactive offer launch on the page


  3. Enter the URL of the webpage where the proactive offer will appear. If you do not do this, the proactive offer will not launch.

    After adding the URL to the proactive offer, the URL is displayed


  4. Click Apply at the bottom to save your changes.

Step 10: Get the HTML

Copy the proactive chat widget’s code and place it on your webpage. See How to Use the Web HTML Snippet.

Step 11: Test the proactive offer

As the final step of this process, test that the proactive offer can be launched with your specified conditions:

  1. Log in to Agent Desktop as an agent on the team assigned to the chat service, and set your agent state to Ready.

  2. In a separate web browser (incognito is OK), go to the webpage where the HTML chat snippet has been placed.

  3. Trigger all the proactive offer conditions specified in configuration. If, for example, you specified the “About to exit (mouse move)” condition, remain on that page for several minutes and then try to close the browser tab or window. Your movement should cause the proactive offer to pop on the page.

    Example of proactive offer on a live page


  4. If the proactive offer does not launch, go back through this procedure and make sure that you have followed all steps.



Proactive offer configuration is now complete. For more information on chat widget configuration, see the Chat Widget Configuration Guide.




How to Remove the Call Option from Service Chat Sessions

During active chat sessions, agents and customers have the ability to initiate VoIP calls (i.e., audio only) by simply clicking the headset Chat-Widget-VoIP-Button-52.PNG button. The option to have audio-only calls via chat is enabled and disabled during chat widget configuration.

This article will show you how to remove the headset button from service chat sessions, so that neither agents nor customers have the option to have a voice call during a chat.

Procedure

  1. In the Contact Center Administrator application, section Configuration > Scenario Entries > Messaging/Chat, select the chat scenario entry you wish to edit, and click the Chat Widget tab.

    Scenario Entries > Messaging/Chat > Chat Widget tab


  2. Beneath Chat Styling, click edit to edit the chat widget's style properties.

    Chat Widget tab > Chat Styling > edit


  3. In the Chat Widget Configuration editor that opens, notice that the preview widget shows the headset button. This is the button that will be removed.

    Chat Styling properties and preview of chat widget


  4. In Chat Widget Styling properties, deselect the allow checkbox for VoIP call. Note that this action removes the both headset button and the visitor video button from the chat widget (because video chat uses VoIP for the audio portion of the video call).

    Chat Widget tab > Chat Styling > edit


  5. At the bottom of the page, click Save to save your changes.



Streamlining Your Chat Service with Quick Reply Buttons

Starting from version 5.8.0 of Bright Pattern Contact Center, it is possible for agents, bots, or the Scenario Builder application to present preconfigured chat responses to customers. The responses appear to customers as quick reply buttons in the chat interaction, which, when selected, allow customers to respond quickly to questions your contact center frequently receives.

This article will guide you through a general process for adding quick reply buttons to a chat service in order to direct customer responses for faster and easier interactions, which generally includes the following steps:

Benefits

When quick reply buttons are available to customers as an option, you do the following:

Determine the most appropriate place for your quick reply buttons

There are several areas in Bright Pattern Contact Center software where you can configure quick reply buttons for your chat service; they are as follows:


Depending on the types of interactions your contact center processes, one area may be more appropriate than another. For example, if your business requires a fair amount of information from a customer (e.g., insurance claims), quick reply buttons can be added to your bot integration account’s dialog options.

If your business requires some information from the customer but the interaction needs to be completed by a person (e.g., ordering pizza), the Send Message+ scenario block is a useful option for quick reply buttons. If your agents have to ask the same questions repeatedly, the Agent Desktop’s Chat Responses are an ideal place to include quick reply buttons.

Configure your quick reply buttons

Quick reply buttons appear to customers as selectable buttons in web chat, in SMS interactions, and in chats via integrated messenger services (e.g., Twitter, Viber, LINE, etc). When a customer selects a presented quick reply button, the text of the button appears in the chat feed as customer text.

Bright Pattern Contact Center software recognizes the following commands for invoking quick reply buttons:


No matter where you choose to add these commands, quick reply buttons are invoked in the following format: 

<Question or statement here> /buttons [Button 1] [Button 2] [Button 3]

For example: 

How is your day going? /buttons [Great] [OK] [Could be better]

For an example scenario that uses quick reply buttons in Send Message+ blocks, see the Scenario Builder Reference Guide, section Pizza Flowchart Chat Scenario.


Buttons command options


Utilize other tools to drive customer responses

Quick reply buttons can be used with a variety of other Bright Pattern Contact Center product features to streamline customer chat interactions. They include the following.

Use the “Switch” scenario block to create flowcharts

If you configure quick reply buttons using the Send Message+ scenario block, the Switch scenario block allows you to effectively create flowcharts. Flowcharts are excellent tools to quickly direct customer responses, for example when ordering food or when troubleshooting customer problems. For an example scenario that uses Switch blocks with quick reply buttons in Send Message+ blocks, see the Scenario Builder Reference Guide, section Pizza Flowchart Chat Scenario.

Use KB articles

Knowledge base (KB) articles can be used for a variety of interactions. For chat interactions, they can provide agents with useful internal and external product information, for example, insertable articles and attachments. Additionally, quick reply buttons can be used in KB articles (e.g., “Was this information helpful? /buttons [Yes] [No]), which can be helpful for fine-tuning your knowledge base.



  1. REDIRECT #topic_tutorials-for-admins/chat/howtousethechatwidgethtmlsnippet

How to Use the Web HTML Snippet

A chat widget is an HTML-based application that's placed on your company's website to facilitate active chat interactions between customers and contact center agents and/or integrated bots.

Bright Pattern Contact Center provides an HTML snippet (as well as the full chat code for local hosting) for every chat widget configured for your contact center. The HTML snippet is the code that defines the chat widget's configuration.

In this article, you will learn how to grab the HTML snippet and use it on your company's website.

Procedure

Step 1: Locate your chat scenario entry

  1. In Contact Center Administrator, go to Configuration > Scenario Entries > Messaging/Chat.

    Configuration > Scenario Entries > Messaging/Chat


  2. Select the desired chat scenario entry to view its properties.


Step 2: Get Web HTML snippet

  1. In the Properties tab > Web HTML snippet, click the HTML snippet button. The HTML snippet is the code for the chat widget you have configured. If you have not already set up a chat widget, see How to Configure Web Chat.

    In the Properties tab, click "HTML snippet"


  2. The HTML Snippet for Web Page dialog will open.

    HTML Snippet for Web Page dialog


Step 3: Enter your contact center's hostname

  1. In the field Specify client web server hostname, enter your contact center’s name (i.e., “mycompany.brightpattern.com”). If you don’t know what it is, look at the URL of your Contact Center Administrator application in the web browser. The hostname is the name that appears before “/admin”.

    Example of client web server hostname in browser address field


  2. Click Copy to clipboard to copy the HTML. This is the code of the chat widget.

Step 4: Paste the snippet into your HTML file

You may find it helpful to paste the HTML snippet into a plain text file first, before putting it into your webpage's HTML. You should paste the snippet underneath the closing <body> tags within your HTML.

Example Code

The following is an example of the HTML snippet placed into a basic Doctype HTML file. The snippet text is shown in blue. 

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>My Chat Widget</title>
  </head>

  <body>
  <p>This is my test page.</p>
  </body>

<link type="text/css" rel="stylesheet" href="https://company.brightpattern.com/clientweb/chat-client-v4/css/form.css">
<script type="text/javascript">
    SERVICE_PATTERN_CHAT_CONFIG = {
        appId: '123456789',
        apiUrl: 'https://company.brightpattern.com/clientweb/api/v1',
        tenantUrl: 'company.brightpattern.com',
        chatPath: 'https://company.brightpattern.com/clientweb/chat-client-v4/'

        /*        
         // Default customer data, it can be collected on current site's context
         first_name: ,
         last_name: ,
         email: ,
         phone_number: 
 		*/
    };
</script>
<script src="https://company.brightpattern.com/clientweb/chat-client-v4/js/init.js"></script> 

</head>
</html>


Step 5: Publish your page and test the chat widget

  1. Place your HTML snippet in the appropriate place on your webpage and save.

  2. Publish your page. In the examples shown, the HTML snippet was placed onto a webpage created on free website building application. The chat widget contact tab (and any other chat widget elements that added in chat widget configuration) appears on the page.

    Chat widget on an example webpage


  3. On the webpage, clicking on the contact tab will expand the widget.

    Chat widget expanded to show pre-chat form fields



For more information on chat widget configuration, see the Chat Widget Configuration Guide.




How to Pass JavaScript Variables Through Web HTML Snippet

As you learned in our tutorial, How to Use the Web HTML Snippet, the web HTML snippet is the code that defines your chat widget's configuration.

The snippet contains the formatting and style of your configured chat widget, the path to your chat application, the mobile/web API endpoint, the URL of your contact center, and a path to the chat. You can edit the snippet to pass some standard variables through the chat, such as first_name, last_name, email, and phone_number. It is also possible to pass custom variables through the snippet.

In this article, you will learn how to format such custom variables in the snippet.

Procedure

Step 1: Locate your chat scenario entry

  1. In Contact Center Administrator, go to Configuration > Scenario Entries > Messaging/Chat and Select the desired chat scenario entry to view its properties.

    Configuration > Scenario Entries > Messaging/Chat


  2. In the Properties tab, under Web HTML snippet, click the HTML snippet button.

  3. The HTML Snippet for Web Page dialog will open.

    HTML Snippet for Web Page dialog


Step 2: Enter your contact center's hostname and copy snippet

  1. In the field Specify client web server hostname, enter your contact center’s name (i.e., “example.brightpattern.com”). This action will populate the snippet with the hostname, making it ready to be copied.

  2. Click Copy to clipboard to copy the snippet.

  3. It looks like this:


<link type="text/css" rel="stylesheet" href="https://example.brightpattern.com/clientweb/chat-client-v4/css/form.css">
<script type="text/javascript">
   SERVICE_PATTERN_CHAT_CONFIG = {
       appId: '94066',
       apiUrl: 'https://example.brightpattern.com/clientweb/api/v1',
       tenantUrl: 'five.brightpattern.com',
       chatPath: 'https://example.brightpattern.com/clientweb/chat-client-v4/'

       /*        
        // Default customer data, it can be collected on current site's context
        first_name: ,
        last_name: ,
        email: ,
        phone_number: 
		*/
   };
</script>
<script src="https://example.brightpattern.com/clientweb/chat-client-v4/js/init.js"></script>

Step 3: Edit default customer data parameters

Notice that in the code comments, some customer data parameters are given: first_name, last_name, email, and phone_number. This customer information is the default set of data collected from the chat's pre-chat form and is passed to the system during the chat interaction.[1]

To pass custom variables through the chat, simply replace this: 

      /*        
        // Default customer data, it can be collected on current site's context
        first_name: ,
        last_name: ,
        email: ,
        phone_number: 
		*/

With the following, where "variable_name" is the name of your variable, and "Value" is the value: 

parameters:{
variable_name: 'Value',
}

For example: 

 <link type="text/css" rel="stylesheet" href="https://example.brightpattern.com/clientweb/chat-client-v4/css/form.css">
 <script type="text/javascript">
    SERVICE_PATTERN_CHAT_CONFIG = {
        appId: '70a6624585ef2b0981fed84fcd12d4db',
        apiUrl: 'https://example.brightpattern.com/clientweb/api/v1',
        tenantUrl: 'example.brightpattern.com',
        chatPath: 'https://example.brightpattern.com/clientweb/chat-client-v4/',
		 parameters:{
		 test_var: 'Hello World',
		 
		 }
    };
 </script>
 <script src="https://example.brightpattern.com/clientweb/chat-client-v4/js/init.js"></script>


Note: You should use either the default customer data parameters or your own parameters, but not both. Customer parameters use variable $(item.externalChatData) to collect all customer data from the pre-chat form. If you include both default and custom parameters, you will have duplicate entries of first_name, last_name, email, and phone_number.

For more information, see the Scenario Builder Reference Guide, section Variables.

Step 4: Paste the snippet into your HTML file

Once you are done with step 3, paste the snippet into your HTML for use on your webpage.


  1. ↑ Note that default variables like "name" can be passed without using parameters declaration.