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

• Teclas de Personalización

  • • Personalizar el Widget Launcher

    • Personalizar el Widget Header

    • Personalizar la Widget Window

    • Personalizar la Pantalla Inicial

    • Personalizar la Chat Screen

    • Personalizar los Dialog Boxes

    • Personalizar la Ended Chat Screen

    • Personalizar los Virtual Agent Components

• Ejemplo del Code Snippet

 

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

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.

 

 

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.