Talkdesk Digital Engagement: Chat Widget for Administrators

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.

Screenshot_2023-03-21_at_14.11.51.png

 

Configuration

Access the widget code and locate the following line:

{ enableValidation: false, enableEmoji: true, enableUserInput: true, enableAttachments: true }

Add the styles declaration with the customization keys and its values after:

  • enableAttachments: true

And before:

  • }

 

Configuration Example

{ enableValidation: false,
enableEmoji: true,
enableUserInput: true,
enableAttachments: true,
styles: {
'chatThemeColor': '#1E0044',
'chatTitle': 'Talkdesk Chat',
'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 Autopilot Components

These are the customization keys that can be used to customize the widget when integrated with Autopilot.

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' 

 

 

Additional Parameters

Format validation for contact fields

Using parameters available in the widget code, it is also possible to enable/disable some functionalities of the chat widget:

additional par.png

In the widget code, locate the line:

{ enableValidation: false, enableEmoji: true, enableUserInput: true, enableAttachments: true }

If you would like to enable the format validation for the phone number and/or email address fields, set the enableValidation parameter to true:

enableValidation: true
Key Description Default value
customFieldPhoneDescription Phone number field’s format hint. 'Include the country code, avoid spaces and/or symbols (e.g. +1123456789).'
customFieldPhoneInvalidFormatMessage Phone number field’s wrong format error message. 'Please type a valid phone number'
customFieldEmailInvalidFormatMessage Email address  field’s wrong format error message. 'Please type a valid email'

Note: We highly recommend refraining from modifying the intent and context of the default message, as doing so could potentially compromise the user's experience and even run afoul of compliance regulations.

 

Emoji and Attachment Buttons

Using parameters available in the widget code, it is also possible to enable/disable some functionalities of the chat widget:

additional par 2.png

In the widget code, locate the line:

{ enableValidation: false, 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 parameter 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 parameter 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.

 

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