Chat Widget V2


Getting Started

Chat Widget is a JSSDK (hereafter referred to as Chat widget) that allows embedding into your own website, it comes in handy whenever contacts want to contact you, more detailed configuration and usage documents are here. This document mainly focuses on JSSDK-related content.

Chat Widget Methods

Open chat widget

The open method is used for opening the chat widget by hitting the icon.

webchat.open()

The open method is used for opening the chat widget by hitting the icon.

Close chat widget
The close method is used for minimizing the chat widget by hitting the minimize icon in the chat box header, it needs to be invoked after the initialization of the chat widget.

webchat.close()

Set context
The setContextParam method is used for transmitting customized key-value context to TD internal systems such as Studio Flow, for example. We can transmit the customer’s using language or address to the agent. The customized context will be displayed in the Context tab of Conversation through Studio.

🚧

The setContextParam can be used to set default values for the Initial screen form in chat-widget. If we set default values for all the form controls of Initial screen, the Initial screen will be skipped before the conversation starts.

webchat.setContextParam({ 
  "var1": "dummy value for var1", 
  "var2": "dummy value var2",
  "field_name1": "dummy name",
  "field_email1": "[email protected]"
  ...
})

Chat Widget Events

Initialization completed
This method is used for doing something after chat widget is initialized. It’s an asynchronous function and receives the customized configuration of chat widget as arguments.

webchat.init(configs).then(function () {
  // your own business logic after chat widget initialized
})

When Chat is opened
The onOpenWebchat method is used for doing something after the chat widget is opened. It receives a callback as its argument to execute your customized logic.

const doSomething = () => {
  //your own business logic when chat widget is opened
}

webchat.onOpenWebchat(doSomething)

When chat is closed
The onCloseWebchat method is used for doing something after the chat widget is closed. It receives a callback as its argument to execute your customized logic.

const doSomething = () => {
  //your own business logic when chat widget is closed
}

webchat.onCloseWebchat(doSomething)

When the conversation starts
The onConversationStart method is used for doing something after the chat conversation starts. It receives a callback as its argument to execute your customized logic.

const doSomething = () => {
  //your own business logic when conversation starts
}

webchat.onConversationStart(doSomething)

Chat Widget Snippet Code Configuration

The snippet code is embedded in the customer’s website and can be customized according to the configuration you transmit.

<!-- Start of Talkdesk Code -->
    <script>
      var webchat;
      (function(window, document, node, props, configs) {
        if (window.TalkdeskChatSDK) {
          console.error("TalkdeskChatSDK already included");
          return;
        }
        var divContainer = document.createElement("div");
        divContainer.id = node;
        document.body.appendChild(divContainer);
        var src = "https://talkdeskchatsdk.talkdeskapp.com/v2/talkdeskchatsdk.js";
        var script = document.createElement("script");
        var firstScriptTag = document.getElementsByTagName("script")[0];
        script.type = "text/javascript";
        script.charset = "UTF-8";
        script.id = "tdwebchatscript";
        script.src = src;
        script.async = true;
        firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
        script.onload = function() {
          webchat = TalkdeskChatSDK(node, props);
          webchat.init(configs);
        };
      })(
        window,
        document,
        "tdWebchat",
        { touchpointId: "<customer touchpointId>", accountId: "", region: "<customer td region>" },
        { enableEmoji: true, enableAttachments: true, enableValidation: true, enableResponsiveLayout: true, styles: {} }
      );
    </script>
<!-- End of Talkdesk Code -->
FieldTypeRequiredDescription
windowobjectYesBrowser built-in Window object
documentobjectYesBrowser built-in Document object
nodestringYesThe target Dom to which chat-widget UI is mounted
propsSee [props configuration below for detailsYesChat-widget base configuration, such as service config, public methods
configsSee configs configuration below for detailsYesChat-widget customization settings

props configuration

FieldTypeRequiredDefault valueDescription
touchpointIdstringYes-Use to get the chat-widget touchpoint configuration
flowIdstringNo-Deprecated

Note: Keep this field only for compatibility, please better use touchpointId instead.
accountIdstringNo-Deprecated

Note: Keep this field only for compatibility, it won’t work if configured.
regionenumYes-The region of ​​the TD endpoints gateway: td-us-1 td-eu-1 td-ca-1 td-usfed-1
enablePointMoveTriggerButtonbooleanNofalseEnable/disable drag and move for the chat launcher
languageCodestringNoen-USUsing language: en-US pt-PT pt-BR es-ES de-DE fr-FR it-IT sa-AR eg-AR
autoOpenbooleanNofalseAutomatically open widget after initialization

configs configuration

FieldTypeRequiredDefault valueDescription
enableEmojibooleanNotrueEnable/disable the emoji capability
enableValidationbooleanNofalseEnable/disable the validation of the email or phone number in the Initial screen
enableUserInputbooleanNotrueEnable/disable the sending box
enableAttachmentsbooleanNotrueEnable/disable sending/receiving attachment capability
enableResponsiveLayoutbooleanNotrueEnable/disable auto full-screen capability
languageCodestringNoen-USUsing language: en-US pt-PT pt-BR es-ES de-DE fr-FR it-IT sa-AR eg-AR
stylesobjectNo-See theme config below for details

Chat Widget Theme Configuration

The chat widget supports customizing themes to have a better UX for Customers.

Customizing the chat widget launcher

Launcher

FieldTypeDefault valueDescription
chatLauncherColorstring# 1e0044The color for the chat launcher
chatHoverLauncherColorstring# 172241The hover color for the chat launcher
triggerButtonWidthstring35pxWidth of launcher icon. _Note: up to 64 px
triggerButtonHeightstring35pxHeight of launcher icon. _Note: up to 64px
triggerButtonPositionRightstring30pxDistance of launcher icon to the right side of the window
triggerButtonPositionBottomstring40pxDistance of launcher icon to the bottom of the window

Customizing the widget window

Widget window

FieldTypeDefault valueDescription
chatIconstringsms.svgLauncher icon.

Note: Supports SVG, PNG, and JPG, better as SVG. For a round shape, it should have a transparent background.
chatTitlestringTalkdesk ChatTitle for header.
chatTitleIconstringsms.svgThe icon at the left of header.
chatTitleIconWidthstring32pxWidth for the icon at the left of header.
chatTitleIconHeightstring32pxHeight for the icon at the left of header.
chatTitleTextColorstring-Font color for the title of header.
chatSubtitlestringPowered by TalkdeskSubtitle for header.
chatSubtitleTextColorstring# a1acc9Font color for the subtitle of header.
chatCloseButtonColorstring# ffffffColor for the close button.
chatMinimizeButtonColorstring# ffffffColor for the minimize button.
chatContainerWidthstring335pxWidth of the chat box.
chatContainerHeightstring600pxHeight of chat box.
chatPositionBottomstring20pxDistance of chat box to the bottom of the window.
chatThemeColorstring# 1E0044Background color for launcher and header.
chatHoverThemeColorstring# 1A223FColor of the launcher background when hovering.
chatThemeMainFontstringRoboto-Regular, sans-serifFont of the subtitle, input box placeholder, chat messages, and notifications.

Note: It supports web-safe fonts. If you wish to use a non-supported font, we recommend pre-installing the font on your website.

Customizing the initial screen

Welcome message

FieldTypeDefault valueDescription
welcomeMessageBackgroundColorstring# 4D356ABackground color for the welcome message.
welcomeMessageTitleFontFamilystringRoboto-Regular, sans-serifFont for the title of the welcome message
welcomeMessageTitleFontSizestring24pxFont size for the title of the welcome message.
welcomeMessageTitleColorstring# ffffffFont color for the title of the welcome message.
welcomeMessageContentFontFamilystringRoboto-Regular, sans-serifFont for the content of the welcome message.
welcomeMessageContentFontSizestring16pxFont size for the content of the welcome message.
welcomeMessageContentColorstring# ffffffFont color for the content of the welcome message.

Custom message

FieldTypeDefault valueDescription
customMessageNoBubbleFontFamilystringRoboto-Regular, sans-serifFont of the custom message with no bubble.
customMessageNoBubbleFontSizestring14pxFont size of the custom message with no bubble.
customMessageNoBubbleColorstring# 202830Font color of the custom message with no bubble.
customMessageBackgroundColorstring# F2F4F5Background color of the custom message with bubble.
customMessageFontFamilystringRoboto-Regular, sans-serifFont of the custom message with bubble.
customMessageFontSizestring14pxFont size of the custom message with bubble.
customMessageColorstring# 202830Font color of the custom message with bubble.

Custom field

FieldTypeDefault valueDescription
customFieldLabelFontFamilystringRoboto-Regular, sans-serifFont for the label of the custom field.
customFieldLabelFontSizestring14pxFont size for the label of the custom field.
customFieldLabelColorstring# 202830Font color for the label of custom field.
customFieldInputFontFamilystringRoboto-Regular, sans-serifFont for the input text of custom field.
customFieldInputFontSizestring14pxFont size for the input text of custom field.
customFieldInputColorstring# 202830Font color for the input text of custom field.
customFieldInputBackgroundColorstring# ffffffBackground color for custom field.
customFieldInputPlaceholderstringTypePartial placeholder for the custom field.
customFieldPhoneDescriptionstringInclude the country code, avoid spaces and/or symbols (e.g. +1123456789)Phone number input Prompt user description

Note: This item will only be displayed if enableValidation is set to true.
customFieldPhoneInvalidFormatMessagestringplease type a valid phone numberPhone number input Prompt user description

Note: This item will only be displayed if enableValidation is set to true.
customFieldEmailInvalidFormatMessagestringplease type a valid emailPhone number input Prompt user description

Note: This item will only be displayed if enableValidation is set to true.

Custom dropdown

FieldTypeDefault valueDescription
customDropdownLabelFontFamilystringRoboto-Regular, sans-serifFont for the custom dropdown label.
customDropdownLabelFontSizestring14pxFont size for custom dropdown label.
customDropdownLabelColorstring# 202830Font color for custom dropdown label.
customDropdownInputFontFamilystringRoboto-Regular, sans-serifFont for custom dropdown input.
customDropdownInputFontSizestring14pxFont size for custom dropdown input.
customDropdownInputColorstring# 202830Font color for custom dropdown input.
customDropdownInputBackgroundColorstring# ffffffBackground color for custom dropdown.
customDropdownInputPlaceholderstringSelectPlaceholder for custom dropdown.

Custom button

FieldTypeDefault valueDescription
customButtonFontFamilystringRoboto-Regular, sans-serifFont of the label of a custom button.
customButtonFontSizestring14pxFont size of the label of a custom button.
customButtonColorstring# 003FBDFont color for the label of custom button.
customButtonBackgroundColorstring# ffffffBackground color of a custom button.
customButtonBorderColorstring# 003FBDBorder color of a custom button.
customButtonHeightstring32pxHeight of a custom button.

Customizing the conversation

Conversation

FieldTypeDefault valueDescription
userTextColorstring# ffffffFont color of a message sent by a visitor.
userBackgroundColorstring# 5405BDBackground color of a message sent by a visitor.
userAnchorTextColorstring# E1CCFEFont color of an unvisited hyperlink sent by a visitor.
userAnchorTextColorVisitedstring# B681FCFont color of a visited hyperlink sent by a visitor.
userInputHeightstring56pxMinimum height of user message input box.
userInputSeparatorColorstring# DFDFDFColor of the separator above the input box.
chatPlaceholderstringType a message...Placeholder of the input box.
endedChatMessagestringEnd chatSystem message text displayed at the end of conversation.

Bot

FieldTypeDefault valueDescription
botTextColorstring. # 00000.Agent or VA agent message bubble font color
botBackgroundColorstring# F2F4F5Background color of a message sent by an agent or a bot.
botAnchorTextColorstring# 3232D6# 3232D6Font color of an unvisited hyperlink sent by an agent or a bot.
botAnchorTextColorVisitedstring# 5405BD# 5405BDFont color of a visited hyperlink sent by an agent or a bot.
botIconstring-Custom agent avatar.

Note: It overrides all the default agent avatar properties.
botIconHeightstring32pxHeight of the agent avatar.
botIconWidthstring32pxWidth of the agent avatar.
botIconVerticalAlignstringtopPlacement of the agent avatar towards the message bubble. It can be ‘top’ or ‘bottom’.

Avatar

FieldTypeDefault valueDescription
avatarForegroundColorstring# 5C6784Foreground color of the default agent avatar.
avatarBackgroundColorstring# EDF4FCBackground color of the default agent avatar.
avatarBorderColorstring# EDF4FCBorder color of the default agent avatar.

Button

FieldTypeDefault valueDescription
buttonTextColorstring# 005cdeSet the font color of all VA Buttons and buttons in the carousel component
buttonHoverTextColorstring# 005cdeSet the font color of all VA Buttons and buttons in the carousel component when the mouse is moved into it
buttonBackgroundColorstringrgb(237, 244, 252)Set the background color of all VA Buttons and buttons in the carousel component
buttonHoverBackgroundColorstringrgb(237, 244, 252)Set the background color of all VA Buttons and buttons in the carousel component when the mouse is moved into it

Start chat button

FieldTypeDefault valueDescription
startChatButtonTextColorstring# ffffffStart new conversation button font color
startChatButtonHoverTextColorstring# ffffffThe font color of the Start New Conversation button when the mouse is moved into it
startChatButtonBorderColorstring# 1e0044Start new conversation button border color
startChatButtonHoverBorderColorstring# 1e0044The color of the border when the mouse is moved into the Start New Conversation button
startChatButtonBackgroundColorstring# 1e0044Start new conversation button background color
startChatButtonHoverBackgroundColorstring# 1e0044The background color of the Start New Conversation button when the mouse is moved into it
startChatButtonLabelstringStart new chatDisplay copy in Start New Conversation button

Quick reply

FieldTypeDefault valueDescription
replyTextColorstring# 005cdeSet the font color of all VA quick replay buttons
replyHoverTextColorstring# edf4fcSet the font color of all VA quick replay buttons when the mouse is moved into them
replyBorderColorstring# 005cdeSet the border color of all VA quick replay buttons
replyBackgroundColorstringtransparentSet the background color of all VA quick replay buttons

Customizing the close conversation dialog

Dialog

FieldTypeDefault valueDescription
chatConfirmButtonFontFamilystringRoboto-Regular, sans-serifSet the font color of all VA quick replay buttons
chatConfirmButtonFontSizestring14pxSet the font color of all VA quick replay buttons when the mouse is moved into them
chatConfirmButtonFontColorstring# ffffffSet the border color of all VA quick replay buttons
chatConfirmButtonBackgroundColorstring# 3E048BSet the background color of all VA quick replay buttons
chatCancelButtonFontFamilystringRoboto-Regular, sans-serifFont of the cancel button of the dialog box.
chatConfirmButtonEndChatstringYes, end chatLabel of the confirm button of the dialog box when the contact person tries to end the conversation.
chatConfirmButtonRetryEndChatstringTry againLabel of the confirm button of the dialog box when an error occurs while attempting to end the conversation.
chatCancelButtonFontSizestring14pxFont size of the cancel button of the dialog box.
chatCancelButtonFontColorstring# F2F4F5Font color of the cancel button of the dialog box.
chatCancelButtonEndChatstringCancelLabel of the cancel button of the dialog box when the contact person tries to end the conversation.
chatCancelButtonRetryEndChatstringDismissLabel of the cancel button of the dialog box when an error occurs while attempting to end the conversation.

Content Security Policy (CSP)

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything, from data theft to site defacement or malware distribution.

Most customers use CSP to protect their websites from attack, and they will set strict rules for the third-party libs. In order to run the chat widget steadily, we need to provide a whitelist for the customer to avoid being intercepted.

Usually, the CSP tool will detect the src field in the script, frame, or the elements that have the attribute to decide whether to intercept.

CSP Domain Description

Below is the description of the domains in CSP rules. Each domain 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.

CSP DomainsDescription
https://talkdeskchatsdk.talkdeskapp.comTalkDesk Chat Widget JSSDK remote domain
https://api.talkdeskapp.comTalkDesk Gateway domain for US region
https://api.talkdeskapp.euTalkDesk Gateway domain for EU region
https://api.talkdeskappca.comTalkDesk Gateway domain for CA region
https://api.talkdeskapp-pubsec.comTalkDesk Gateway domain for FedRAMP region

Note: The domain is used for the FedRamp, if your website is not supported for FedRamp, you can ignore it.

Chat Widget Scenario Best Practice Cases

1. Manually open chat widget and hidden chat launcher icon
The customer needs to manually open the chat widget, by not hitting the launcher icon. All they need to do is invoke the open method in the API.

Example of the integrated code:

+<button onclick="webchat && webchat.open()">your button</button>
+<a href="javasciprt:void(0)" onclick="webchat && webchat.open()">your link</a>

<!-- Start of Talkdesk Code -->
    <script>
      var webchat;
      (function(window, document, node, props, configs) {
        if (window.TalkdeskChatSDK) {
          console.error("TalkdeskChatSDK already included");
          return;
        }
        var divContainer = document.createElement("div");
        divContainer.id = node;
        document.body.appendChild(divContainer);
        var src = "https://talkdeskchatsdk.talkdeskapp.com/v2/talkdeskchatsdk.js";
        var script = document.createElement("script");
        var firstScriptTag = document.getElementsByTagName("script")[0];
        script.type = "text/javascript";
        script.charset = "UTF-8";
        script.id = "tdwebchatscript";
        script.src = src;
        script.async = true;
        firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
        script.onload = function() {
          webchat = TalkdeskChatSDK(node, props);
          webchat.init(configs);
        };
      })(
        window,
        document,
        "tdWebchat",
        { touchpointId: "<customer touchpointId>", accountId: "", region: "<customer td region>" },
        { 
          enableValidation: false, 
          enableEmoji: true, 
          enableUserInput: true, 
          enableAttachments: true,
+         styles: {
+           // hidden lanuch chat icon
+           triggerButtonPositionBottom: "-65px",
+           triggerButtonPositionRight: "-65px",
+         },
        }
      );
    </script>
<!-- End of Talkdesk Code -->

2. Automatically open chat widget
The customer needs to automatically open TD chat every time the contact person visits the website. The following is the integration code.

Example of the integrated code:

<!-- Start of Talkdesk Code -->
    <script>
      var webchat;
      (function(window, document, node, props, configs) {
        if (window.TalkdeskChatSDK) {
          console.error("TalkdeskChatSDK already included");
          return;
        }
        var divContainer = document.createElement("div");
        divContainer.id = node;
        document.body.appendChild(divContainer);
        var src = "https://talkdeskchatsdk.talkdeskapp.com/v2/talkdeskchatsdk.js";
        var script = document.createElement("script");
        var firstScriptTag = document.getElementsByTagName("script")[0];
        script.type = "text/javascript";
        script.charset = "UTF-8";
        script.id = "tdwebchatscript";
        script.src = src;
        script.async = true;
        firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
        script.onload = function() {
          webchat = TalkdeskChatSDK(node, props);
          webchat.init(configs);
        };
      })(
        window,
        document,
        "tdWebchat",
        { 
          touchpointId: "<customer touchpointId>", 
          accountId: "", 
          region: "<customer td region>", 
+         autoOpen: true
        },
        { enableValidation: false, enableEmoji: true, enableUserInput: true, enableAttachments: true }
      );
    </script>
<!-- End of Talkdesk Code -->

3. Show/hide attachments or emojis
The attachments and emojis are controlled by transmitting the enableAttachments and enableEmoji fields in the configs of snippet code.

Example of the integrated code:

<!-- Start of Talkdesk Code -->
    <script>
      var webchat;
      (function(window, document, node, props, configs) {
        if (window.TalkdeskChatSDK) {
          console.error("TalkdeskChatSDK already included");
          return;
        }
        var divContainer = document.createElement("div");
        divContainer.id = node;
        document.body.appendChild(divContainer);
        var src = "https://talkdeskchatsdk.talkdeskapp.com/v2/talkdeskchatsdk.js";
        var script = document.createElement("script");
        var firstScriptTag = document.getElementsByTagName("script")[0];
        script.type = "text/javascript";
        script.charset = "UTF-8";
        script.id = "tdwebchatscript";
        script.src = src;
        script.async = true;
        firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
        script.onload = function() {
          webchat = TalkdeskChatSDK(node, props);
          webchat.init(configs);
          /*
           * Send custom data from your website to TalkDesk!
           * If you would like to do it, you need to remove the following commented code and
           * modify the webchat.setContextParam parameters to pass in the data you need.
           */
           /*function setContext() {
             webchat.setContextParam({ "var1": "value1", "var2": "value2", "var3": 100 })
           }
           // Send data when the chat conversation is initiated
           webchat.onConversationStart = function() {
             setContext()
           }
           // Send data when the chat widget is open
           webchat.onOpenWebchat = function() {
             setContext()
           }*/
        };
      })(
        window,
        document,
        "tdWebchat",
        { touchpointId: "<customer touchpointId>", accountId: "", region: "<customer td region>" },
        { 
          enableValidation: false,
          enableUserInput: true, 
+         enableEmoji: true,
+         enableAttachments: true
        }
      );
    </script>
<!-- End of Talkdesk Code -->

4. Automatically fullscreen chat widget
If the screen’s width is lower than 600px or the height is lower than 620px, the chat widget will be resized to full-screen while enabling the enableResponsiveLayout, but we’ll not set it to full-screen for the chat widget at any time if enableResponsiveLayout is disabled.

Example of the integrated code:

<!-- Start of Talkdesk Code -->
    <script>
      var webchat;
      (function(window, document, node, props, configs) {
        if (window.TalkdeskChatSDK) {
          console.error("TalkdeskChatSDK already included");
          return;
        }
        var divContainer = document.createElement("div");
        divContainer.id = node;
        document.body.appendChild(divContainer);
        var src = "https://talkdeskchatsdk.talkdeskapp.com/v2/talkdeskchatsdk.js";
        var script = document.createElement("script");
        var firstScriptTag = document.getElementsByTagName("script")[0];
        script.type = "text/javascript";
        script.charset = "UTF-8";
        script.id = "tdwebchatscript";
        script.src = src;
        script.async = true;
        firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
        script.onload = function() {
          webchat = TalkdeskChatSDK(node, props);
          webchat.init(configs);
        };
      })(
        window,
        document,
        "tdWebchat",
        { touchpointId: "<customer touchpointId>", accountId: "", region: "<customer td region>" },
        { 
          enableValidation: false,
          enableEmoji: true,
          enableUserInput: true, 
          enableAttachments: true,
+         enableResponsiveLayout: true
        }
      );
    </script>
<!-- End of Talkdesk Code -->

It may not be good to simply disable the full-screen capability. For example, the automatic full-screen capability is still needed on some mobile devices, but you can not use it on a PC. The following is an example.

Example of the integrated code:

<!-- Start of Talkdesk Code -->
    <script>
      var webchat;
      (function(window, document, node, props, configs) {
        if (window.TalkdeskChatSDK) {
          console.error("TalkdeskChatSDK already included");
          return;
        }
        var divContainer = document.createElement("div");
        divContainer.id = node;
        document.body.appendChild(divContainer);
        var src = "https://talkdeskchatsdk.talkdeskapp.com/v2/talkdeskchatsdk.js";
        var script = document.createElement("script");
        var firstScriptTag = document.getElementsByTagName("script")[0];
        script.type = "text/javascript";
        script.charset = "UTF-8";
        script.id = "tdwebchatscript";
        script.src = src;
        script.async = true;
        firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
        script.onload = function() {
          webchat = TalkdeskChatSDK(node, props);
          webchat.init(configs);
        };
      })(
        window,
        document,
        "tdWebchat",
        { touchpointId: "<customer touchpointId>", accountId: "", region: "<customer td region>" },
        { 
          enableValidation: false,
          enableEmoji: true,
          enableUserInput: true, 
          enableAttachments: true,
+         enableResponsiveLayout: |Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent),
        }
      );
    </script>
<!-- End of Talkdesk Code -->

5. Transmit custom context to studio flow
We can use the setContextParam method to transmit some useful information to the Conversations App. The method will collect the data and then transmit it to Studio flow, Studio will send the data to the Context card in the Conversations App according to the configuration in the Studio context. Here are the steps on how to display the context in the context card of the Conversations App.

Example of the integrated code:

<!-- Start of Talkdesk Code -->
    <script>
      var webchat;
      (function(window, document, node, props, configs) {
        if (window.TalkdeskChatSDK) {
          console.error("TalkdeskChatSDK already included");
          return;
        }
        var divContainer = document.createElement("div");
        divContainer.id = node;
        document.body.appendChild(divContainer);
        var src = "https://talkdeskchatsdk.talkdeskapp.com/v2/talkdeskchatsdk.js";
        var script = document.createElement("script");
        var firstScriptTag = document.getElementsByTagName("script")[0];
        script.type = "text/javascript";
        script.charset = "UTF-8";
        script.id = "tdwebchatscript";
        script.src = src;
        script.async = true;
        firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
        script.onload = function() {
          webchat = TalkdeskChatSDK(node, props);
          webchat.init(configs);       
+         webchat.setContextParam({ 
+           "contact_email": "[email protected]", 
+           "contact_name": "dummy",
+         })
       };
      })(
        window,
        document,
        "tdWebchat",
        { touchpointId: "<customer touchpointId>", accountId: "", region: "<customer td region>" },
        { enableValidation: false, enableEmoji: true, enableUserInput: true, enableAttachments: true }
      );
    </script>
<!-- End of Talkdesk Code -->

Step 1: Add a new argument in the Initial step component in studio flow, you can add the context transmitted by the customer.

Step 2: Select the new context you already created in step 1 and save it.

Step 3: Go to the Conversations App to check the data in the Context card at the right hand of the page.

7. Set default values ​​for the Initial screen

📘

The field name is generated in the channels chat touchpoint initial screen form and can be seen

If default values are set for all fields, chat will automatically skip the initial screen form stage and be automatically passed to the TalkDesk system when the conversation start.

Example of the integrated code

<!-- Start of Talkdesk Code -->
    <script>
      var webchat;
      (function(window, document, node, props, configs) {
        if (window.TalkdeskChatSDK) {
          console.error("TalkdeskChatSDK already included");
          return;
        }
        var divContainer = document.createElement("div");
        divContainer.id = node;
        document.body.appendChild(divContainer);
        var src = "https://talkdeskchatsdk.talkdeskapp.com/v2/talkdeskchatsdk.js";
        var script = document.createElement("script");
        var firstScriptTag = document.getElementsByTagName("script")[0];
        script.type = "text/javascript";
        script.charset = "UTF-8";
        script.id = "tdwebchatscript";
        script.src = src;
        script.async = true;
        firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
        script.onload = function() {
          webchat = TalkdeskChatSDK(node, props);
          webchat.init(configs);       
          /*
           * Send custom data from your website to TalkDesk!
           * If you would like to do it, you need to remove the following commented code and
           * modify the webchat.setContextParam parameters to pass in the data you need.
           */
-          /*function setContext() {
+          function setContext() {
-            webchat.setContextParam({ "var1": "value1", "var2": "value2", "var3": 100 })
+            // Note: Set the default value of the Initial screen form here. If default values ​​are set for all fields, Talkdesk Chat will automatically skip the Initial screen stage and go directly to the conversation ui.
+            webchat.setContextParam({
+              "field_email1": "[email protected]",
+              "field_number1": "+1",
+            })
           }
           // Send data when the chat conversation is initiated
           webchat.onConversationStart = function() {
             setContext()
           }
           // Send data when the chat widget is open
           webchat.onOpenWebchat = function() {
             setContext()
-          }*/
+          }
        };
      })(
        window,
        document,
        "tdWebchat",
        { touchpointId: "<customer touchpointId>", accountId: "", region: "<customer td region>" },
        { enableValidation: false, enableEmoji: true, enableUserInput: true, enableAttachments: true }
      );
    </script>
<!-- End of Talkdesk Code -->

8. Support internationalization and layout

The chat widget allows for multi-language support by configuring the languageCode field. By setting this field, customers can specify the language of the chat interface using standard international language codes. For instance: en-US for English (United States), pt-PT for Portuguese (Portugal).

The default layout direction of the chat widget is Left-to-Right (LTR). It is not necessary to manually set this value for LTR languages, as it is automatically configured based on the language code provided.

For languages that require a Right-to-Left (RTL) layout, such as Arabic, the layout direction is also set automatically. When a language code corresponding to an RTL language is specified (e.g., sa-AR or eg-AR), the chat widget will adjust its layout direction accordingly, providing a seamless user experience for RTL language speakers.

📘

When the languageCode field is set to empty, it will automatically set the browser's language.

If automatic identification or pass-through configuration parameters are not supported, it will be fall back to en-US

<!-- Start of Talkdesk Code -->
    <script>
      var webchat;
      (function(window, document, node, props, configs) {
        if (window.TalkdeskChatSDK) {
          console.error("TalkdeskChatSDK already included");
          return;
        }
        var divContainer = document.createElement("div");
        divContainer.id = node;
        document.body.appendChild(divContainer);
        var src = "https://talkdeskchatsdk.talkdeskapp.com/v2/talkdeskchatsdk.js";
        var script = document.createElement("script");
        var firstScriptTag = document.getElementsByTagName("script")[0];
        script.type = "text/javascript";
        script.charset = "UTF-8";
        script.id = "tdwebchatscript";
        script.src = src;
        script.async = true;
        firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
        script.onload = function() {
          webchat = TalkdeskChatSDK(node, props);
          webchat.init(configs);
        };
      })(
        window,
        document,
        "tdWebchat",
        { touchpointId: "<customer touchpointId>", accountId: "", region: "<customer td region>" },
        { 
          enableValidation: false,
          enableEmoji: true,
          enableUserInput: true, 
          enableAttachments: true,
+         languageCode: "pt-PT", // Notes support the languageCodes: en-US pt-PT pt-BR es-ES de-DE fr-FR it-IT sa-AR eg-AR
        }
      );
    </script>
<!-- End of Talkdesk Code -->

9. Drag and move chat launcher

The "Drag and Move Chat Launcher" feature enhances the user experience by addressing the need for flexibility and unobstructed access to application information on PC and mobile devices. The ability to move the chat widget, especially within the mobile application for the following reasons:

Customizable Positioning: Users want the flexibility to reposition the chat launcher to a location on their screen that best suits their preferences and usage patterns. This ensures that the chat widget does not interfere with the personal viewing experience.

Unobstructed Access: The current fixed position of the chat widget has been reported to block important application information, which can hinder the user experience by obscuring critical content. Allowing users to move the chat widget ensures that all essential information remains visible and accessible, improving overall usability and satisfaction.

📘

The enablePointMoveTriggerButton is used to turn on the drag and move of the chat launcher, and the value of this field is false by default.

Example of the integrated code:

<!-- Start of Talkdesk Code -->
    <script>
      var webchat;
      (function(window, document, node, props, configs) {
        if (window.TalkdeskChatSDK) {
          console.error("TalkdeskChatSDK already included");
          return;
        }
        var divContainer = document.createElement("div");
        divContainer.id = node;
        document.body.appendChild(divContainer);
        var src = "https://talkdeskchatsdk.talkdeskapp.com/v2/talkdeskchatsdk.js";
        var script = document.createElement("script");
        var firstScriptTag = document.getElementsByTagName("script")[0];
        script.type = "text/javascript";
        script.charset = "UTF-8";
        script.id = "tdwebchatscript";
        script.src = src;
        script.async = true;
        firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
        script.onload = function() {
          webchat = TalkdeskChatSDK(node, props);
          webchat.init(configs);
        };
      })(
        window,
        document,
        "tdWebchat",
        { touchpointId: "<customer touchpointId>", accountId: "", region: "<customer td region>" },
        { 
          enableValidation: false,
          enableEmoji: true,
          enableUserInput: true, 
+         enablePointMoveTriggerButton: true
        }
      );
    </script>
<!-- End of Talkdesk Code -->

If you only wish to drag and move the chat launcher on mobile, you can specify the value of this field. The following is an example of the integrated code:

<!-- Start of Talkdesk Code -->
    <script>
      var webchat;
      (function(window, document, node, props, configs) {
        if (window.TalkdeskChatSDK) {
          console.error("TalkdeskChatSDK already included");
          return;
        }
        var divContainer = document.createElement("div");
        divContainer.id = node;
        document.body.appendChild(divContainer);
        var src = "https://talkdeskchatsdk.talkdeskapp.com/v2/talkdeskchatsdk.js";
        var script = document.createElement("script");
        var firstScriptTag = document.getElementsByTagName("script")[0];
        script.type = "text/javascript";
        script.charset = "UTF-8";
        script.id = "tdwebchatscript";
        script.src = src;
        script.async = true;
        firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
        script.onload = function() {
          webchat = TalkdeskChatSDK(node, props);
          webchat.init(configs);
        };
      })(
        window,
        document,
        "tdWebchat",
        { touchpointId: "<customer touchpointId>", accountId: "", region: "<customer td region>" },
        { 
          enableValidation: false,
          enableEmoji: true,
          enableUserInput: true, 
+         enablePointMoveTriggerButton: |Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent)
        }
      );
    </script>
<!-- End of Talkdesk Code -->