= Purpose= The Bright Pattern Contact Center chat widget is used on mobile and desktop websites to initiate and conduct conversations using various media (e.g., chat and voice). The ''Chat Widget Configuration Guide'' explains how to configure and customize the widget’s properties, forms, and style. = Audience= This guide is intended for professionals responsible for the design, development, and testing of agent desktop applications in your contact center. Participants are expected to be familiar with general principles of web design and to have a solid understanding of contact center operations and resources that are involved in such operations, including agents and teams, services and skills, schedules, and access points. = How to Access the Chat Widget Configuration Application = Chat widgets are configured for each Messaging scenario entry in the Contact Center Administrator application at ''Configuration > Scenario Entries > Messaging/Chat'' in the ''Properties'' tab, and they are customized in the ''Chat widget'' tab. Note that the requested skills and chat scenario for the chat are specified in the entry. [[File:Chat-Messaging-Ch-50.PNG|800px|thumbnail|center|Contact Center Administrator > Scenario Entries > Messaging/Chat > Chat Widget]] == Chat Widget Tab == On the Chat Widget tab, there are five options to take when customizing a chat widget for your scenario entry: * Chat Styling * Chat Initiation via Contact Tabs * Proactive Offers * On-page Initiation Forms * In-Scenario and Manually-Sent Forms [[File:Messaging-Chat-Widget1-50.PNG|650px|thumbnail|center|Scenario Entries > Messaging > Chat Widget tab]] Beneath each option, there is a link to '''edit''' the widget or '''add''' an item to the widget. Clicking either link will open the Chat Widget Configuration application in a new browser tab or window, depending on your settings. Note that you can have only one element open in the Chat Widget Configuration application at a time. The next sections of this guide describe the properties of each part of the Chat Widget Configuration application. = User Interface Overview= The five main parts of the Chat Widget Configuration application are: * Chat Styling * Chat Initiation via Contact Tabs * Proactive Offers * On-page Initiation Forms * In-Scenario and Manually-Sent Forms The properties for each of these parts are edited and previewed in the Chat Widget Configuration application. The user interface comprises two main parts: the Properties pane on the left, and the Preview area on the right. [[File:Chat-Widget-UI-50.PNG|800px|thumbnail|center|Chat Widget Configuration application]] == Name == The ''Name'' field is where you enter the unique name of the chat widget or form that you are editing. This field appears at the top of the screen when you are working on any widget or form that is not Chat Styling. [[File:Chat-Name-50.PNG|350px|thumbnail|center|Name field]] == Properties == Editable properties for each chat widget or form appear on the left side of the screen. Any changes you make to these properties will be reflected in the preview pane on the right, allowing you to see the properties in action. Some widgets and forms have more than one set of properties to edit, and these appear as tabs in the Properties pane. You may click on each tab to expand or collapse the properties. [[File:Multi-Tab-Chat-50.PNG|650px|thumbnail|center|Properties]] == Preview URL == You can enter the URL of your website in the ''Preview URL'' field. Doing so will show you how your customized chat widget will look on your own website. === How to Use Preview URL === # Type the URL of your website.

[[File:Preview-URL-316.PNG|650px|thumbnail|center|Type the URL of your website to see the chat widget as it would appear on your site]]

# Click '''Apply'''.

# A dialog will ask, "Do you see the site content?" Click '''Yes''' if you see a webpage displayed in the preview pane, or click '''No''' if you see a white background. (Note: You may need to wait a few seconds for the page to load.)

[[File:Preview-URL-Do-You-316.PNG|650px|thumbnail|center|Do you see the site content?]] The chat widget and the webpage should then be shown in the preview pane. If you do not see the chat widget, the top of the preview pane will display the following message in red: "Chat widget not found!" Try refreshing the browser page and entering the URL again. == Save == Be sure to click '''Save''' to save your changes to the properties. If you don't do this, you will have to open the page and redo your work. Clicking '''Cancel''' will close the Chat Widget Configuration application, without saving changes. [[File:Chat-Save-Cancel-50.PNG|350px|thumbnail|center|Save / Cancel buttons]]
= Working with Form Fields= The Chat Widget Configuration application allows you to build forms into your chat widgets, which customers will complete and submit to your contact center. The various field types and labels shown on the form may be edited or deleted. You can add more fields as needed. [[File:Field-Edit-Add-Delete-316.PNG|350px|thumbnail|center|Edit, add, and delete fields]] == How to Edit a Field == # To change the field type or label text of a field, move your cursor over the field name and click '''EDIT'''. # Then change the field type and/or label. == How to Delete a Field == To remove any of these fields from the form, move your cursor over the field name and click the red '''X'''. == How to Add a Field == # Click '''add'''. # Select the field type. # In the ''Label'' field, enter the text to be shown as the field label. == Field Types == Select from the following field types: * '''Label''' - The name of the field * '''Callback phone number''' - The phone number at which the customer wants to be called back * '''Phone number''' - The customer's phone number * '''Email''' - The customer's email address * '''Name''' - The customer's name * '''Text''' - Free-form text to be provided on the form * '''Date''' - Today's date * '''Multiline text''' - Multiple lines of text to be provided on the form * '''Numerical range slider''' - A slider to be included on the form * '''Radio buttons''' - Selectable buttons * '''Selection list''' - Drop-down list of options * '''Captcha''' - Proof that the customer is not a robot == Common Field Properties == When editing or creating new fields, many field types have common properties. They include the following: ==== Label Text ==== Filling in the ''Label text'' property will allow text to appear in the background of a field. The Label text will no longer be seen when a customer begins typing in this field. ==== Name ==== The ''Name'' property is used to collect data for a given field. For example, if you create a text field for a customer to enter their first name, ''first_name'' could be entered as the Name property value; it would then be associated with this field. ==== Rows ==== With the ''Rows'' property, it is possible to add rows to a multiline text field; this makes the text entry box larger. To change the number of rows, enter a numerical value. Please note, if a value of 0 or no value is entered, the default amount of rows shown is 2. ==== Min Value and Max Value ==== ''Min value'' and ''Max value'' are available only for the numerical range slider. Any numerical values may be entered but the slider will only work if the max value is greater than the min value. ==== Options ==== The ''Options'' property is available for the radio buttons and selection list fields. Under these fields, Options allows you to add selectable buttons to the chat widget. ==== Required Box ==== Checking the ''Required box'' property makes the field mandatory to fill out. [[File:CWC-Form-Field-Properties-50.PNG|350px|thumbnail|center|An example of form field properties]] = Chat Widget Styling= In the Chat Widget Configuration application, you can edit the style of your chat widget to suit your organization's brand, website style, logo, and so forth. [[File:Chat-Widget-Styling-Settings-526.PNG|800px|thumbnail|center|Chat Widget Configuration > Chat Widget Styling]] == Properties == The following properties determine the overall appearance of the chat widget. As you edit style properties, the preview pane on the right side of the screen will display the changes you are making to the widget. [[File:Chat-Widget-Example1-316.PNG|350px|thumbnail|center|Example of a customized chat widget]] === Highlight color === ''Highlight color'' is the color shown at the top of the widget, as the text color of the system's automatically sent messages (e.g., "Chat session ended"), and as the background color of the customer's text. You can select this color from the given list of 40 web colors. === Highlight text color === ''Highlight text color'' is the color of the customer's text. You can select from the given list of 40 web colors to help differentiate the customer's text from the agent's. === Title === ''Title'' is the name of your chat widget. Having a title is helpful when you have multiple chat widget configurations and need to identify them quickly. === Show agent pic === Select the ''Show agent pic'' checkbox if you wish the agent's user profile photo to be shown during a chat interaction. Select from the following options: * none * show * always show default === Window width === The ''window width'' can be specified in pixels. === Window height === The ''window height'' can be specified in pixels. === Style === There are two display styles from which to choose: '''style1''' and '''style2'''. Style1 places a border around the entire widget, and style2 has no border. === Channel hopping === To enable customers to move the conversation from rich web chat to another media channel (i.e., SMS, Facebook Messenger, LINE, Telegram, Viber), select the '''allow''' checkbox. Note that channel hopping can be enabled only if the other channel types are supported and configured for your contact center. === File upload === To allow customers to upload photos, documents, or other such files to a chat interaction, select the '''allow''' checkbox. === Web notifications === Select '''allow''' for web notifications to appear for new chat messages. Note that web notifications are not supported for Internet Explorer 11 (IE11). === VoIP call === Select '''allow''' to enable the customer and agent to talk on a [[contact-center-administrator-guide/Glossary#Voice_Over_Internet_Protocol_.28VoIP.29|VoIP call]] while chatting. Notice that when you select '''allow''', the headset icon appears on the chat widget. Either customers or agents can click the headset icon to initiate the VoIP call. The call can be disconnected by clicking the phone button. === Visitor video === Select '''allow''' to enable the customer and agent to talk on a video call while chatting. Notice that when you select '''allow''', the video camera icon appears on the chat widget. Either customers or agents can click the video camera icon to initiate the video call. The video can be disconnected by clicking the phone button. === Sound to play when agent joins, URL === If a sound should be played when an agent joins the conversation, enter the URL of the sound here. === Inactivity warning message text === When a chat interaction has been idle for too long, the ''inactivity warning message text'' will appear on both the agent's and customer's screens. Enter the contents of the message in the text entry field (e.g., "Your chat session will expire due to inactivity."). === Inactivity timeout message text === Upon timeout, inactive chat interactions will pop the ''inactivity timeout message text'' on both the agent's and customer's screens. Enter the contents of the message in the text entry field (e.g., "Your chat session has expired due to inactivity."). === Agent joined message text === The "agent joined message text'' is added to the chat interaction when an agent accepts it. Enter the message to appear in the chat interaction (e.g., "Agent $(first.name) has joined the chat."). You can use variables in the message. === Agent left message text === The "agent left message text'' is added to the chat interaction when the agent has either left completed the interaction or transferred it to another agent. Enter the message to appear in the chat interaction (e.g., "Agent $(first.name) has left the chat."). You can use variables in the message. === Session ended text === The ''session ended text'' appears in the chat interaction when the chat has been terminated (e.g., "This chat session has ended. Have a great day!"). = 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. [[File:Chat-Widget-Config-50.PNG|800px|thumbnail|center|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: * top_left * top_middle * top_right * right_top * right_middle * right_bottom * bottom_left * bottom_middle * bottom_right * left_top * left_middle * left_bottom ==== 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. [[File:CWC-Chat-Scenario-34-50.PNG|250px|thumbnail|center|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.). [[File:Pre-Chat-Form-Configuration-51.PNG|800px|thumbnail|center|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: * Label: First name * Text: first_name * Label: Last name * Text: last_name * Label: E-mail * Text: email For more information, see sections [[#topic_chat-widget-configuration-guide/workingwithformfields|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: * Label: Phone * Callback phone number: phone_number For more information, see sections [[#topic_chat-widget-configuration-guide/workingwithformfields|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: * Label: Message * Multiline text: message For more information, see sections [[#topic_chat-widget-configuration-guide/workingwithformfields|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. [[File:Leave-Message-Form-50.PNG|800px|thumbnail|center|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: * Name: subject * Label: Subject * Label: Description For more information, see section [[#topic_chat-widget-configuration-guide/workingwithformfields|Working with Form Fields]]. [[File:CWC-Offline-50.png|250px|thumbnail|center|An example of a Leave a Message form as seen by the customer]] = Proactive Offer= Proactive offers are chat interactions initiated by your contact center that offer opportunities to call or chat with a live agent. The contents of the proactive chats are customized in the Proactive Offer tab of chat widget configuration. == Proactive Offer Properties == [[File:Proactive-Offer-Cond-50.PNG|800px|thumbnail|center|Chat Widget Configuration > Proactive Offer tab]] === Enabled === To enable proactive offers for your chat service, select the ''Enabled'' checkbox. === HTML Content === ''HTML Content'' is the HTML code that is pasted here to provide access to the web elements of the chat application that customers will use to access your contact center via the given messaging scenario entry. === Contact options === There are two ways for customers to contact your call center: chat and phone calls. Contact options to be shown on the chat widget include the following. ==== Chat button enabled ==== To enable the chat button to appear on the widget, select the ''Chat button enabled'' checkbox. When the customer clicks the chat button, a new chat interaction will be initiated. ==== Chat button text ==== The chat button's label can be customized to display any text or brief message (e.g., "Chat with us now"). Type your desired chat button label in the ''Chat button text'' field. ==== Phone call button enabled ==== To enable the phone call button to appear on the widget, select the ''Phone call button enabled'' checkbox. When the customer clicks the phone call button, the agent accepts the chat and can call the customer's provided phone number using the '''Initiate call''' button. ==== Phone call button text ==== The phone call button's label can be customized to display any text or brief message (e.g., "Speak to an agent"). Type your desired phone call button label in the ''Phone call button text'' text entry field. ==== Cancel button text ==== The ''Cancel button text'' may be customized as well. Enter the desired text or brief message in the text entry field. When the customer clicks the cancel button, the proactive offer chat will not be initiated. ==== Close button ==== When clicked by the customer, the ''Close button'' closes the proactive chat window and hides it from view. To enable customers to close the chat widget, select the '''Close button''' checkbox. == Proactive Offer Styling == The following properties relate to Proactive Offer styling. [[File:Proactive-Offer-Styling-Settings-522.PNG|450px|thumbnail|center|Proactive Offer Styling properties]] === Width === The widget ''width'' can be specified in pixels. === Height === The widget ''height'' can be specified in pixels. === Animation in === You can specify how the proactive chat widget moves across or appears on the screen. Choose from the following ''Animation in'' options: * pop * slide from left * slide from right * slide from top * slide from bottom === Animation out === You can also specify how the proactive chat widget moves off the screen. Choose from the following ''Animation out'' options: * disappear * fade out * slide to left * slide to right * slide to top * slide to bottom === Location === ''Location'' is where the chat widget will be placed on your webpage: * top_left * top_middle * top_right * right_middle * bottom_left * bottom_middle * bottom_right * left_middle * center == Proactive Offer Conditions == Proactive Offer conditions are the requirements that must be met for the proactive chat to be shown to website visitors. [[File:Proactive-Offer-Conditions1-316.PNG|450px|thumbnail|center|Add proactive offer conditions]] === How to Add Conditions === # Beside "Conditions," click '''add'''. # In the dialog that pops up, enter the ''title'', the unique name for this condition. # Click '''add'''. # Select a condition with the appropriate specification. === Condition Types === ==== Max wait time, over ==== Define the maximum number of seconds to wait before sending the proactive offer. ==== URL path prefix matches ==== Specify the URL prefix (e.g., /folder1) that must be matched. This condition is useful for when you wish to pop a proactive offer only when a visitor navigates to a specific webpage. The webpage URL prefix is the path of that page (i.e., everything that follows ''https://www.domain''). For example, specifying URL prefix ''/news/local'' will ensure that the proactive offer is only shown when the visitor goes to the local news page. [[File:Conditions5-53.PNG|450px|thumbnail|center|"URL path prefix matches" condition]] ==== URL path prefix in history ==== Specify the URL prefix (e.g., /folder1) from history. ==== Days of week ==== Select the day(s) of the week to send the proactive offer. ==== Days of month ==== Select the day(s) of the month to send the proactive offer. ==== Months ==== Select the month(s) to send the proactive offer. ==== Time of day ==== Select the time of day you want to send the proactive offer; you may configure a time range in ''hours:minutes'' during which the offer appears. Note that the time of day is the customer's time in their own desktop and not your contact center time. ==== Cookie is present ==== Enter the cookie that must be present. ==== Referring URL ==== Specify the URL that referred the customer to your site. ==== Duration of visit over ==== Define the maximum number of seconds that the customer should be on your site before sending the offer. ==== Number of pages visited ==== Enter the number of webpages visited. ==== About to exit (mouse move) ==== Add this condition to send the proactive offer when there's a mouse move to exit. ==== First visit to the site ==== Add this condition if it's the first time the customer has been to your site. ==== Chatted before ==== Add this condition if the customer has chatted with your contact center before. ==== JS variable is true ==== Specify which JavaScript variable needs to be true. ==== Language ==== Specify which language the customer uses. ==== Scrolls to ==== Enter the number of screens down that the customer browses. ==== Mobile visitor ==== Add this condition if the customer is on your website via a mobile browser. ==== Number of clicks on page over ==== Enter the maximum number of clicks that the customer should make. == Pre-Chat Form Configuration == Learn about the properties for [[chat-widget-configuration-guide/ContactTab#Pre-Chat_Form_Configuration|Pre-Chat Form Configuration]]. [[File:Pre-Chat-Form-Config-50.PNG|800px|thumbnail|center|Pre-Chat Form Configuration]] = On-page Initiation Form= The On-page Initiation form includes chat and call buttons that can be customized and placed directly on your website. To customize the buttons, edit the following properties on the form. == Properties == [[File:On-Page-50.PNG|800px|thumbnail|center|On-Page Initiation form properties]] === Name === Every form can be given a unique ''name'', making it easy to differentiate multiple forms. === 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. Customers enter information on the form and click the Call button to initiate a phone call to an agent. === 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. === Fields === You can add fields to the form by clicking '''add'''. For more information, see section [[#topic_chat-widget-configuration-guide/workingwithformfields|Working with Form Fields]]. === HTML snippet === When you are done editing the form, click '''Save'''. Then click the HTML snippet button to copy the HTML code of the chat widget you just created. Paste this HTML into the appropriate place on your website. For more information about HTML snippets, see the ''Contact Center Administrator Guide'', section [[contact-center-administrator-guide/Messaging#Web_HTML_snippet|Messaging]]. = In-Scenario and Manually-Sent Forms= The Chat Widget Configuration application allows you to build forms into your chat widgets, which customers will complete and submit to your contact center. In-scenario forms are those that are launched and distributed automatically, as configured in your contact center's scenarios. For more information on how in-scenario forms are sent, see [[#topic_scenario-builder-reference-guide/requestinput|Request Input]] in the ''Scenario Builder Reference Guide''. Manually sent forms are forms that are passed to customers for completion on an as-needed basis during chats. For more information on how forms are manually sent, see [[#topic_agent-guide/howtosendasecureform|How to Send a Secure Form]] in the ''Agent Guide''. [[File:Chat-In-Scenario-50.PNG|800px|thumbnail|center|In-scenario and manually sent form]] == Properties == This section describes the properties of in-scenario and manually sent forms. === Title === ''Title'' is the unique name of the form. The title is displayed at the top of the form for customers to see. === Do not save in transcript === Select the ''Do not save in transcript'' checkbox to prevent the customer's completed form from being saved in the system's chat transcripts. It is important to select this checkbox if the form you are building prompts the customer to provide sensitive data, such as credit card numbers and social security numbers. === Submit button text === The ''Submit button text'' is the text displayed on the button that sends the form (e.g., "Send" or "Click to Submit Form"). === Fields === Click '''add''' to add fields and text labels to the form. For more information on adding fields, see section [[#topic_chat-widget-configuration-guide/workingwithformfields|Working with Form Fields]]. === Cancel button text === ''Cancel button text'' is the text shown on the button to cancel sending the form. [[File:In-Scenario-Form-Settings-51.PNG|450px|thumbnail|center|In-Scenario and Manually-Sent Forms settings]] = Events = Events allow the webpage that contains a chat widget to process corresponding events or propagate them to third-party systems. Events show that something has happened on the page with a chat widget. For example, the chat widget fires events when: * A user opens a pre-chat form * A user closes a pre-chat form * A user starts a chat * A proactive offer appears on the screen * A user closes a proactive offer * and more (see full list of event handlers below) == All Event Handlers == Bright Pattern provides event handlers in the form of a JavaScript object that can be included along with the [[5.3:Tutorials-for-admins/HowtoUsetheChatWidgetHTMLSnippet | chat widget HTML snippet]]. The event handlers supplement the existing chat application. {|border="1" style="border-collapse:collapse" cellpadding="5" | '''Name''' | '''Description''' |- | weAreOnline | Chat is available |- | weAreOffline | Chat is not available |- | windowCloseIconClicked | User closes chat widget without launching a chat (clicks "X") |- | preChatWindowPhoneButtonClicked | User clicks "Call" button on pre-chat form window |- | preChatWindowChatButtonClicked |User clicks "Chat" button on pre-chat form window |- | preChatWindowCancelButtonClicked | User clicks "Cancel" button on pre-chat form window |- | reactiveChatButtonClicked | User launches the chat by clicking the "Chat" button |- | proactiveYes | User clicks "Yes – Help" on proactive chat offer |- | proactiveNo | User clicks "No – Cancel" on proactive chat offer |- | proactiveChatOffered | Proactive chat is offered |} === Example JavaScript Object === var callbacks = { weAreOnline: function() {console.log('weAreOnline')}, weAreOffline: function() {console.log('weAreOffline')}, windowCloseIconClicked: function() {console.log('windowCloseIconClicked')}, preChatWindowPhoneButtonClicked: function() {console.log('preChatWindowPhoneButtonClicked')}, preChatWindowChatButtonClicked: function() {console.log('preChatWindowChatButtonClicked')}, preChatWindowCancelButtonClicked: function() {console.log('preChatWindowCancelButtonClicked')}, reactiveChatButtonClicked: function() {console.log('reactiveChatButtonClicked')}, proactiveYes: function() {console.log('proactiveYes')}, proactiveNo: function() {console.log('proactiveNo')}, proactiveChatOffered: function() {console.log('proactiveChatOffered')}, }; = How to Use Amazon CloudFront to Speed up Chat Widget Loading= Amazon CloudFront is a global content delivery network (CDN) designed to optimize static content delivery. It uses DNS to resolve the domain name to an IP address closest to the requester and serve content from that address. To populate the CDN, one of the simplest approaches is to use CloudFront as a caching proxy (i.e., using CloudFront delivery method ''Web''). It is possible to use CloudFront to deliver Bright Pattern Contact Center chat components, such as scripts, CSS, and images. The following procedure describes the setup process. == Procedure == === Step 1: Create a chat snippet === # In the Contact Center Administrator application, create a new Messaging/Chat scenario entry, or use an existing one to copy the [[contact-center-administrator-guide/Messaging#Web_HTML_snippet|Web HTML Snippet]]. The Web HTML Snippet is the HTML code that provides access to the web elements of the chat application that customers will use to access your contact center via the given scenario entry.

[[File:Save-HTML-Snippet-52.png|650px|thumbnail|center|Get the Web HTML Snippet]]

# In the Web HTML Snippet, note the line "chatPath: 'https://5x.brightpattern.com/clientweb/chat-client-v4/'”. This is the location of static chat files. We will need to update the domain in this URL to point to the CloudFront domain that will be created in the next steps. After modification, the snippet will have to be added to all the website pages.

[[File:CloudFront2.png|650px|thumbnail|center|Web HTML Snippet client web server hostname]]

=== Step 2: Create a new CloudFront distribution === # Login into your AWS console (https://aws.amazon.com) and select '''CloudFront'''.

[[File:CloudFront3.png|450px|thumbnail|center|In the AWS Console, select "CloudFront"]]

# Click '''Create Distribution'''.

[[File:CloudFront4.png|450px|thumbnail|center|Create a Distribution]]

# Select a ''Delivery method''. Choose '''Web'''.

[[File:CloudFront5.png|650px|thumbnail|center|Choose the "Web" delivery method for your content]]

# In ''Origin Settings'', enter the Origin Domain Name (i.e., the Web HTML Snippet client web server hostname in Step 1.2 of this procedure) and Origin Path (i.e., the "chatPath" from the Web HTML Snippet in Step 1.2 of this procedure).

[[File:CloudFront6.png|450px|thumbnail|center|Update Origin Settings]]

# Select the checkbox for '''Compress Objects Automatically'''.

# Click '''Create Distribution'''.

[[File:CloudFront8.png|450px|thumbnail|center|Click "Create Distribution"]]

# Note the ''Domain Name'' in the list of active CloudFront Distributions.

[[File:CloudFront7.png|650px|thumbnail|center|Remember the domain name of the distribution ]]

# Wait until the distribution is ready (i.e., when the status is '''Deployed'''). === Step 3: Update the snippet on your website === # In the Web HTML Snippet, in the line “chatPath: 'https://5x.brightpattern.com/clientweb/chat-client-v4/'”, update the domain to point to the domain name from CloudFront distribution created above.

# After this modification, the Web HTML Snippet will have to be added to all the website pages that use it (or, the already existing snippet has to be modified to reflect the new "chatPath").