How can we help?

Talkdesk Digital Engagement: Customizing your Chat Channel's Widget

Follow

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

Chat_Widget_Customization_Labels.jpg

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

Screen_Shot_2022-02-18_at_11.02.55_AM.png

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.

image1.png

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"

}



All Articles ""
Please sign in to submit a request.