How can we help?

This article serves as a comprehensive guide on setting up and integrating the chat widget into your website, thus providing your customers with the option to contact your services and agents through chat.

Follow the steps detailed in this article to use the chat channel to its full potential. Add value to your website by seamlessly setting up and integrating the chat widget, ensuring its availability to customers.

For easier navigation, please use the index listing below:

• Firewall Exceptions
  • • Content Security Policy (CSP) - Chat Widget V1
    • Content Security Policy (CSP) - Chat Widget V2
    • OneTrust Security
• Creating a Chat Touchpoint
  • • Domain
    • Create Regional Chat Instance
• Chat App
• Chat Touchpoint
  • • Touchpoint Tab
      • Connecting to Feedback Flow
    • Customization Tab
      • Appearance Tab
      • Preference
        • Enable/Disable Chat Transcript Download
        • Display Agent's Name
        • Customize Autopilot’s Name and Avatar
    • Engagement Tab
      • Conversation Start
      • Initial Screen
      • Chat Screen
    • Settings Tab
      • Conversation Preview
• Chat Widget Integration
  • • Widget Integration via script
• Chat Widget Customization
• Context Variables
  • • Context Variables Received from the Initial Screen
    • Context Variables Received from the Website
    • Possible Applications for Context Variables
• Visitor Identification
  • • Creating and Identifying a Contact Manually
    • Creating and Identifying a Contact Automatically
• Additional Resources

 

Firewall Exceptions 

When a website has Content Security Policy (CSP) enabled, it restricts the types of content that can be loaded on the site. To ensure that chat functionalities run properly, specific sources must be whitelisted. 

 

Content Security Policy (CSP) - Chat Widget V1

Below is a description of the CSP configuration needed for Chat Widget V!, including td-us-1, td-eu-1, td-ca-1, and td-usfed-1 talkdesk region, to ensure chat functions properly on the website.

 

CSP Domains

Below is the description about the purpose of CSP domains. Each of these domains plays a crucial role in enabling chat services by specifying trusted sources from which content can be loaded, ensuring both functionality and security for users in their respective regions.

 

Content Security Policy (CSP) - Chat Widget V2

Starting July 19th, 2024, when creating a chat touchpoint, the system will automatically generate Chat Widget V2. Below is a description of the CSP configuration needed for Chat Widget V2, including td-us-1, td-eu-1, td-ca-1, and td-usfed-1 talkdesk region, to ensure chat functions properly on the website.

 

CSP Domains

Below is the description about the purpose of CSP domains. Each of these domains plays a crucial role in enabling chat services by specifying trusted sources from which content can be loaded, ensuring both functionality and security for users in their respective regions.

 

OneTrust Security

If your website uses OneTrust, please note that as part of its functionality, OneTrust uses the OtAutoBlock.js script to block suspicious behavior, so it can be blocked from loading and, as a result, the chat launcher may not appear on the website.

We recommend adding Talkdesk Chat to your trusted OneTrust settings. In order to do so:

• Log into your OneTrust account.
• Navigate to the script management settings.
  • • Settings for managing script loading are usually found in the "Cookie consent" or "Script management" sections.
• Define whitelisted scripts:
  • • Add your trusted JavaScript remote files (https://talkdeskchatsdk.talkdeskapp.com/v2/talkdeskchatsdk.js) or domains to the configuration.
    • Note: Any script not in the whitelist will be blocked until user consent is obtained.

 

Creating a Chat Touchpoint

To create a new “Chat touchpoint”, go to “Admin” > “Channels” > “Chat”, and click the Create touchpoint button.

This will open a pop-up window, asking you to provide the domain (mandatory) and the friendly name (mandatory) of the new chat touchpoint. Click Create.

The new chat touchpoint will now be visible on the list and will be inactive by default. Click the touchpoint’s domain to complete its configuration.

Locate the “Touchpoint” section and click Edit. 

You can now select the Studio flow that should be assigned to the new chat touchpoint. Click Save to return to the configuration page.

Choose the Customization tab, and click Edit. Here, you have the option to customize the chat widget’s content, such as:

• Welcome message.
• Fields (customer information).
• Dropdowns (e.g. language selection).
• Messages (valuable information).
• Actions buttons (e.g. “Start chat”).

Integrate the chat widget in the desired pages of your website. This can be done via iframe (recommended option) or via script. Check the “Widget Integration” section for more details.

After integrating the chat widget on your website, go to “Admin” > “Channels” > “Chat” > Touchpoint.

In the Touchpoint tab, click Edit.

You can now activate the chat touchpoint by sliding the “Status” toggle. Save your progress.

Reload your website, and you should be able to see the chat widget in the web pages where it was integrated.

While configuring the chat touchpoint, please have the following guidelines in mind:

 

Domain

• Protocols and ‘www.’

The system differentiates between the two available protocols (‘http:’ and ‘https:’) and does not differentiate between domains that include ‘www.’ and domains that do not include ‘www.’. 

However, it is possible to remove the protocol information and it will work for all combinations.

 

Deploy to a Domain and its Subdirectories

Notes:

• All subdirectories such as https://www.talkdesk.com/abc under the www.talkdesk.com are supported to deploy the chat touchpoint.

• The chat conversation will carry over as the contact navigates between pages and subpages within the domain. This ensures uninterrupted communication.

 

Deploy to Subdomains

Notes:

• Subdomain deployment uses wildcard (*) to match subdomains. All subdomains ending with talkdesk.com are supported to deploy the chat touchpoint. 

• The chat conversation WILL NOT carry over when a contact person navigates to a different subdomain. This provides a clear separation of conversations across subdomains.

 

Deploy to One Page

Note: The system uses ‘http:’ and ‘https:’ to identify the link to be deployed. Any domain starting with these terms will only be deployed to the specific link. The subdirectories under the domain link such as http://www.talkdesk.com/abc/def.html is not supported to deploy the chat touchpoint

 

Create Regional Chat Instance

When a chat touchpoint is created, a regional instance of the chat is created based on the deployment region of the chat touchpoint. Chat regional instances serve as distinct data centers globally, facilitating the essential processing and storage for your application's communication functionalities. For example:

• Admins creating a chat touchpoint in the US region will automatically create a chat regional instance in the US region. 
• Admins creating a chat touchpoint in the EU region will automatically create a chat regional instance in the EU after May 30th, 2024.
  • The following firewall exceptions for the EU region are required to be added.
    • • https://api.talkdeskapp.eu
      • wss://tsock.ie1.twilio.com/v3/wsconnect
      • https://mcs.ie1.twilio.com
      • https://media.ie1.twilio.com
  • The following CSP security policies for EU regions are required to be added.
    • • https://api.talkdeskapp.eu
      • wss://tsock.ie1.twilio.com
      • https://mcs.ie1.twilio.com
      • https://media.ie1.twilio.com

Notes:

• Chat touchpoints created in the US region before May 30th, 2024 will continue to connect with the corresponding regional chat instance located in the US If you want to migrate the existing EU region Chat App to Chat EU instance please follow the instructions in the Migrating EU Chat Touchpoints article. The downloadable document can also be found at the bottom of this article.
• Chat touchpoints created in the CA region still connect with the chat regional instance located in the US.

 

Chat App

Access Workspace and go to “Admin” > Channels. On the “Channels list” tab, you will find the “Chat” channel. Enter it to configure all chat touchpoints.

• Channels list: The channels available in your account. Select Chat to configure the channel’s touchpoints.
• Global settings: Settings applicable to one or more channels. E.g. the definition of the occupancy weight of each conversation for each channel.
• Templates: Create pre-written messages to help agents be more efficient.
• Chat channel: To configure this channel, click the Chat section within the “Channels” application.
• Number of touchpoints: This label indicates the number of touchpoints that were already configured for chat.

Use the Create new touchpoint button to create a new touchpoint. Once clicked, it will request the website domain and a friendly name for the touchpoint.

By clicking the “More options” button (...), you will be able to:

• Edit the chat touchpoint.
• Edit the chat appearance.
• Duplicate the appearance configurations to a new touchpoint (you will be asked for the domain and friendly name).
• Activate or deactivate the touchpoint.
• Delete the touchpoint (only possible if the chat is deactivated first. Note: Keep in mind that you also have to remove the widget code from the website).

 

Chat Touchpoint

For each chat touchpoint, there are four tabs: 

• “Touchpoint”
• “Customization”
• "Engagement"
• “Settings”

Touchpoint: In this tab you can set the domain of your website, assign a Studio flow, Connect to a Feedback flow and copy the widget code to add it to your website.

Note: The code snippet is only available in the view mode.

Customization: In this tab you will be able to customize appearance such as brand color, brands logo, chat launcher and preference of the chat widget.

Engagement: In this tab you will be able to customize the initial form and chat message of the chat widget

Settings: In this tab you will be able to configure the conversation preview permission in the Inbox app based on touchpoints and roles.

In order to switch to the selected tab from view mode to edit mode, click the Edit button.

 

Touchpoint Tab

When entering the Touchpoint tab, you will be in view mode. To switch to the edit mode, click the Edit button to start configuring your chat touchpoint.

Use “Domain” to add the website URL where you want the widget to appear (check the available guidelines here). On the “Friendly name” field, provide a friendly name for the touchpoint, meaning that this will be the name shown to the agents.

Next, select the Studio flow to be assigned to the touchpoint, from the dropdown menu.

When configuring the chat for the first time, you can open the Configure a Studio flow link that will forward you to Studio so that you can create a Studio flow.

 

Note: You can switch the assigned Studio flow as often as needed, without having to change the code snippet on your website.

 

Slide the “Status” toggle to activate or deactivate the chat touchpoint. Save your progress.

 

: Once the widget code is added to the website, the chat widget will appear for every website visitor. 

 

: When deactivated, the chat widget will disappear from the website. Ongoing conversations will not be lost, but the visitor will not be able to start another conversation.

Note: The Save button will only be enabled once you add the domain and select a Studio flow.

After saving your configurations, you will return to view mode, where you will be able to see the applied configuration and the widget code that must be added to your website.

On the “Domain Information”, you can see the domain, the domain’s friendly name, and the assigned Studio flow.

After saving the touchpoint configurations, the widget code will be generated. Check this section for details on how to add the widget code to your website.

 

Note: The widget code section is only shown in the view mode.

 

Connecting to Feedback Flow

Find the “Connect to Feedback flow” option and use the dropdown to select the Feedback flow that you want to assign to the touchpoint.

You can also open the Configure a Studio flow link [1] to access the feedback flow, in order to create a chat survey.

To disconnect a chat survey from the chat touchpoint, press the “x” icon at the right of the flow’s name.

 

Customization Tab

When entering the Customization tab, you will be in view mode. To switch to the edit mode, click the Edit button to start configuring your chat's appearance.

Appearance tab [1]: Customize the theme, color, and icon of the chat widget including brand color, branding, chat launcher, launcher color.

Preference tab [2]: Here you can enable, disable and configure general settings of the chat widget such as end chat button, chat transcript download, typing indicator, display agent name, customize autopilot etc.

Preview [3]: Preview of the chat widget screens

 

Appearance Tab

When entering the “Appearance” tab, you will be able to start configuring your chat's appearance. The following functionalities will be available for editing:

Within "Chat widget", you can select "Brand color" to choose the theme color of the chat widget to match your brand preferences. This selection will update various elements of the chat widget, including the header background, header text, and widget background color, and so on.

If you select the "More color settings" option, you will be able to specify and preview the colors of the chat widget to align with your branding. These options are:

• "Header background": The background color of header.
• "Header text": The text color of the header.
• "Welcome message background": The background color of welcome message in the initial form screen.
• "Welcome message text": The text color of welcome message in the initial form screen.
• "Widget background": The background color of chat widget.
• "Action button": The background, outline or front color of the action button, including: "Start chat button", "Start new chat button", "End chat button", "Cancel chat button", and action buttons (digital component carousel, quick reply, and more).
• "Agent’s bubble": The chat background color of an agent’s chat bubble.
• "Agent’s text": The text color of an agent’s chat message.
• "Customer’s bubble": The chat background color of customer’s chat bubble.
• "Customer’s text": The text color of customer’s chat message.

• "Branding - Logo URL" [1]: Enter a URL to customize and preview the brand logos in the Chat Widget.
• "Title" [2]: Enter title and description to customize and preview the brands in Chat Widget.
• "Chat launcher - Icon URL" [3]: Enter a URL to customize and preview the chat launcher icon.
• "Launcher color" [4]: Select a color to customize and preview the chat launcher background color.

Preference

When expanding the “Preference” tab, you will see a preview of how the widget will look like, on the Preview style section.

You will also be able to configure the following functionalities, by enabling or disabling the respective toggles:

• “Close conversation” button: Enable/disable the option that allows visitors to close the chat conversation (it will be shown on the chat widget header).
• Typing indicator: Enable/disable the visibility of the indicator that the agent or the contact is typing (or that the Autopilot is loading the reply).

After saving your configurations, you will return to view mode, where you will be able to see the applied configurations and which content will be shown in the chat widget. A status label indicates if the “Close conversation” option is enabled or not.

 

Enable/Disable Chat Transcript Download

Chat transcript download feature allows users to view or archive important conversations’ history by downloading chat transcripts directly from the chat widget.

Use the highlighted toggle to enable or disable the option that allows contacts to download the chat transcript. This option will be available in the More Options (three dots) menu.

Once “Download transcript’’ is enabled, contacts can locate the "Download transcript" option in the chat widget’s menu and click to download the chat transcript in plain text format. The downloaded file will be accessible from the browser's download list, for future reference and record-keeping purposes.

 

Display Agent’s Name

When this toggle is on, contacts will be able to see the agent's name under their messages and displays an informative message when the agent takes over: e.g. "Graham Shaw will handle your chat". Admins can customize the display to show the agent's full name, first name, last name, or a specific name.

 

Customize Autopilot’s Name and Avatar

Activate the  "Customize autopilot's name" [1] toggle to customize the autopilot’s name. Contacts can see the autopilot's name under the respective messages. The default name is "ChatBot".

To customize the autopilot’s avatar [2], activate the toggle and configure the avatar of Autopilot by providing an avatar URL. Contacts will be able to see the autopilot's avatar under the respective messages.

 

Engagement Tab

Conversation Start

When entering the Engagement tab, you will be in view mode. In order to switch to the edit mode, click the Edit button to start configuring. When expanding the "Conversation" tab, you will be able to enable or disable it.

Enable or Disable "Chat immediately"

The "Chat immediately" toggle provides a seamless way to initiate chat conversations without requiring any input from the user. For example, when enabled and the initial form is disabled:

• The chat conversation begins instantly upon the user clicking the chat launcher icon.
• Contact person will be routed based on the configured Studio Flow, whether to Autopilot or a live agent, which reducing friction and enabling immediate assistance.

Note: In chat widget V2, This feature replaces the previous "Route conversation immediately after the user clicks this button" checkbox. Existing chat touchpoints automatically transition to the new configuration, ensuring that Studio Flows are triggered as soon as the user interacts with the chat button.

 

Initial Screen 

When expanding the “Initial screen” tab, you will be able to enable and configure its components.

Use the “Show/Hide initial screen” toggle [1] to enable or disable the chat widget’s initial screen.

 

Note: The “Preview style” [2] will update every time you perform a change to its components.

 

Add a “Welcome message” [3] to the top of the chat widget to welcome your visitors. It can be composed of a title of up to 20 characters, and/or a text of up to 120 characters.

Note: URLs added to these elements will be clickable links.

Then, you can create a pre-conversation form to get information from the visitor that can be used for routing purposes or to provide additional context to your agents.

Note that by default, there is a custom message, a custom field, a custom dropdown, and a custom button. These default components cannot be removed, but they will only be shown if you configure them.

You can use the + Add field button to add another custom component to the initial screen, according to the type you select: 

• “Button”
• “Dropdown”
• “Field”
•  “Message”

The “Custom button” adds a button (which you can label) to trigger an action. Currently, there is only one trigger option: “Start the chat”.

 

Note: Enable “Route conversation immediately after the user clicks this button”, if you would like Studio flow to be triggered as soon as the user clicks the button. If disabled, the user needs to send a message to trigger the Studio flow.

With the “Custom dropdown”, you can add a customized dropdown menu to the initial screen.

In the “Custom field”, you will add an input field to the initial screen, allowing the visitor to input information. You can add the label of the field in the text box, and then map it with the value you are collecting.

 

Note: As an example, if you want to ask for the visitor’s email address, type “Email” as the custom field’s name and select the “Contact email” option from the dropdown. In case you want to ask for a different type of information (e.g. order number) you can define the custom field’s value as “Custom option”.

The option to add a “Custom message” will add a message to the initial screen. By enabling the “Chat bubble” toggle, the message will be shown inside a chat bubble.

Deleting a field via the corresponding icon will remove that custom component from the initial screen.

 

Note: The default components cannot be deleted and, therefore, you need to delete their configuration to hide them from the initial screen. 

 

The “Required” toggle sets which fields are optional or mandatory before the visitor proceeds to the chat screen. Each component has a drag-and-drop tool that will allow you to change the presentation order of the components on the initial screen.

After saving your configurations, you will return to view mode and see the applied configuration and which content will be shown in the chat widget.

You will see a status label indicating if the initial screen is enabled or not, as well as a preview of your configuration. 

For each custom field or custom dropdown, a “Studio Argument” value will be generated. Each argument can be mapped to the “Incoming Message” component of the touchpoint’s Studio flow to provide context to agents or routing purposes.

 

Chat Screen

When expanding the “Chat” tab, you will be able to configure the chat screen.

If the initial screen is enabled, the chat screen is shown when the visitor clicks the Start the chat button. If there is no initial screen, the chat screen will be shown as soon as the visitor opens the chat widget.

In “Messages”, you can add static messages that will appear once the visitor is on the chat screen.

By default, there is one input box to add a message, but it will only be shown if you configure it. You can add as many messages as you want by clicking on the Add another message button.

 

Notes:

• All messages will be presented in a chat bubble.
• URLs added to this element will be clickable links.

 

Press the “Delete” icon to avoid messages from appearing on the chat screen.

Each message has a drag-and-drop tool that will allow you to change the presentation order of the messages on the chat screen.

After saving your configurations, you will return to view mode, where you will be able to see the applied configuration and which content will be shown in the chat widget.

 

Settings Tab

In the “Settings” tab, you can configure settings at the touchpoint level, as well as overview the current configuration of the available settings. Click the desired touchpoint’s Edit button to configure the settings.

 

Conversation Preview

With the “Conversation Preview” option, you have the ability to grant or restrict certain roles from previewing chat conversations directly from the “Inbox” app.

• Allow previews: Toggle to enable or disable the conversation preview. When enabled, all the conversations of this touchpoint will be able to be previewed by authorized users.
• Authorized roles: When the “Allow previews” option is enabled, you can select the roles that can preview the touchpoint’s conversations.

 

Chat Widget Integration

Widget Integration via Script

Access  “Admin” > “Channels” > “Chat” > “Touchpoint”. In the Touchpoint tab in view mode, locate the widget code section.

Select the code snippet and click the Copy button. Paste the code snippet before the following closing tag on your own website:

• </body>

Note: Copy it onto every page where you want the chat widget to appear.

 

Chat Widget Customization

In order to better adapt the chat widget to your website’s characteristics, you can customize the widget’s look and the user experience. Please refer to this article for more information.

 

Context Variables

The initial step component on the “Incoming Message” flow in Studio allows you to bring context coming from the chat widget.

It is possible to collect context variables in the following ways:

• Data provided by the visitor: Asking for information in the initial screen through custom fields and custom dropdowns. The visitor will then fill in the requested information.
• Data provided by your system: Receiving information from your website when the visitor opens the chat widget or when the visitor starts a chat conversation.

 

Note: You can use both ways at the same time.

 

Collected variables must be mapped to the “Incoming Message” component of the Studio flow that is assigned to the chat touchpoint. After that, you can use them either to manage which variables you would like to present to your agents as additional context for routing purposes, or build integrations with other Talkdesk Products.

 

Context Variables Received from the Initial Screen

Go to “Admin” > “Channels” > “Chat” > “Touchpoint”, open the “Appearance” tab, and click the Edit button. Enable the initial screen and add the fields that will be collecting the context you need. For more details, please see this section.

Check the Studio arguments related to each field of the initial screen. To know more about Studio arguments, please read the following articles:

• Digital Engagement: Studio Configuration for Administrators
• Studio: Working with Variables

Open the touchpoint’s Studio flow in edit mode. Select the Incoming Message component, add the arguments, and map the respective flow variables:

• “Argument name”: Copy the field’s argument name that is shown on the “Appearance” tab (view mode) and paste it into the argument input box.
• “Map to flow variable”: For the contact details variables, the following naming should be applied:
  • field_name1 > contact_name
  • field_number1 > contact_number
  • field_email1 > contact_email
• For any other argument, any other variable name can be applied.

Finish the configuration according to your requirements and click Save.

 

Context Variables Received from the Website

In the widget code, locate the commented section with the function shown below, and decomment it:

• setContext()

Example: Receiving variables when the conversation is initiated (with static variables).

Next, locate the function shown below and modify its parameters to pass in the desired data:

• webchat.setContextParam()

You will now choose when you want to receive the context variables from your website.

To receive them when the conversation is initiated, keep the function:

• webchat.onConversationStart = function() { setContext() }

And then delete the function:

• webchat.onOpenWebchat = function() { setContext() }

To receive them when the chat widget is open, keep the function:

• webchat.onOpenWebchat = function() { setContext() }

And then delete the function:

• webchat.onConversationStart = function() { setContext() }

The name of the variables you added to the function shown below correspond to the Studio arguments:

• webchat.setContextParam()

Open the touchpoint’s Studio flow in edit mode. Select the Incoming Message component, add the arguments, and map the respective flow variables:

• “Argument name”: Copy the variable name you added to the widget code within the “webchat.setContextParam” function and paste it into the argument input box.
• “Map to flow variable”: For the existing variables, the following naming should be applied:
  • argument that collects name ➞ contact_name
  • argument that collects number ➞ contact_number
  • argument that collects email ➞ contact_email
• For any other argument, any other variable name can be applied.

Finish your Studio flow configuration and Save your configurations.

 

Possible Applications for Context Variables

Show Additional Context to Agents

In the “Manage context” section of the touchpoint’s Studio flow, you can define the context that will be shown to your agents. To do so, open the Studio flow in edit mode, and click on this button: . Then, select the variables you would like your agent to have access to during the chat conversation.

Examples received from the initial screen and an example received from the website.

 

Prefill contact details card

By receiving the visitor’s name, phone number and/or email address, you can populate the contact details card.

For that, you need to expose those variables as context in the “Manage context” section. Open the Studio flow in edit mode, and click: . Then, select the variables corresponding to the contact details.

 

Note: If you get a valid phone number, the agent will have the ability to choose that number when clicking-to-call the visitor.

 

Route Conversations Based on Conditional Statements

With the Conditional Statement component, you can route a chat conversation to a queue that matches the predefined conditions. 

You can use the context variables to set these conditions and later use the “Assign agents to message” component to set the queue to which the chat conversation should be routed to.

 

Other Possible Applications

There are several uses for context variables within different Studio’s components, for instance,  assigning a conversation to a ring group based on the variable’s value in the “Assign agents to message” component.

These variables can also be passed to external systems through integrations or automations that it is possible to configure within Talkdesk’s system.

 

Visitor Identification

In the Conversations app, a visitor will be identified as “Visitor #NNN” if no Contact is created or assigned to the visitor during the chat conversation.

 

Note: If the “Name” field of the “Contact Details” card is populated, the visitor will be identified by that name in the Assigned to you tab, even if the Contact is not saved.

In Reporting, a visitor will be identified by “Visitor #NNN” if no Contact is created or assigned to the visitor when a chat conversation is being handled.

Visitor identification can be done manually or automatically based on how contact information is obtained. The possibilities are:

• Contact is created or identified manually when the data is provided by the visitor: 
  • Option 1: The visitor will provide the requested information, and the agent will populate the “Contact Details” card and then save it as a new contact or merge with an existing contact.
  • Option 2: The visitor will fill in the requested information in the chat widget’s initial screen, and the agent will validate the information that was populated in the “Contact Details” card. It can then be saved as a new contact or merged with an existing one.

In these scenarios, if the same visitor contacts again and the same contact information is provided, Talkdesk will not identify the visitor automatically.

Note: The Contact is not created automatically to allow agents to verify the reliability of the information provided. This step is essential as there is no prevention in place for incorrect or mistaken contact details entered by users in the pre-conversation form, including the possibility of entering someone else's contact information.

 

• Contact is created or identified automatically when the data is provided by your system by receiving the contact information from your website, using the “Chat User Identification” feature.

This feature allows you to send the email address or the phone number of the visitor to Talkdesk, through a designated variable in the chat widget’s code. When the visitor initiates a chat conversation, the system receives the visitor’s phone number or email address, and then it automatically saves it as a new contact or matches it with an existing contact.

In this scenario, if the same visitor contacts again, Talkdesk will identify the contact.

The “Chat User Identification” feature is useful for website sections that demand user authentication. With this feature, visitors can be reliably identified, ensuring that the information being sent originates from the user initiating the chat conversation.

Note: Talkdesk will only create the Contact if the received phone number or email address is in a valid format.

 

Creating and Identifying a Contact Manually

When the contact information is provided by the visitor, agents must decide whether to create (or not) a new contact, or assign (or not) the chat conversation to an existing contact. This is due to the agent needing to validate the provided information.

 

Using a Pre-Conversation Form to Collect the Contact Information

Head to “Admin” > “Channels” > “Chat” > “Touchpoint”. Open the “Appearance” tab and click Edit.

Expand the initial screen section. Now, add custom fields and define them as “Contact name”, “Contact number”, and “Contact email”.

Click “save” and check the Studio arguments.

Open the touchpoint’s Studio flow in “Edit” mode. Select the Incoming Message component and add the arguments, and add the arguments as follows:

• field_name1 > contact_name
• field_number1 > contact_number
• field_email1 > contact_email

Finish the configuration according to your requirements and press Save.

Click the button and select the variables of the contact details:

How It Works

If you are not requesting the contact information in advance, your agents will have to request that information during the chat conversation. 

They must then copy/paste that information into the “Contact Details” card and then save as a new contact or merge it with an existing one.

If you are using the initial screen to request contact information in advance, the “Contact Details”  card will be populated with that information.

Then, agents must validate which information they want to keep and save as a new contact or merge it with an existing one.

 

Creating and Identifying a Contact Automatically

The “Chat User Identification” feature provides an automated process to create and identify visitors that initiate a chat conversation with your agents. 

Visitors can be identified by phone number or email address.

 

Configuration steps

First, locate the following function in the widget code:

• webchat.setContextParam()

To send the visitor’s phone number (in E.164 format) or email address from your website to Talkdesk system, use the variable:

• td_contact_person_identification

 

Note: The data must be received in a valid format.

 

Make sure you keep one or both of the following functions in that section of the widget code:

• webchat.onConversationStart = function() { setContext() }
• webchat.onOpenWebchat = function() { setContext() }

 

How It Works

If the “td_contact_person_identification” variable is populated with a valid phone number or email address, the system will search for a matching phone number and email address in the “Contacts” list.

• If it does not find a match, a new contact is automatically created. The name and the phone number/email address will be populated with the variable’s value.
• If it finds a single match, the contact will be identified.

• If it finds multiple matches, the system will give the option to choose from several matching contacts.

Notes:

• If the variable’s value is empty or is in an invalid format, the system will not create or identify visitors automatically. The manual procedure will be the one to follow. To know more, please check this section.
• If the phone number or email address is provided in the initial screen, the system will override that information regarding contact creation and identification.

 

Additional Resources