What is the Live Chat Help-seeker Experience?

Note: The Traditional Status Button Help-seeker experience uses an older workflow and technology including iframes and new windows. Not all internet browsers handle iframes well and the new window does not support Safe Exit workflows or accessibility needs. While customers are welcome to continue using the Traditional Status Button experience, this option will be eventually sunset from iCarol as use declines and this option no longer meets needs.

Our recommendation is for all customers to plan for and eventually migrate their existing Live Chat Messaging experiences to the modernized Live Chat Popup Widget.

Note: Access to Live Chat Messaging within your iCarol system may have an additional cost associated with it. If your organization is interested in enabling this feature, then a designated Support Contact from your organization can go to 'Help' in the left side menu and submit a case to request more information.

How to access Live Chat Configuration and Installation Settings

1. Log into iCarol as an Admin or user with access permissions
   
2. Click on Messaging from the left menu
3. Click on “IM and SMS settings” from the top right
4. Choose the portal to configure from the top drop-down list
5. Click on the “IM Settings” tab
6. Scroll down to the “Installation of iCarol Live Chat on your Website” section. 

Tip: Additional Live Chat and Messaging setting​s can be found here.

Live Chat Popup Messaging Widget

The Popup Messaging Widget uses Javascript to display a widget at the bottom right of your website and webpages. The Chat Bubble will follow the user when scrolling through your webpage. When using the Popup Messaging Widget, the Chat Bubble displays during your active messaging shifts. The Popup is mobile responsive for those using small screen devices and supports those using screen readers.

As you configure your Chat Popup, the preview is updated, allowing you to fine-tune your choices.

Here are a few examples of configuration options. You upload your own logo, control the font style and colors, and the background colors of headers, footers and buttons.

1. Follow the steps above in the “How to access Live Chat Configuration and Installation Settings” section

2. Under the “Live Chat Popup Messaging Widget Settings” section, configure your popup options:

a.     Active status: When active, the Chat Bubble will display during Staffed ​messaging shifts. When inactive the Chat Bubble will never display.

b.     Websites with permission: Even if the Popup widget is installed on your website and active, the website must be granted permission to use and display the popup. Enter websites with your permission to display the widget here.

c.     Safe Exit URL: To enable this feature within the Chat Bubble, enter a “URL to open”. Leave this field blank to disable this feature.

 

        When enabled, instructions will preview and be displayed on the popup for the help-seeker.

 

d.     Configure a Font: This font will be used for text on the chat window

e.    Configure the Banner-Header: 

i.     Logo: Click “Choose File” to upload an image/picture (.png) file up to 512 KB to display at the top of the popup; Click “Remove Logo” to remove the image.

 

ii.     Choose a background color using the slider, entering a RBG, HSL, or HEX code. (Click the double arrow selector   to change the code type)

iii. Choose a text color using the slider, entering a RBG, HSL, or HEX code. (Click the double arrow selector   to change the code type)

f. Configure the Banner (below header): This banner displays below the Banner-Header and the chat space in the popup

i. Choose a background color using the slider, entering a RBG, HSL, or HEX code.

ii. Choose a text color using the slider, entering a RBG, HSL, or HEX code. 

g. Configure Button: The button is used to progress the registration process, start conversations, etc.

i. Choose a background color using the slider, entering a RBG, HSL, or HEX code.

ii. Choose a text color using the slider, entering a RBG, HSL, or HEX code.

h. Configure Chat Bubble: This is the bubble that will always display on your website, allowing help-seekers to start conversations

i. Choose a background color using the slider, entering a RBG, HSL, or HEX code.

ii. Choose a icon color using the slider, entering a RBG, HSL, or HEX code.

 

3. Click “Save”

Install on your website

1. Follow the steps above in the “How to access the installation instructions” section

2. At the bottom of the “Live Chat Popup Messaging Widget Settings” section, the “Code Snippet used to install Chat Widget on approved websites” text displays:

 

3. Copy the Code Snippet and provide this to your website developer or partners.

Traditional Live Chat Status Button and New Window

The Traditional Live Chat Status Button uses an iframe to display an online or offline image as a button on your website. The images that appear on the IM Settings tab for your Online and Offline images are the images that will appear on your public website to indicate whether your Live Chat Portal is open or closed.

When the online button is clicked, the chat will open in a new window for the help-seeker.

How to configure

1. Follow the steps above in the “How to access the installation instructions” section

2. Under the “Traditional Live Chat Status Button and New Window” section

a. Upload your own Chat online image and/or Chat offline image 

To edit either image, click the ‘Choose file’ button under the respective Chat online image or Chat offline image section, navigate to the image on your computer and click "Open"

3. Click “Upload”

When the selected named portal is offline, the image you’ve uploaded appears next to text that says ‘Offline’. If you have users registered for a Messaging Shift in the future associated with this portal, the following text appears next to the image you’ve uploaded: ‘Offline. Next session: [Time], [Time Zone] on [Date]. For example, ‘Offline. Next session: 01:00, Eastern Standard Time on Tuesday, October 24, 2017’.

Note, if you’ve uploaded a custom online/offline image, if you wish to reset the images to the iCarol default image, select the checkbox next to the setting ‘Use default online/offline status image’.

Online/Offline image dimensions: iCarol's default online/offline image dimensions are 200x50 pixels.  If you would like to upload your own online and/or offline image, these can be any size that works for the design of your website.  We recommend using website best practices such as:

1. at minimum provide images at least 40x40 pixels
   
2. consider using standard banner size dimensions of 200x50 pixels, 300x250 pixels, 728x90 pixels, etc.
   
3. have a defined frame for the image
   
4. use a font size that is easily readable (don't use cursive/script fonts, all uppercase, thin fonts, or fonts lower than 10 points)
   
5. 150 KB is the maximum recommended file size for the image, the smaller file size the better for page loading and performance

Note: The Traditional Live Chat New Window can be configured to better reflect the look, style and feel of your website by changing the default colors and uploading header logos. There is a cost associated with this configuration. Contact iCarol Support for more information.

Install on your website

The text that appears in the ‘HTML to put on your website to initiate a session’ textbox can’t be edited, but it can be copied. The text that appears in this textbox is what you’ll place on your public website for help seekers to access your Live Chat Portal. Depending on the online/offline status of your portal, the  respective image you’ve configured in your IM Settings will appear.

Note, if you wish to see your online/offline images without putting the HTML on your website, copy the URL from within the HTML. The URL is the text in this textbox that begins with http:// and it ends with &cc=en-US, or &cc=fr-CA; copy and paste this string into your browser.

Steps:

1. Follow the steps above in the “How to access Live Chat Configuration and Installation Settings” section

2. Under the “Traditional Live Chat Status Button and New Window” section

3. Copy the code in the “HTML to put on your website to initiate a session” and provide this to your website developer or partners.