Implementing Live Chat (QSC)

About Implementing Live Chat

Live Chat is a Qualtrics Social Connect feature that allows you to add a live chat service to your website. When customers click on this chatbot, it creates a mention in your Social Connect account for an agent to action. When an agent replies on this mention, the reply comes from the chatbot, delivering a seamless conversational experience to the customer.

Getting Started with Live Chat

Live Chat is an add-on to your Qualtrics license. Contact your Account Executive to get started using Live Chat. Once Live Chat is added to your account, you will be provided with a unique Integration ID and an Application ID. Save these IDs for later.

Customizing Your Live Chat

Once Live Chat is enabled for your account, you can find it in the Profile manager. Here, you can customize aspects of your live chat, such as:

• The look and feel of the chat window (colors and logo).
• Add the website domains the chat window should appear on.
• Choose a flow that starts when a customer sends an initial message.
• Attach a quick reply to every outgoing message.

See the Live Chat Profile page for more information.

Adding Live Chat to Your Website

While in the Profile manager, click Preview to view the code snippet for your Live Chat. 

Copy this code and give it to your IT team. They will need to add the code to either the header or body of the website they want Live Chat to appear on.

Once added, Live Chat will appear in the bottom right corner of your website. You can then further customize your Live Chat by adjusting the CSS. See this external support page for more information about customizing your Live Chat with CSS.

Auto Case Creation

When using Live Chat, we strongly recommend you enable automatic case creation. This will automatically group messages from the same conversation into a thread instead of adding each message as an individual mention.

Web Page Tracking

If you have your Live Chat on multiple web pages, we recommend adding web page tracking. This allows agents to see what web page the customer is chatting from. To add web page tracking, you will need to add additional code to the code snippet for Live Chat.

1. In your existing code snippet, find the following line of code:

   ClarabridgeChat.init({ appId: 'integration-id' }).then(() => {

2. Insert a line break.
3. Add the following code block in the new line:

   ClarabridgeChat.setDelegate({
   
   beforeSend(message) {
   
   message.metadata = {
   
   ...message.metadata,
   
   originTitle: document.title,
   
   originUrl: window.location.href
   
   };
   
   return message;
   
   }
   
   });

4. Mentions will now show you what web page the customer chatted from.

Ice Breakers

An ice breaker is a short message that appears next to the Live Chat icon on your website. It often acts as a prompt to draw the customer’s attention to Live Chat as a resource if they have questions. In the below example, “Can we help you?” is the ice breaker.

To add an ice breaker, you’ll need to add additional code to the code snippet for your Live Chat:

1. Find the following lines of code in your existing code snippet:

   ClarabridgeChat.init({
   
   // integrationId: 'your_integration_id', // Use this OR appId
   
   appId: '', // Use this OR integrationId

2. Insert a line break.
3. Add the following code block in the new line:

   icebreaker : {
   
   delay: 1000,
   
   text: 'Can we help you?',
   
   styles: {
   
   backgroundColor: '#9FFF04',
   
   textColor: '#F420F5',
   
   borderWidth: '1px', //
   
   borderColor: '#EAFD10',
   
   width: '150px', //
   
   height: '40px' //
   
   }
   
   },

4. In the above code snippet, you can adjust the values in bold to customize your ice breaker. You may need to ask your IT team for help. Below are tips for each field:
   • delay: The amount of time the customer needs to spend on the page before the ice breaker appears. Enter a delay period in milliseconds.
   • text: Enter the ice breaker message.
   • styles: These are additional CSS properties for customizing the look of the ice breaker. Some are required while others are optional. Keep reading for more information about each property.
   • backgroundColor: The background color. Enter a HEX color code. This property is required.
   • textColor: The text color. Enter a HEX color code. This property is required.
   • borderWidth: The border width of the bubble showing the message. Enter a width in pixels. This property is optional. When excluded, the ice breaker will not have a border.
   • borderColor: The color of the border. Enter a HEX color code. This property is required if using borderWidth.
   • width: The width of the ice breaker bubble. Enter a width in pixels. This property is optional. If excluded, the ice breaker will default to 150 pixels width.
   • height: The height of the ice breaker bubble. Enter a height in pixels. This property is optional. If excluded, the ice breaker will default to 50 pixels height.
5. Your Live Chat icon will now have an ice breaker message next to it.

Flows

You can add flows to your live chat to automate responses through your Live Chat. Visit the linked page to learn more about creating flows. This section will cover how to add a flow to your Live Chat.

1. Paste the following code block after your original Live Chat code snippet:

   ClarabridgeChat.on('widget:opened', () => {
   
   ClarabridgeChat.createConversation();
   
   });

2. Navigate to the Profile manager and use the Send Flow on Start dropdown to choose a flow.
3. You can select 3 additional flows to attach to each outgoing message giving customers various options, such as starting the chat over, or changing the support language.

Business Hours and Agent Availability

You can limit your Live Chat to only be available during your business hours and when agents are online and available. This requires you to integrate your Live Chat with the Qualtric Social Connect API. You must also create your business hours schedule.

1. Follow this guide to integrate your website with the Qualtrics Social Connect API.
2. Call this endpoint to retrieve your business hours ID.
3. Use your business ID to then retrieve the business hours schedule using this endpoint.
4. You will receive a result that looks like this:

   {"name":"My schedule","periods":[{"dayofweek":1,"start":"0900","end":"1200"},{"dayofweek":1,"start":"1300","end":"1900"},{"dayofweek":2,"start":"0900","end":"1800"},{"dayofweek":3,"start":"0900","end":"1100"},{"dayofweek":3,"start":"1200","end":"1600"},{"dayofweek":5,"start":"0900","end":"1800"},{"dayofweek":6,"start":"0900","end":"1200"},{"dayofweek":6,"start":"1300","end":"1900"}]}

5. You can use this information to then only enable the Live Chat during working hours.
6. You can also use the same API call to retrieve information about available agents, and disable the Live Chat if none are available.