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
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:
Key |
Value (example) |
avatarBackgroundColor |
"#edf4fc" |
avatarBorderColor |
"#edf4fc" |
avatarForegroundColor |
"#edf4fc" |
botAnchorTextColor |
"#a661ff" |
botAnchorTextColorVisited |
"#d3b3fd", |
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" |
chatHoverThemeColor |
"#172241" |
chatIcon |
"https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/product/app-icons/sms.svg" |
chatPlaceholder |
"Type a message..." |
chatSubtitle |
"Talkdesk Chat" |
chatSubtitleTextColor |
"#ffffff" |
chatThemeColor |
"#1e0044" |
chatTitle |
"Talkdesk Chat" |
chatTitleIcon |
"https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/product/app-icons/sms.svg" |
chatTitleTextColor |
"#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 | "#D6BFD4" |
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" |
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"
}