Talkdesk Digital Engagement: Personalizar el Widget del Chat Channel

El canal del chat de Talkdesk le permite personalizar el widget del chat para que se adapte mejor a su marca. Siga los pasos de esta guía para introducir los códigos correspondientes.

 

Widget Codes

Chat_Widget_Customization_Labels.jpg

En la siguiente imagen se puede ver el código correspondiente que se puede utilizar para configurar cada componente del widget. Puede cambiar el color, el texto y las imágenes.

 

Claves y Valores

Screen_Shot_2022-02-18_at_11.02.55_AM.png

Para cada una de las posibles claves configurables, la siguiente tabla presenta un ejemplo del valor esperado:

Clave

Valor (ejemplo)

avatarBackgroundColor

"#edf4fc"

avatarBorderColor

"#edf4fc"

avatarForegroundColor

"#edf4fc"

botAnchorTextColor

"#a661ff"

botAnchorTextColorVisited

"#d3b3fd",

botBackgroundColor

"#f2f4f5"

botIcon

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

botTextColor

"#000000"

buttonBackgroundColor

"#edf4fc"

buttonHoverBackgroundColor

"#edf4fc"

buttonTextColor

"#005cde"

carouselTextColor

"#475059"

chatHoverThemeColor

"#172241"

chatTitleIcon

"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://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"

 

Cambiar el código del snippet

Hay que añadir la configuración dentro del snippet de código generado para cambiar el estilo.

image1.png

En la imagen que se muestra arriba, puede ver un ejemplo [1] de dónde añadir la configuración del color en el snippet. En este ejemplo se tiene que añadir después de "enableUserInput: true" y antes de "}".

 

Ejemplo del formato de código de estilo añadido

, styles: {

"botAnchorTextColor": "#a661ff",

"botAnchorTextColorVisited": "#d3b3fd",

"avatarBackgroundColor": "#edf4fc",

"avatarForegroundColor": "#edf4fc",

"avatarBorderColor": "#edf4fc",

"botBackgroundColor": "#f2f4f5",

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

"botTextColor": "#000000",

"buttonBackgroundColor": "#edf4fc",

"buttonHoverBackgroundColor": "#edf4fc",

"buttonTextColor": "#005cde",

"carouselTextColor": "#475059",

"chatIcon": "https://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"

}



Volver ""
Por favor, inicie sesión para enviar una solicitud.