Talkdesk Digital Engagement le permite personalizar su widget de chat para que se adapte mejor a la imagen y las necesidades de su marca. Para ello, siga los pasos de esta guía.
Configuración
Acceda al código del widget y localice la siguiente línea:
- { enableEmoji: true, enableUserInput: true }
Añada después la declaración de estilos con las teclas de personalización y sus valores:
- enableUserInput: true
Y antes:
- }
Ejemplo de Configuración
{ enableEmoji: true, enableUserInput: true, styles: {
'chatThemeColor': '#1E0044',
'chatTitle': 'Talkdesk Chat',
'chatPlaceholder': 'Type a message...',
'avatarForegroundColor': '#5C6784',
'avatarBackgroundColor': '#EDF4FC',
'userBackgroundColor': '#5405BD',
'startChatButtonTextColor': '#FFFFFF',
'startChatButtonBackgroundColor': '#1E0044'
}
}
Al final de esta guía encontrará un PDF descargable con un ejemplo del fragmento de código con todas las teclas existentes.
Teclas de Personalización
Personalización del Widget Launcher
La siguiente tabla muestra las teclas de personalización que se pueden utilizar para adaptar el ejecutor del widget a sus necesidades.
| Teclas | Descripción | Valor por defecto |
| chatThemeColor | Color del fondo del ejecutor y de la cabecera. | '#1E0044' |
| chatHoverThemeColor | Color del fondo del ejecutor y del encabezado. | '#1A223F'' |
| chatIcon |
El icono del ejecutor. Nota: El SVG es el mejor formato, pero se admiten otros formatos como PNG y JPG. Para una forma redonda, debe tener un fondo transparente. |
'https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/product/app-icons/sms.svg' |
| triggerButtonHeight | Altura del icono del ejecutor. | '35px' |
| triggerButtonWidth | Ancho del icono del ejecutor. | '35px' |
| triggerButtonPositionRight | Distancia del ejecutor al lado derecho de la ventana. | null |
| triggerButtonPositionBottom | Distancia del ejecutor hacia la parte inferior de la ventana. | null |
Personalización del Widget Header
La siguiente tabla muestra las teclas de personalización que se pueden utilizar para adaptar el encabezado del widget a sus necesidades.
| Teclas | Descripción | Valor por defecto |
| chatTitleIcon | El icono del encabezado. | 'https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/product/app-icons/sms.svg' |
| chatTitleIconHeight | Altura del icono del encabezado. | null |
| chatTitleIconWidth | Ancho del icono del encabezado. | null |
| chatThemeColor | Color del fondo del ejecutor y del encabezado. | '#1E0044' |
| chatTitle | Título del encabezado. | 'Talkdesk Chat' |
| chatTitleTextColor | Color de la fuente del título del encabezado. | null |
| chatSubtitle | Subtítulo del encabezado. | 'Powered by Talkdesk' |
| chatSubtitleTextColor | Color de la fuente del subtítulo del encabezado. | null |
| chatCloseButtonColor | Color del botón de cerrar conversación del chat. | '#FFFFFF' |
| chatMinimizeButtonColor | Color del botón de minimizar del widget. | '#FFFFFF' |
Personalización de la Widget Window
La siguiente tabla muestra las teclas de personalización que se pueden utilizar para adaptar la ventana del widget a sus necesidades.:
| Teclas | Descripción | Valor por defecto |
| chatContainerWidth | Ancho de la ventana del widget. | null |
| chatContainerHeight | Altura de la ventana del widget. | null |
| chatPositionBottom | Distancia de la ventana del widget a la parte inferior de la ventana. | null |
Otro
| chatThemeMainFont |
Fuente del subtítulo, del marcador de entrada, de los mensajes de chat y de las notificaciones. Nota: La fuente debe ser estándar o instalarse manualmente. |
'Roboto-Regular' |
Personalización de la Initial Screen
La siguiente tabla muestra las teclas de personalización que se pueden utilizar para adaptar la pantalla inicial del widget a sus necesidades.:
| Teclas | Descripción | Valor por defecto |
| welcomeMessageBackgroundColor | Color de fondo del mensaje de bienvenida. | '#4D356A' |
| welcomeMessageTitleFontFamily | Fuente del título del mensaje de bienvenida. | 'Roboto-Regular' |
| welcomeMessageTitleFontSize | Tamaño de la fuente del título del mensaje de bienvenida. | '24px' |
| welcomeMessageTitleColor | Color de la fuente del título del mensaje de bienvenida. | '#FFFFFF' |
| welcomeMessageContentFontFamily | Fuente del contenido del mensaje de bienvenida. | 'Roboto-Regular' |
| welcomeMessageContentFontSize | Tamaño de la fuente del contenido del mensaje de bienvenida. | '16px' |
| welcomeMessageContentColor | Color de la fuente del contenido del mensaje de bienvenida. | '#FFFFFF' |
| customMessageNoBubbleFontFamily | Fuente del mensaje personalizado sin burbuja. | 'Roboto-Regular' |
| customMessageNoBubbleFontSize | Tamaño de la fuente del mensaje personalizado sin burbuja. | '14px' |
| customMessageNoBubbleColor | Color de la fuente del mensaje personalizado sin burbuja. | '#202830' |
| customMessageBackgroundColor | Color de fondo del mensaje personalizado con burbuja. | '#F2F4F5' |
| customMessageFontFamily | Fuente del mensaje personalizado con burbuja. | 'Roboto-Regular' |
| customMessageFontSize | Tamaño de la fuente del mensaje personalizado con burbuja. | '14px' |
| customMessageColor | Color de la fuente del mensaje personalizado con burbuja. | '#202830' |
| customFieldLabelFontFamily | Fuente de la etiqueta de un campo personalizado. | 'Roboto-Regular' |
| customFieldLabelFontSize | Tamaño de la fuente de la etiqueta de un campo personalizado. | '14px' |
| customFieldLabelColor | Color de la fuente de la etiqueta de un campo personalizado. | '#202830' |
customFieldInputFontFamily |
Fuente del texto de entrada de un campo personalizado. | 'Roboto-Regular' |
| customFieldInputFontSize | Tamaño de la fuente del texto de entrada de un campo personalizado. | null |
| customFieldInputColor | Color de la fuente del texto de entrada de un campo personalizado. | '#202830' |
| customFieldInputBackgroundColor | Color de fondo de un campo personalizado. | '#FFFFFF' |
| customFieldInputPlaceholder | Marcador de posición parcial de un campo personalizado. | 'Type' |
| customDropdownLabelFontFamily | Fuente de la etiqueta de un desplegable personalizado. | 'Roboto-Regular' |
| customDropdownLabelFontSize | Tamaño de la fuente de la etiqueta de un desplegable personalizado. | '14px' |
| customDropdownLabelColor | Color de la fuente de la etiqueta de un desplegable personalizado. | '#202830' |
| customDropdownInputFontFamily | Fuente del texto de entrada de un desplegable personalizado. | 'Roboto-Regular' |
| customDropdownInputFontSize | Tamaño de la fuente del texto de entrada de un desplegable personalizado. | '14px' |
| customDropdownInputColor | Color de la fuente del texto de entrada de un desplegable personalizado. | '#202830' |
| customDropdownInputBackgroundColor | Color de fondo de un desplegable personalizado. | '#FFFFFF' |
| customDropdownInputPlaceholder | Marcador de posición parcial de un desplegable personalizado. | 'Select' |
| customButtonFontFamily | Fuente de la etiqueta de un botón personalizado. | 'Roboto-Regular' |
| customButtonFontSize | Tamaño de la fuente de la etiqueta de un botón personalizado. | '14px' |
| customButtonColor | Color de la fuente de la etiqueta de un botón personalizado. | '#003FBD' |
| customButtonBackgroundColor | Color de fondo de un botón personalizado. | '#FFFFFF' |
| customButtonBorderColor | Color del borde de un botón personalizado. | '#003FBD' |
| customButtonHeight | Altura de un botón personalizado. | '32px' |
Personalización de la Chat Screen
La siguiente tabla muestra las teclas de personalización que se pueden utilizar para adaptar la pantalla de chat del widget a sus necesidades.
| Teclas | Descripción | Valor por defecto |
| userTextColor | Color de la fuente de un mensaje enviado por un visitante. | '#FFFFFF' |
| userBackgroundColor | Color de fondo de un mensaje enviado por un visitante. | '#5405BD' |
| botTextColor | Color de la fuente de un mensaje enviado por un agente o un bot | '#000000' |
| botBackgroundColor | Color de fondo de un mensaje enviado por un agente o un bot | '#F2F4F5' |
| userAnchorTextColor | Color de la fuente de un hipervínculo no visitado y enviado por un visitante. | '#E1CCFE' |
| userAnchorTextColorVisited | Color de la fuente de un hipervínculo visitado y enviado por un visitante. | '#B681FC' |
| botAnchorTextColor | Color de la fuente de un hipervínculo no visitado y enviado por un agente o un bot. | '#3232D6' |
| botAnchorTextColorVisited | Color de la fuente de un hipervínculo visitado y enviado por un agente o un bot. | '#5405BD' |
| botIconVerticalAlign | Colocación del avatar del agente hacia la burbuja de mensajes. Puede ser 'superior' o 'inferior'. | 'top' |
| avatarForegroundColor | Color del primer plano del avatar del agente por defecto. | '#5C6784' |
| avatarBackgroundColor | Color del fondo del avatar del agente por defecto. | '#EDF4FC' |
| avatarBorderColor | Color del borde del avatar del agente por defecto. | '#EDF4FC' |
| botIconHeight | Altura del avatar del agente. | '32px' |
| botIconWidth | Altura del avatar del agente. | '32px' |
| botIcon |
Avatar de agente personalizado. Nota: Anula todas las propiedades predeterminadas del avatar del agente. |
null |
| userInputSeparatorColor | Color del separador ubicado encima del cuadro de entrada. | '#DFDFDF' |
| userInputHeight | Altura del cuadro de entrada. | '56px' |
| chatPlaceholder | Marcador de posición del cuadro de entrada. | 'Type a message...' |
Personalización de los Dialog Boxes
La siguiente tabla muestra las teclas de personalización que se pueden utilizar para adaptar los cuadros de diálogo del widget a sus necesidades.
| Teclas | Descripción | Valor por defecto |
| chatDialogBoxIconColor | Color del icono del cuadro de diálogo. | '#AEB3B8' |
| chatDialogBoxFontFamily | Fuente del mensaje del cuadro de diálogo. | 'Roboto-Regular' |
| chatDialogBoxFontSize | Tamaño de la fuente del mensaje del cuadro de diálogo. | '16px' |
| chatDialogBoxFontColor | Color de la fuente del mensaje del cuadro de diálogo. | '#202830' |
| chatConfirmButtonFontFamily | Fuente del botón de confirmación del cuadro de diálogo. | 'Roboto-Regular' |
| chatConfirmButtonFontSize | Tamaño de la fuente del botón de confirmación del cuadro de diálogo. | '14px' |
| chatConfirmButtonFontColor | Color de la fuente del botón de confirmación del cuadro de diálogo. | '#FFFFFF' |
| chatConfirmButtonBackgroundColor | Color de fondo del botón de confirmación del cuadro de diálogo. | '#3E048B' |
| chatCancelButtonFontFamily | Fuente del botón de cancelación del cuadro de diálogo. | 'Roboto-Regular' |
| chatCancelButtonFontSize | Tamaño de la fuente del botón de cancelación del cuadro de diálogo. | '14px' |
| chatCancelButtonFontColor | Color de la fuente del botón de cancelación del cuadro de diálogo. | '#F2F4F5' |
| chatDialogBoxEndChat | Mensaje del cuadro de diálogo cuando la contact person intenta finalizar la conversación. | 'Are you sure you want to end this chat?' |
| chatConfirmButtonEndChat | Etiqueta del botón de confirmación del cuadro de diálogo cuando la contact person intenta finalizar la conversación. | 'Yes, end chat' |
| chatCancelButtonEndChat | Etiqueta del botón de cancelación del cuadro de diálogo cuando la contact person intenta finalizar la conversación. | 'Cancel' |
| chatDialogBoxRetryEndChat | Mensaje del cuadro de diálogo cuando se produce un error al intentar finalizar la conversación. | 'There was an error while ending the chat.' |
| chatConfirmButtonRetryEndChat | Etiqueta del botón de confirmación del cuadro de diálogo cuando se produce un error al intentar finalizar la conversación. | 'Try again' |
| chatCancelButtonRetryEndChat | Etiqueta del botón de cancelación del cuadro de diálogo cuando se produce un error al intentar finalizar la conversación. | 'Dismiss' |
Personalización de la Ended Chat Screen
Estas son las teclas de personalización que se pueden utilizar para personalizar el widget de la pantalla de chat finalizada.
| Teclas | Descripción | Valor por defecto |
| 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' |
Personalización de los Componentes del Virtual Agent
Estas son las teclas de personalización que se pueden utilizar para personalizar el widget cuando se integra con Virtual Agent.
| Teclas | Descripción | Valor por defecto |
| carouselTextColor | Color de la fuente de la tarjeta de carrusel. | '#475059' |
| buttonTextColor | Color de la fuente del botón de la tarjeta. | '#005CDE' |
| buttonBackgroundColor | Color de fondo del botón de la tarjeta. | '#EDF4FC' |
| buttonHoverBackgroundColor | Color de fondo del botón de la tarjeta cuando se pasa el ratón por encima. | '#EDF4FC' |
| replyTextColor | Color de la fuente del botón de respuesta rápida. | '#005CDE' |
| replyBackgroundColor | Color de fondo del botón de respuesta rápida. | 'transparent' |
| replyBorderColor | Color del borde del botón de respuesta rápida. | '#005CDE' |
| replyHoverTextColor | Color de la fuente del botón de respuesta rápida cuando se pasa el ratón por encima. | '#EDF4FC' |
Ejemplo del Code Snippet
Haga clic en el siguiente hipervínculo para descargar un PDF con un ejemplo del fragmento de código con todas las claves existentes.