Integration Guide

Chat Integration

This guide explains how to integrate Thrio's chat client into your site.

April 21, 2019

TOPIC

Web Chat

UPDATED

April 23, 2019

Survey Based Chat

  1. Create a user survey with a minimum of two panels.
  2. The first panel should include a chat action that is configured to use your chat campaign and the On Success action should be 'Move to panel'. The panel you should configure in the 'On Success Panel' should be the second panel. This second panel should have a Chat Panel input.
  3. To show this chat survey on an external page, simply include the link to it in an iframe on your page using the following HTML:

<iframe src="https://login.thrio.com/survey/?tenant={yourTenantIdHere}&campaignId={campaignIdHere}" width={desiredWidth} height={desiredHeight}>

Deprecated Chat

To integrate from an external web site to the chat, simply call the following URL https://login.thrio.com/chat/ with a series of standard http key and value pair parameters that will be used by the system to determine the behaviour of the chat.

Parameters

  • Tenant (mandatory) - Name of the tenant
  • CampaignId (mandatory) - A valid campaignId that will be use to route the email into the system
  • Address (mandatory) - String representing the campaign name where the chat will be routed to
  • Title (mandatory) - Text that will be presented to the user in the top header.
  • Sub Title - Text that will be presented when the user enter his information (for example, Fill out the following field).
  • Email - JSON Object having 4 possible fields 1. label that would be shown has the label for the email, 2. value representing a valid email address that will be used to match a contact when received on the user application, 3. show boolean value representing if the field should be presented in the form or not and 4. maxLength indicating the max number of characters allowed in the field.
  • Name - JSON Object having 4 possible fields 1. label that would be shown has the label for the name, 2. value representing name of the person requesting the chat, 3. show boolean value representing if the field should be presented in the form or not and 4. maxLength indicating the max number of characters allowed in the field.
  • Button Label - Label that will be shown on the button
  • Ask Information - Boolean value indicating if the chat will present the chat user with information to fill out
  • Ask Location - Boolean value indicating if the chat will grab the browser location. This will trigger a message to the chat user to allow or not the capture of the information
  • Language - Override the browser language. Possible values are en, fr, es, pt.
  • css - URL representing a valid CSS stylesheet that will be use to change the chat layout.
  • Context - A series of key / value pairs that will be attached to the workitem. For example, this information could be used in the workflow engine to query the external system. It will also be available in the data section of the user workitem section.
  • Other - JSON Object having 4 possible fields 1. label that would be shown has the label for other, 2. value of the field other, 3. show boolean value representing if the field should be presented in the form or not and 4. maxLength indicating the max number of characters allowed in the field.
  • Question - JSON Object having 4 possible fields 1. label that would be shown has the label for the question, 2. value representing the chat request, 3. show boolean value representing if the field should be presented in the form or not and 4. maxLength indicating the max number of characters allowed in the field.

Chat Integration Example

Please see the file linked below.

Once the code is inserted on your web site, you just need to call the function handleOpenChatEvent() to open the chat.  The example file below uses JQuery but is not limited to it.

Click here to download the file