How can we help?

Talkdesk’s Chat Channel allows you to customize your chat widget to better suit your brand. Please follow the steps in this guide to insert the appropriate codes.

• Widget Codes
• Keys and Values
• Changing the Snippet Code
• Example of the Added Styling Code Format

Widget Codes

In the image below, you can see the corresponding code that can be used to configure each component on the widget. You can change the color, text, and images.

Keys and Values

For each possible configurable key, the table below features an example of the expected value:

Changing the Snippet Code

You need to add the configuration inside the generated code snippet in order to change the styling.

In the image displayed above, you can see an example [1] of where to add the color configuration in the snippet. In this example, it should be added following “enableUserInput: true” and prior to “}”.

Example of the Added Styling Code Format

, styles: {

"botAnchorTextColor": "#a661ff",

"botAnchorTextColorVisited": "#d3b3fd",

"avatarBackgroundColor": "#edf4fc",

"avatarForegroundColor": "#edf4fc",

"avatarBorderColor": "#edf4fc",

"botBackgroundColor": "#f2f4f5",

"botIcon": "https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/product/app-icons/sms.svg",

"botTextColor": "#000000",

"buttonBackgroundColor": "#edf4fc",

"buttonHoverBackgroundColor": "#edf4fc",

"buttonTextColor": "#005cde",

"carouselTextColor": "#475059",

"chatIcon": "https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/product/app-icons/sms.svg",

"chatThemeColor": "#1e0044",

"chatHoverThemeColor": "#172241",

"chatPlaceholder": "Type a message...",

"chatTitle": "Talkdesk Chat",

"chatTitleTextColor": "#ffffff",

"chatTitleIcon": "https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/product/app-icons/sms.svg",

"chatSubtitle": "Talkdesk Chat",

"chatSubtitleTextColor": "#ffffff",

"replyBackgroundColor": "transparent",

"replyBorderColor": "#005cde",

"replyHoverTextColor": "#edf4fc",

"replyTextColor": "#005cde",

"userAnchorTextColor": "#ffc5fe",

"userAnchorTextColorVisited": "#d3b3fd",

"userBackgroundColor": "#5405bd",

"userTextColor": "#ffffff"

"welcomeMessageBackgroundColor": "#A577A1",
"welcomeMessageTitleFontSize": "30px",
"welcomeMessageTitleFontFamily": "Roboto",
"welcomeMessageTitleColor": "#5F0F57",
"welcomeMessageContentFontSize": "15px",
"welcomeMessageContentFontFamily": "Roboto",
"customMessageFontSize": "10px",
"customMessageColor": "#940487",
"customMessageFontFamily": "Roboto",
"customMessageBackgroundColor": "#D6BFD4",
"customMessageNoBubbleFontSize": "10px",
"customMessageNoBubbleColor": "#D6BFD4",
"customMessageNoBubbleFontFamily": "Roboto",
"customButtonFontSize": "10px",
"customButtonFontFamily": "Roboto",
"customButtonColor": "#5F0F57",
"customButtonBackgroundColor": "#FFFFFF",
"customButtonBorderColor": "#5F0F57",
"botIcon": "https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/product/app-icons/sms.svg",
"customFieldLabelFontSize":"12px",
"customFieldLabelFontFamily": "Roboto",
"customFieldLabelColor": "#000000",
"customFieldInputFontSize":"10px",
"customFieldInputFontFamily": "Roboto",
"customFieldInputColor":"#000000",
"customFieldInputBackgroundColor": "#FFFFFF",
"customFieldInputPlaceholder":"Type",
"customDropdownLabelFontSize": "12px",
"customDropdownLabelFontFamily": "Roboto",
"customDropdownLabelColor": "#000000",
"customDropdownInputFontSize": "10px",
"customDropdownInputFontFamily": "Roboto",
"customDropdownInputColor": "#000000",
"customDropdownInputBackgroundColor": "#FFFFFF",
"customDropdownInputPlaceholder": "Select"

}