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 busque la siguiente línea:
{ enableValidation: false, enableEmoji: true, enableUserInput: true, enableAttachments: true }
Añade después la declaración de estilos con las claves de personalización y sus valores:
- enableUserInput: true
Y antes:
- }
Ejemplo de Configuración
{ 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'
}
}
En la parte inferior de esta guía, encontrará un archivo descargable con un ejemplo del fragmento de código, con todas las claves existentes.
Comandos de Personalización
Personalizar el Widget Launcher
La siguiente tabla muestra los comandos de personalización que se pueden utilizar para adaptar el ejecutor del widget a sus necesidades.
|
Comando |
Descripción | Valor predeterminado |
|
chatThemeColor |
Color del fondo del lanzador y de la cabecera. | '#1E0044' |
| chatHoverThemeColor | Color del fondo del lanzador y de la cabecera. | '#1A223F'' |
| chatIcon |
El icono del lanzador. Nota: El mejor formato: SVG, aunque admite 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 lanzador. Nota: No supera el tamaño del lanzador y, por tanto, su valor máximo es de 64 píxeles. |
'35px' |
| triggerButtonWidth |
Anchura del icono del lanzador. Nota: No supera el tamaño del lanzador y, por tanto, su valor máximo es de 64 píxeles. |
'35px' |
| triggerButtonPositionRight | Distancia del lanzador al lado derecho de la ventana. | null |
| triggerButtonPositionBottom | Distancia del lanzador a la parte inferior de la ventana. | null |
Personalizar el Widget Header
La siguiente tabla muestra los comandos de personalización que se pueden utilizar para adaptar el encabezado del widget a sus necesidades.
| Comando | Descripción | Valor predeterminado |
| chatTitleIcon | El icono de la cabecera. | 'https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/product/app-icons/sms.svg' |
| chatTitleIconHeight | Altura del icono de la cabecera. | null |
| chatTitleIconWidth | Anchura del icono de la cabecera. | null |
| chatThemeColor | Color del fondo del lanzador y de la cabecera. | '#1E0044' |
| chatTitle | Título de la cabecera. | 'Talkdesk Chat' |
| chatTitleTextColor | Color de fuente del título de la cabecera. | null |
| chatSubtitle | Subtítulo de la cabecera. | 'Powered by Talkdesk' |
| chatSubtitleTextColor | Color de fuente del subtítulo de la cabecera. | null |
| chatCloseButtonColor | Color del botón de cerrar conversación de chat. | '#FFFFFF' |
| chatMinimizeButtonColor | Color del botón de minimizar del widget. | '#FFFFFF' |
Personalizar la Widget Window
La siguiente tabla muestra los comandos de personalización que se pueden utilizar para adaptar la ventana del widget a sus necesidades:
| Comando | Descripción | Valor predeterminado |
| chatContainerWidth | Anchura 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
| Comando | Descripción | Valor predeterminado |
| 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' |
Personalizar la Pantalla Inicial
La siguiente tabla muestra los comandos de personalización que se pueden utilizar para adaptar la pantalla inicial del widget a sus necesidades.:
| Comando | Descripción | Valor predeterminado |
| welcomeMessageBackgroundColor | Color de fondo del mensaje de bienvenida. | '#4D356A' |
| welcomeMessageTitleFontFamily | Fuente del título del mensaje de bienvenida. | 'Roboto-Regular' |
| welcomeMessageTitleFontSize | Tamaño de letra del título del mensaje de bienvenida. | '24px' |
| welcomeMessageTitleColor | Color de fuente del título del mensaje de bienvenida. | '#FFFFFF' |
| welcomeMessageContentFontFamily | Fuente del contenido del mensaje de bienvenida. | 'Roboto-Regular' |
| welcomeMessageContentFontSize | Tamaño de letra del contenido del mensaje de bienvenida. | '16px' |
| welcomeMessageContentColor | Color de fuente del contenido del mensaje de bienvenida. | '#FFFFFF' |
| customMessageNoBubbleFontFamily | Fuente del mensaje personalizado sin burbuja. | 'Roboto-Regular' |
| customMessageNoBubbleFontSize | Tamaño de letra del mensaje personalizado sin burbuja. | '14px' |
| customMessageNoBubbleColor | Color de 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 letra del mensaje personalizado con burbuja. | '14px' |
| customMessageColor | Color de fuente del mensaje personalizado con burbuja. | '#202830' |
| customFieldLabelFontFamily | Fuente de la etiqueta de un campo personalizado. | 'Roboto-Regular' |
| customFieldLabelFontSize | Tamaño de fuente de la etiqueta de un campo personalizado. | '14px' |
| customFieldLabelColor | Color de 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 fuente del texto de entrada de un campo personalizado. | null |
| customFieldInputColor | Color de 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 fuente de la etiqueta de un desplegable personalizado. | '14px' |
| customDropdownLabelColor | Color de 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 fuente del texto de entrada de un desplegable personalizado. | '14px' |
| customDropdownInputColor | Color de 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 fuente de la etiqueta de un botón personalizado. | '14px' |
| customButtonColor | Color de 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' |
Personalizar la Chat Screen
La siguiente tabla muestra los comandos de personalización que se pueden utilizar para adaptar la pantalla de chat del widget a sus necesidades.
| Comando | Descripción | Valor predeterminado |
| userTextColor | Color de fuente de un mensaje enviado por un visitante. | '#FFFFFF' |
| userBackgroundColor | Color de fondo de un mensaje enviado por un visitante. | '#5405BD' |
| botTextColor | Color de 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 fuente de un hipervínculo no visitado enviado por un visitante. | '#E1CCFE' |
| userAnchorTextColorVisited | Color de fuente de un hipervínculo visitado enviado por un visitante. | '#B681FC' |
| botAnchorTextColor | Color de fuente de un hipervínculo no visitado enviado por un agente o un bot. | '#3232D6' |
| botAnchorTextColorVisited | Color de fuente de un hipervínculo visitado enviado por un agente o un bot. | '#5405BD' |
| botIconVerticalAlign | Colocación del avatar del agente hacia la burbuja del mensaje. Puede ser 'arriba' o 'abajo'. | 'top' |
| avatarForegroundColor | Color de primer plano del avatar del agente por defecto. | '#5C6784' |
| avatarBackgroundColor | Color de 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 sobre el cuadro de entrada. | '#DFDFDF' |
| userInputHeight | Altura del cuadro de entrada. | '56px' |
| chatPlaceholder | Marcador de posición del cuadro de entrada. | 'Type a message...' |
Personalizar los Dialog Boxes
La siguiente tabla muestra los comandos de personalización que se pueden utilizar para adaptar los cuadros de diálogo del widget a sus necesidades.
| Comando | Descripción | Valor predeterminado |
| 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 letra del mensaje del cuadro de diálogo. | '16px' |
| chatDialogBoxFontColor | Color de 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 letra del botón de confirmación del cuadro de diálogo. | '14px' |
| chatConfirmButtonFontColor | Color de 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 letra del botón de cancelación del cuadro de diálogo. | '14px' |
| chatCancelButtonFontColor | Color de fuente del botón de cancelación del cuadro de diálogo. | '#F2F4F5' |
| chatDialogBoxEndChat | Mensaje del cuadro de diálogo cuando la persona de contacto 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 persona de contacto intenta finalizar la conversación. | 'Yes, end chat' |
| chatCancelButtonEndChat | Etiqueta del botón de cancelación del cuadro de diálogo cuando la persona de contacto 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' |
Personalizar la Ended Chat Screen
Estos son los comandos de personalización que se pueden utilizar para personalizar el widget de la pantalla de chat finalizada.
| Comando | Descripción | Valor predeterminado |
| endedChatMessage | Texto del mensaje de chat finalizado. | 'This chat has ended' |
| startChatButtonTextColor | Color de fuente de la etiqueta del botón de inicio del chat. | '#FFFFFF' |
| startChatButtonBackgroundColor | Color de fondo del botón de inicio del chat. | '#1E0044' |
| startChatButtonBorderColor | Color del borde del botón de inicio del chat. | '#1E0044' |
| startChatButtonHoverTextColor | Color de fuente de la etiqueta del botón de inicio del chat cuando se pasa el ratón por encima. | '#FFFFFF' |
| startChatButtonHoverBackgroundColor | Color de fondo del botón de inicio del chat cuando se pasa el ratón por encima. | '#1E0044' |
| startChatButtonHoverBorderColor | Color del borde del botón de inicio del chat cuando se pasa el ratón por encima. | '#1E0044' |
| startChatButtonLabel | Etiqueta del botón de inicio del chat. | 'Start new chat' |
Personalizar Componentes del Autopilot
Estos son los comandos de personalización que se pueden utilizar para personalizar el widget cuando se integra con Autopilot.
| Comando | Descripción | Valor predeterminado |
| carouselTextColor | Color de fuente de la tarjeta de carrusel. | '#475059' |
| buttonTextColor | Color de 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 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 fuente del botón de respuesta rápida cuando se pasa el ratón por encima. | '#EDF4FC' |
Parámetros Adicionales
Validación del formato de los campos de contacto
También es posible activar y desactivar algunas funciones del widget de chat mediante los parámetros disponibles en el código del widget:
Busque la siguiente línea en el código del widget:
{ enableValidation: false, enableEmoji: true, enableUserInput: true, enableAttachments: true }
Si desea activar la validación del formato en los campos de número de teléfono o dirección de correo electrónico, configure el parámetro enableValidation en true:
enableValidation: true
| Comando | Descripción | Valor predeterminado |
| customFieldPhoneDescription | Sugerencia de formato del campo del número de teléfono. | "Incluya el código de país y evite espacios o símbolos (por ejemplo, +1123456789)". |
| customFieldPhoneInvalidFormatMessage | Mensaje de error de formato incorrecto del campo del número de teléfono. | "Escriba un número de teléfono válido" |
| customFieldEmailInvalidFormatMessage | Mensaje de error de formato incorrecto del campo de la dirección de correo electrónico. | "Escriba un correo electrónico válido" |
Nota: Le recomendamos encarecidamente que se abstenga de modificar el intent y el contexto del mensaje por defecto, ya que de hacerlo podría comprometer la experiencia del usuario e incluso incumplir la normativa.
Botones "Emoji" y "Archivos adjuntos"
También es posible activar y desactivar algunas funciones del widget de chat mediante los parámetros disponibles en el código del widget:
Busque la siguiente línea en el código del widget:
{ enableValidation: false, enableEmoji: true, enableUserInput: true, enableAttachments: true }
Si desea evitar que los visitantes envíen emojis, puede desactivar el botón de emojis en el widget de chat estableciendo el parámetro enableEmoji en false:
enableEmoji: false
Si desea evitar que los visitantes envíen archivos adjuntos, puede desactivar el botón de archivos adjuntos en el widget de chat estableciendo el parámetro enableAttachments en false:
enableAttachments: false
Consejo Importante
Los comandos para personalizar las familias de fuentes admiten fuentes seguras para la web. Si desea utilizar una fuente no compatible, le recomendamos que la preinstale en su sitio web.
Aquí tienes una lista de algunas de las fuentes web-safe más comunes para Windows y 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
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.