Version 5.2.7

Bright Pattern Documentation

Generated: 8/08/2022 10:15 pm
Content is available under license unless otherwise noted.

Chat Initiation via Contact Tabs

Any visitor to your site can start a web chat by clicking on the chat widget's Contact tab. When customizing your chat widget, you have the option of requesting that visitors fill out a Pre-Chat form or a Leave a Message form. The properties of the Contact tab and these forms are described in this section.


Contact Tab

The Contact tab is what visitors to your website click in order to initiate a web chat. In the Chat Widget Configuration application, you can define the location, style, and color of this tab as it will appear on your site.


Contact tab properties and preview


Properties

The following properties determine the color, placement, and text of the chat widget's Contact tab.

Enabled

If the Enabled checkbox is selected, the Contact Tab will be shown on the chat widget.

Location

Location is where the chat widget will be placed on your webpage:

Icon URL

The Icon URL is the web address of your company icon or logo. In the Icon URL field, enter the desired icon's URL to see it shown on the left side of the Contact tab.

Text when in hours - chat with us

This is the text shown when the chat widget is clicked during your company's hours of operation. Enter the desired text to be displayed on the widget when agents are available to chat (e.g., "Chat with us!" or "Click to chat.").

Text when after hours - leave us a message

This is the text shown when the chat widget is clicked outside of your company's hours of operation (e.g., "Leave us a message.").

Do not show after hours

When this checkbox is selected, the chat widget is not displayed outside of your contact center's hours of operation.

Do not show

Select this checkbox when the chat widget should be hidden from view when the estimated wait time exceeds a certain threshold (see Enter the estimated wait time threshold in seconds below).

Enter the estimated wait time threshold in seconds

Enter the maximum estimated wait time (EST) that is allowed to elapse before the chat widget is hidden from view.


An example of a contact tab as seen by a customer


Pre-Chat Form Configuration

Pre-chat forms are shown to customers when they first click the chat contact tab (i.e., the small tab that displays text such as, "Chat with us! We are online") to initiate a web chat. These forms collect data from the customer. By editing the pre-chat form properties, you can customize the fields that customers will fill in (e.g., phone number, email, reason for chat, etc.).


Pre-Chat Form Configuration properties and preview


Properties

The following properties determine the fields and text shown on the chat widget's Pre-Chat form.

Enabled

If the Enabled checkbox is selected, the Pre-Chat form will be shown on the chat widget.

Title

Title is the unique name of the form. The title is displayed at the top of the form for customers to see.

Contact options

Chat tab and button enabled

When this checkbox is selected, the Pre-Chat form displays the Chat tab at the top of the form. Customers click the Chat tab to enter information (as specified in the fields below) before the chat interaction begins.

Chat tab and button text

Chat tab and button text is the text that will be shown on the Chat tab, if the Chat tab and button are enabled.

Phone call button enabled

When this checkbox is selected, the Pre-Chat form displays the Call tab at the top of the form and the Call button at the bottom of the form. When the customer enters information on the form and clicks the Call button, the agent accepts a chat and can call the customer's provided phone number using the Initiate call button.

Phone call button text

Phone call button text is the text that will be shown on the Call tab, if the Phone call button is enabled.

Cancel button enabled

When this checkbox is selected, the Pre-Chat form displays the Cancel button at the bottom of the form. Customers wishing to close a filled-out form may click the Cancel button.

Cancel button text

Cancel button text is the text shown on the button to cancel the chat or phone call.

Fields - common

Specify here the fields that should appear on both Chat and Phone tabs of this form; some fields are included by default - you can edit and/or delete these fields and add new ones.

The following form field types and labels are included:

For more information, see sections Working with Form Fields.

Fields - phone

Specify here the fields that should appear on both Chat and Phone tabs of this form; some fields are included by default - you can edit and/or delete these fields and add new ones.

The following phone field types and labels are included:

For more information, see sections Working with Form Fields.

Fields - chat

Specify here the fields that should appear on both Chat and Phone tabs of this form; some fields are included by default - you can edit and/or delete these fields and add new ones.

The following chat field types and labels are included:

For more information, see sections Working with Form Fields.

Leave a Message Form Configuration

The Leave a Message form is given to customers who try to initiate a web chat outside of business hours or when no agents are available. The form allows customers to provide a detailed message for your contact center when they are unable to chat with an agent.

You can specify the fields that should appear on both Chat and Phone tabs of this form; note that some fields are included by default.


Leave a Message Form Configuration properties and preview


Properties

The following properties determine the fields and text shown on the chat widget's Leave a Message form.

Title

Title is the unique name of the form. The title is displayed at the top of the form for customers to see.

Email to send form to

This is the email address of the person that will receive the form/message.

OK button text

The OK button text is what will be shown on the button to send the form/message.

Cancel button text

Cancel button text is the text shown on the button to cancel the message.

Fields - chat

The following chat field types and labels are included:

For more information, see section Working with Form Fields.


An example of a Leave a Message form as seen by the customer




Web Chat Configuration

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 URL of the website where the chat widget will be placed, and click the green checkmark to apply your changes.

    Apply changes or cancel


  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., “five.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,
        ...
    };