Talkdesk Digital Engagement allows you to customize your chat widget to better suit your brand’s image and needs. To do so, please follow the steps in this guide.
Configuration
Access the widget code and locate the following line:
-
{ enableEmoji: true, enableUserInput: true, enableAttachments: true }
Add the styles declaration with the customization keys and its values after:
-
enableAttachments: true
And before:
-
}
Configuration Example
{ enableEmoji: true, enableUserInput: true, enableAttachments: true, styles: {
'chatThemeColor': '#1E0044',
'chatPlaceholder': 'Type a message...',
'avatarForegroundColor': '#5C6784',
'avatarBackgroundColor': '#EDF4FC',
'userBackgroundColor': '#5405BD',
'startChatButtonTextColor': '#FFFFFF',
'startChatButtonBackgroundColor': '#1E0044'
}
}
At the bottom of this guide, you will find a downloadable file with an example of the code snippet, with all existing keys.
Customization Keys
Customizing the Widget Launcher
The table below features the customization keys that can be used to tailor the widget launcher to your needs.
| Key | Description | Default value |
|
chatThemeColor |
Color of the launcher background and the header. | '#1E0044' |
| chatHoverThemeColor | Color of the launcher background and the header. | '#1A223F'' |
| chatIcon |
The icon of the launcher. Note: Best format: SVG, although it supports other formats such as PNG and JPG. For a round shape, it should have a transparent background. |
'https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/product/app-icons/sms.svg' |
| triggerButtonHeight |
Height of the icon of the launcher. Note: It won’t exceed the launcher’s size and, therefore, its maximum value is of 64 px. |
'35px' |
| triggerButtonWidth |
Width of the icon of the launcher. Note: It won’t exceed the launcher’s size and, therefore, its maximum value is of 64 px. |
'35px' |
| triggerButtonPositionRight | Distance of the launcher to the right side of the window. | null |
| triggerButtonPositionBottom | Distance of the launcher to the bottom of the window. | null |
Customizing the Widget Header
The table below features the customization keys that can be used to tailor the widget header to your needs.
| Key | Description | Default value |
| chatTitleIcon | The icon of the header. | 'https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/product/app-icons/sms.svg' |
| chatTitleIconHeight | Height of the icon of the header. | null |
| chatTitleIconWidth | Width of the icon of the header. | null |
| chatThemeColor | Color of the launcher background and the header. | '#1E0044' |
| chatTitle | Title of the header. | 'Talkdesk Chat' |
| chatTitleTextColor | Font color of the title of the header. | null |
| chatSubtitle | Subtitle of the header. | 'Powered by Talkdesk' |
| chatSubtitleTextColor | Font color of the subtitle of the header. | null |
| chatCloseButtonColor | Color of the close chat conversation button. | '#FFFFFF' |
| chatMinimizeButtonColor | Color of the minimize widget button. | '#FFFFFF' |
Customizing the Widget Window
The table below features the customization keys that can be used to tailor the widget window to your needs.:
| Key | Description | Default value |
| chatContainerWidth | Width of the widget window. | null |
| chatContainerHeight | Height of the widget window. | null |
| chatPositionBottom | Distance of the widget window to the bottom of the window. | null |
Other
| Key | Description | Default value |
| chatThemeMainFont |
Font 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. |
'Roboto-Regular' |
Customizing the Initial Screen
The table below features the customization keys that can be used to tailor the widget's initial screen to your needs.:
| Key | Description | Default value |
| welcomeMessageBackgroundColor | Background color of the welcome message. | '#4D356A' |
| welcomeMessageTitleFontFamily | Font of the title of the welcome message. | 'Roboto-Regular' |
| welcomeMessageTitleFontSize | Font size of the title of the welcome message. | '24px' |
| welcomeMessageTitleColor | Font color of the title of the welcome message. | '#FFFFFF' |
| welcomeMessageContentFontFamily | Font of the content of the welcome message. | 'Roboto-Regular' |
| welcomeMessageContentFontSize | Font size of the content of the welcome message. | '16px' |
| welcomeMessageContentColor | Font color of the content of the welcome message. | '#FFFFFF' |
| customMessageNoBubbleFontFamily | Font of the custom message with no bubble. | 'Roboto-Regular' |
| customMessageNoBubbleFontSize | Font size of the custom message with no bubble. | '14px' |
| customMessageNoBubbleColor | Font color of the custom message with no bubble. | '#202830' |
| customMessageBackgroundColor | Background color of the custom message with bubble. | '#F2F4F5' |
| customMessageFontFamily | Font of the custom message with bubble. | 'Roboto-Regular' |
| customMessageFontSize | Font size of the custom message with bubble. | '14px' |
| customMessageColor | Font color of the custom message with bubble. | '#202830' |
| customFieldLabelFontFamily | Font of the label of a custom field. | 'Roboto-Regular' |
| customFieldLabelFontSize | Font size of the label of a custom field. | '14px' |
| customFieldLabelColor | Font color of the label of a custom field. | '#202830' |
customFieldInputFontFamily |
Font of the input text of a custom field. | 'Roboto-Regular' |
| customFieldInputFontSize | Font size of the input text of a custom field. | null |
| customFieldInputColor | Font color of the input text of a custom field. | '#202830' |
| customFieldInputBackgroundColor | Background color of a custom field. | '#FFFFFF' |
| customFieldInputPlaceholder | Partial placeholder of a custom field. | 'Type' |
| customDropdownLabelFontFamily | Font of the label of a custom dropdown. | 'Roboto-Regular' |
| customDropdownLabelFontSize | Font size of the label of a custom dropdown. | '14px' |
| customDropdownLabelColor | Font color of the label of a custom dropdown. | '#202830' |
| customDropdownInputFontFamily | Font of the input text of a custom dropdown. | 'Roboto-Regular' |
| customDropdownInputFontSize | Font size of the input text of a custom dropdown. | '14px' |
| customDropdownInputColor | Font color of the input text of a custom dropdown. | '#202830' |
| customDropdownInputBackgroundColor | Background color of a custom dropdown. | '#FFFFFF' |
| customDropdownInputPlaceholder | Partial placeholder of a custom dropdown. | 'Select' |
| customButtonFontFamily | Font of the label of a custom button. | 'Roboto-Regular' |
| customButtonFontSize | Font size of the label of a custom button. | '14px' |
| customButtonColor | Font color of the label of a custom button. | '#003FBD' |
| customButtonBackgroundColor | Background color of a custom button. | '#FFFFFF' |
| customButtonBorderColor | Border color of a custom button. | '#003FBD' |
| customButtonHeight | Height of a custom button. | '32px' |
Customizing the Chat Screen
The table below features the customization keys that can be used to tailor the widget chat screen to your needs.
| Key | Description | Default value |
| userTextColor | Font color of a message sent by a visitor. | '#FFFFFF' |
| userBackgroundColor | Background color of a message sent by a visitor. | '#5405BD' |
| botTextColor | Font color of a message sent by an agent or a bot. | '#000000' |
| botBackgroundColor | Background color of a message sent by an agent or a bot. | '#F2F4F5' |
| userAnchorTextColor | Font color of an unvisited hyperlink sent by a visitor. | '#E1CCFE' |
| userAnchorTextColorVisited | Font color of a visited hyperlink sent by a visitor. | '#B681FC' |
| botAnchorTextColor | Font color of an unvisited hyperlink sent by an agent or a bot. | '#3232D6' |
| botAnchorTextColorVisited | Font color of a visited hyperlink sent by an agent or a bot. | '#5405BD' |
| botIconVerticalAlign | Placement of the agent avatar towards the message bubble. It can be ‘top’ or ‘bottom’. | 'top' |
| avatarForegroundColor | Foreground color of the default agent avatar. | '#5C6784' |
| avatarBackgroundColor | Background color of the default agent avatar. | '#EDF4FC' |
| avatarBorderColor | Border color of the default agent avatar. | '#EDF4FC' |
| botIconHeight | Height of the agent avatar. | '32px' |
| botIconWidth | Height of the agent avatar. | '32px' |
| botIcon |
Custom agent avatar. Note: It overrides all the default agent avatar properties. |
null |
| userInputSeparatorColor | Color of the separator above the input box. | '#DFDFDF' |
| userInputHeight | Height of the input box. | '56px' |
| chatPlaceholder | Placeholder of the input box. | 'Type a message...' |
Customizing the Dialog Boxes
The table below features the customization keys that can be used to tailor the widget dialog boxes to your needs.
| Key | Description | Default value |
| chatDialogBoxIconColor | Color of the icon of the dialog box. | '#AEB3B8' |
| chatDialogBoxFontFamily | Font of the message of the dialog box. | 'Roboto-Regular' |
| chatDialogBoxFontSize | Font size of the message of the dialog box. | '16px' |
| chatDialogBoxFontColor | Font color of the message of the dialog box. | '#202830' |
| chatConfirmButtonFontFamily | Font of the confirm button of the dialog box. | 'Roboto-Regular' |
| chatConfirmButtonFontSize | Font size of the confirm button of the dialog box. | '14px' |
| chatConfirmButtonFontColor | Font color of the confirm button of the dialog box. | '#FFFFFF' |
| chatConfirmButtonBackgroundColor | Background color of the confirm button of the dialog box. | '#3E048B' |
| chatCancelButtonFontFamily | Font of the cancel button of the dialog box. | 'Roboto-Regular' |
| chatCancelButtonFontSize | Font size of the cancel button of the dialog box. | '14px' |
| chatCancelButtonFontColor | Font color of the cancel button of the dialog box. | '#F2F4F5' |
| chatDialogBoxEndChat | Message of the dialog box when the contact person tries to end the conversation. | 'Are you sure you want to end this chat?' |
| chatConfirmButtonEndChat | Label of the confirm button of the dialog box when the contact person tries to end the conversation. | 'Yes, end chat' |
| chatCancelButtonEndChat | Label of the cancel button of the dialog box when the contact person tries to end the conversation. | 'Cancel' |
| chatDialogBoxRetryEndChat | Message of the dialog box when an error occurs while attempting to end the conversation. | 'There was an error while ending the chat.' |
| chatConfirmButtonRetryEndChat | Label of the confirm button of the dialog box when an error occurs while attempting to end the conversation. | 'Try again' |
| chatCancelButtonRetryEndChat | Label of the cancel button of the dialog box when an error occurs while attempting to end the conversation. | 'Dismiss' |
Customizing the Ended Chat Screen
These are the customization keys that can be used to customize the widget ended chat screen.
| Key | Description | Default value |
| endedChatMessage | Text of the ended chat message. | 'This chat has ended' |
| startChatButtonTextColor | Font color of the label of the start chat button. | '#FFFFFF' |
| startChatButtonBackgroundColor | Background color of the start chat button. | '#1E0044' |
| startChatButtonBorderColor | Border color of the start chat button. | '#1E0044' |
| startChatButtonHoverTextColor | Font color of the label of the start chat button when hovered. | '#FFFFFF' |
| startChatButtonHoverBackgroundColor | Background color of the start chat button when hovered. | '#1E0044' |
| startChatButtonHoverBorderColor | Border color of the start chat button when hovered. | '#1E0044' |
| startChatButtonLabel | Label of the start chat button. | 'Start new chat' |
Customizing the Virtual Agent Components
These are the customization keys that can be used to customize the widget when integrated with Virtual Agent.
| Key | Description | Default value |
| carouselTextColor | Font color of the carousel card. | '#475059' |
| buttonTextColor | Font color of the card’s button. | '#005CDE' |
| buttonBackgroundColor | Background color of the card’s button. | '#EDF4FC' |
| buttonHoverBackgroundColor | Background color of the card’s button when hovered. | '#EDF4FC' |
| replyTextColor | Font color of the quick reply button. | '#005CDE' |
| replyBackgroundColor | Background color of the quick reply button. | 'transparent' |
| replyBorderColor | Border color of the quick reply button. | '#005CDE' |
| replyHoverTextColor | Font color of the quick reply button when hovered. | '#EDF4FC' |
Hide/Show Buttons
Using functions available in the widget code, it is also possible to hide/show some functionalities of the chat widget:
In the widget code, locate the line:
- { enableEmoji: true, enableUserInput: true, enableAttachments: true (...)
If you would like to prevent visitors from sending emojis, you can disable the emojis button in the chat widget by setting the "enableEmoji" function to "false":
- enableEmoji: false
If you would like to prevent visitors from sending attachments, you can disable the attachments button in the chat widget by setting the "enableAttachments" function to "false":
- enableAttachments: false
Important Tip
Keys to customize font families support web-safe fonts. If you wish to use a non-supported font, we recommend pre-installing the font on your website.
Here is a list of some of the most common web-safe fonts for Windows and MacOS:
-
Arial, Helvetica, Sans-Serif
-
Arial Black, Gadget, Sans-Serif
-
Comic Sans MS, Textile, Cursive
-
Courier New, Courier, Monospace
-
Georgia, Times New Roman, Times, Serif
-
Impact, Charcoal, Sans-Serif
-
Lucida Console, Monaco, Monospace
-
Lucida Sans Unicode, Lucida Grande, Sans-Serif
-
Palatino Linotype, Book Antiqua, Palatino, Serif
-
Tahoma, Geneva, Sans-Serif
-
Times New Roman, Times, Serif
-
Trebuchet MS, Helvetica, Sans-Serif
-
Verdana, Geneva, Sans-Serif
-
MS Sans Serif, Geneva, Sans-Serif
-
MS Serif, New York, Serif
Example of the Code Snippet
Click the hyperlink below to download a PDF with an example of the code snippet with all existing keys.