Talkdesk Digital Engagement: Chat Widget para Administradores

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.

Screenshot_2023-03-21_at_14.11.51.png

 

Configuración

Accede al código del widget y localiza la siguiente línea:

  • { enableEmoji: true, enableUserInput: 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

{ enableEmoji: true, enableUserInput: 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.

 

Teclas de Personalización

Personalizar el Widget Launcher

La siguiente tabla muestra las teclas 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. '35px'
triggerButtonWidth Anchura del icono del lanzador. '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 las teclas 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 las teclas 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 las teclas 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 las teclas 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 las teclas 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

Estas son las teclas 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 Virtual Agent 

Estas son las teclas de personalización que se pueden utilizar para personalizar el widget cuando se integra con Virtual Agent.

 

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' 

Botones Hide/Show

Utilizando funciones disponibles en el código del widget, también es posible ocultar/mostrar algunas funcionalidades del widget de chat:

 

En el código del widget, localiza la línea:

  • { enableEmoji: true, enableUserInput: true, enableAttachments: true     (...)

Si quieres evitar que los visitantes envíen emojis, puedes desactivar el botón de emojis en el widget de chat estableciendo la función "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 la función "enableAttachments" en "false":

  • enableAttachments: false

 

 

Consejo Importante

Las teclas 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.

- Ejemplo de la Personalización del Chat Widget I Talkdesk Chat

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