¿Cómo podemos ayudar?

Este artículo sirve como guía completa sobre cómo configurar e integrar el Chat Widget en su sitio web, lo que le permite ofrecer a sus clientes la opción de ponerse en contacto con sus servicios y agentes a través del chat.

Siga los pasos que se indican en este artículo para aprovechar al máximo el canal de chat. Añada valor a su sitio web configurando e integrando fácilmente el Chat Widget, y garantice su disponibilidad para los clientes.

Para facilitar la navegación, utilice el índice que aparece a continuación:

• Excepciones del Firewall
  •  
    • Content Security Policy (CSP) - Chat Widget V1
    • Content Security Policy (CSP) - Chat Widget V2
    • Seguridad de OneTrust
• Creación de Touchpoint de chat
  •  
    • Dominio
    • Creación de instancia regional de chat
• Aplicación Chat
• Touchpoint de chat
  •  
    • Pestaña Touchpoint
      • Conexión a Feedback flow
    • Pestaña Personalización
      • Pestaña Appearance
      • Preference
        • Enable/Disable Chat Transcript Download
        • Display Privacy Policy Disclaimer
        • Display Agent's Name
        • Personalizar nombre y avatar de Autopilot
    • Pestaña Engagement
      • Inicio de la conversación
      • Pantalla inicial
      • Quickstart
    • Pestaña Settings
      • Vista previa de la conversación
• Sección de Quickstart
  •  
    • Creación de Quickstart
    • Edición de Quickstart: Mensaje
    • Edición de Quickstart: Respuesta rápida
    • Edición de Quickstart: Botones
    • Edición de Quickstart: Activar Fly Out
    • [Vista previa] Edición de Quickstart: Editar condiciones
• Integración de Chat Widget
  •  
    • Integración del Widget a través de secuencias de comandos
• Integración del modo CSP seguro de Chat Widget
• Personalización de Chat Widget
• Experiencias de contacto
  •  
    • Visualización del formato Markdown
• Variables de contexto
  •  
    • Variables de contexto recibidas desde la pantalla inicial
    • Variables de contexto recibidas desde el sitio web
    • Posibles aplicaciones para las variables de contexto
• Identificación de visitantes
  •  
    • Creación e identificación manual de contactos
    • Creación e identificación automática de contactos
• Recursos adicionales

Excepciones del Firewall

Cuando un sitio web tiene activado Content Security Policy (CSP), restringe los tipos de contenido que se pueden cargar en él. Para garantizar que las funcionalidades de chat se ejecuten correctamente, se tienen que incluir fuentes específicas en la lista blanca.

Content Security Policy (CSP) - Chat Widget V1

A continuación, se describe la configuración de CSP necesaria para Chat Widget V1, incluidas las regiones de Talkdesk td-us-1, td-eu-1, td-ca-1 y td-usfed-1, para garantizar el correcto funcionamiento del chat en el sitio web.

Dominios CSP

A continuación, se describe el propósito de los dominios CSP. Cada uno de estos dominios desempeña un papel crucial en la activación de los servicios de chat, ya que especifica las fuentes fiables desde las que se puede cargar contenido, lo que garantiza tanto la funcionalidad como la seguridad de los usuarios en sus respectivas regiones.

Content Security Policy (CSP) - Chat Widget V2

Desde el 19 de julio de 2024, al crear un Touchpoint de chat, el sistema generará automáticamente el Chat Widget V2. A continuación, se describe la configuración CSP necesaria para Chat Widget V2, incluidas las regiones de Talkdesk td-us-1, td-eu-1, td-ca-1 y td-usfed-1, para garantizar el correcto funcionamiento del chat en el sitio web.

Dominios CSP

A continuación, se describe el propósito de los dominios CSP. Cada uno de estos dominios desempeña un papel crucial en la activación de los servicios de chat, ya que especifica las fuentes fiables desde las que se puede cargar contenido, lo que garantiza tanto la funcionalidad como la seguridad de los usuarios en sus respectivas regiones.

Seguridad de OneTrust

Si su sitio web utiliza OneTrust, tenga en cuenta que, como parte de su funcionalidad, OneTrust utiliza la secuencia de comandos OtAutoBlock.js para bloquear comportamientos sospechosos, por lo que puede bloquearse su carga y, como resultado, es posible que el iniciador del chat no aparezca en el sitio web.

Le recomendamos que añada Talkdesk Chat a su configuración de confianza de OneTrust. Para ello:

• Inicie sesión en su cuenta de OneTrust.
• Vaya hasta los ajustes de la gestión de secuencias de comandos.
  •  
    • Los ajustes para gestionar la carga de secuencias de comandos se suelen encontrar en las secciones "Cookie consent" o "Script management".
• Defina los scripts incluidos en la lista de permitidos:
  •  
    • Añada sus dominios o archivos remotos JavaScript de confianza (https://talkdeskchatsdk.talkdeskapp.com/v2/talkdeskchatsdk.js) a la configuración.
    • Nota: Se bloqueará cualquier secuencia de comandos que no esté en la lista blanca hasta que se obtenga el consentimiento del usuario.

Creación de un Touchpoint de chat

Para crear un nuevo "Touchpoint de chat", vaya a "Admin" > "Channels" > "Chat" y haga clic en el botón Create Touchpoint.

Se abrirá una ventana pop-up que le solicitará que proporcione el dominio (obligatorio) y el nombre descriptivo (obligatorio) del nuevo Touchpoint de chat. Haga clic en Create.

El nuevo Touchpoint de chat ahora será visible en la lista y estará inactivo de forma predeterminada. Haga clic en el dominio del Touchpoint para completar su configuración.

Busque la sección "Touchpoint" y haga clic en Edit.

Ahora puede seleccionar el Studio flow que se debe asignar al nuevo touchpoint de chat. Haga clic en Save para volver a la página de configuración.

Seleccione la pestaña Customizationy haga clic en Edit. Aquí tiene la opción de personalizar el contenido del Chat Widget, por ejemplo:

• Mensaje de bienvenida.
• Campos (información del cliente).
• Menús desplegables (por ejemplo, selección de idioma).
• Mensajes (información valiosa).
• Botones de acción (por ejemplo, "Start chat").

Integre el Chat Widget en las páginas que desee de su sitio web. Esto puede hacerse a través de iframe (opción recomendada) o a través de secuencias de comandos. Consulte la sección "Widget Integration" para obtener más información.

Después de integrar el Chat Widget en su sitio web, vaya a "Admin" > "Channels" > "Chat" > Touchpoint.

En la pestaña Touchpoint, haga clic en Edit.

Ahora puede activar el touchpoint de chat deslizando el botón "Status". Haga clic en Save para guardar su progreso.

Vuelva a cargar su sitio web y debería poder ver el Chat Widget en las páginas web donde estaba integrado.

Al configurar el touchpoint de chat, tenga en cuenta las siguientes directrices:

Dominio

• Protocolos y "www."

El sistema diferencia entre los dos protocolos disponibles ("http:" y "https:") y no diferencia entre dominios que incluyen "www." y dominios que no incluyen "www.". 

Sin embargo, es posible eliminar la información del protocolo y funcionará para todas las combinaciones.

Implementación en un dominio y sus subdirectorios

Notas:

• Se admiten todos los subdirectorios como https://www.talkdesk.com/abc bajo www.talkdesk.com para implementar el touchpoint del chat.

• La conversación del chat se mantendrá mientras el contacto navega entre las páginas y subpáginas dentro del dominio. Esto garantiza una comunicación ininterrumpida.

Implementación en subdominios

Notas:

• El despliegue de subdominios utiliza comodines (*) para hacer coincidir subdominios. Se admiten todos los subdominios que terminan con talkdesk.com para implementar el touchpoint del chat.

• La conversación de chat NO se transferirá cuando una contact person navegue a un subdominio diferente. Esto ofrece una clara separación de las conversaciones entre subdominios.

Implementación en una página

Nota: El sistema utiliza 'http:' y 'https:' para identificar el enlace que se implementará. Cualquier dominio que comience con estos términos sólo se desplegará en el enlace específico. No se admiten los subdirectorios bajo el enlace de dominio, como http://www.talkdesk.com/abc/def.html, para implementar el touchpoint del chat.

Creación de instancia regional de chat

Al crear un touchpoint de chat, se crea una instancia regional del chat según la región de implementación del touchpoint de chat. Las instancias de chat regionales sirven como centros de datos distintos a nivel global, facilitando el procesamiento y almacenamiento esenciales para las funcionalidades de comunicación de su aplicación. Por ejemplo:

• Los administradores que creen un touchpoint de chat en la región de EE. UU., crearán automáticamente una instancia regional de chat en dicha región.
• Los administradores que creen un touchpoint de chat en la región de la UE, crearán automáticamente una instancia regional de chat en la UE después del 30 de mayo de 2024.
  • Se tienen que añadir las siguientes excepciones de firewall para la región de la UE.
    •  
      • https://api.talkdeskapp.eu
      • wss://tsock.ie1.twilio.com/v3/wsconnect
      • https://mcs.ie1.twilio.com
      • https://media.ie1.twilio.com
  • Es necesario añadir las siguientes políticas de seguridad de CSP para las regiones de la UE.
    •  
      • https://api.talkdeskapp.eu
      • wss://tsock.ie1.twilio.com
      • https://mcs.ie1.twilio.com
      • https://media.ie1.twilio.com

Notas:

• Los touchpoints de chat creados en la región de EE. UU. antes del 30 de mayo de 2024 seguirán conectándose con la instancia de chat regional correspondiente ubicada en EE. UU. Si desea migrar la aplicación Chat existente de la región de la UE a la instancia Chat EU, siga las instrucciones del artículo Migrating EU Chat Touchpoints. El documento descargable también se puede encontrar al final de este artículo.
• Los touchpoints de chat creados en la región de CA siguen conectándose con la instancia de chat regional ubicada en EE. UU.

Aplicación Chat

Acceda a Workspace y vaya a "Admin" > Channels. En la pestaña "Channels list", encontrará el canal "Chat". Selecciónelo para configurar todos los Touchpoint de Chat.

• Lista de canales: Los canales disponibles en su cuenta. Seleccione Chat para configurar los touchpoints del canal.
• Configuración global: Configuración aplicable a uno o más canales. Por ejemplo, la definición de la importancia de la ocupación de cada conversación para cada canal.
• Plantillas: Cree mensajes previamente escritos para ayudar a los agentes a ser más eficientes.
• Canal de chat: Para configurar este canal, haga clic en la sección Chat dentro de la aplicación "Channels".
• Número de touchpoints: Esta etiqueta indica el número de touchpoints que ya estaban configurados para el chat.

Utilice el botón Create new touchpoint para crear un nuevo touchpoint. Una vez que haga clic, se le pedirá el dominio del sitio web y un nombre descriptivo para el Touchpoint.

Si hace clic en el botón "More options" (...), podrá:

• Editar el Touchpoint de Chat.
• Editar la apariencia del chat.
• Duplicar las configuraciones de apariencia a un nuevo Touchpoint (se le pedirá el dominio y el nombre descriptivo).
• Activar o desactivar el touchpoint.
• Eliminar el touchpoint (solo es posible si primero se desactiva el chat. Nota: Tenga en cuenta que también tiene que eliminar el código del widget del sitio web).

Touchpoint de chat

Para cada chat Touchpoint hay cuatro pestañas: 

• "Touchpoint"
• “Personalización”
• "Compromiso"
• "Ajustes"

Touchpoint: En esta pestaña puede configurar el dominio de su sitio web, asignar un Studio flow, conectarse a un Feedback flow y copiar el código del widget para añadirlo a su sitio web.

Nota: El fragmento de código solo está disponible en el modo de visualización.

Customization: En esta pestaña podrá personalizar la apariencia, como el color de la marca, el logotipo de la marca, el iniciador de chat y la preferencia del Chat Widget.

Engagement: En esta pestaña, podrá personalizar el formulario inicial y el mensaje del Chat Widget.

Settings: En esta pestaña, podrá configurar el permiso de vista previa de conversaciones en la aplicación Inbox en función de los touchpoints y las funciones.

Para cambiar la pestaña seleccionada del modo de visualización al modo de edición, haga clic en el botón Edit.

Pestaña Touchpoint

Al entrar en la pestaña Touchpoint, estará en el modo de visualización. Para cambiar al modo de edición, haga clic en el botón Edit para comenzar a configurar su touchpoint de chat.

Utilice "Domain" para añadir la URL del sitio web en el que desea que aparezca el Widget (consulte las directrices disponibles aquí). En el campo "Friendly name", introduzca un nombre descriptivo para el touchpoint, es decir, el nombre que se mostrará a los agentes.

Luego, seleccione en el menú desplegable el Studio flow que se asignará al Touchpoint.

Al configurar el chat por primera vez, puede abrir el enlace Configure a Studio flow, que le redirigirá a Studio para que pueda crear un Studio flow.

Nota: Puede cambiar el Studio flow asignado tantas veces como sea necesario, sin tener que cambiar el fragmento de código en su sitio web.

Deslice el conmutador "Status" para activar o desactivar el Touchpoint de Chat. Haga clic en Save para guardar su progreso.

: Una vez que se añade el código del widget al sitio web, el Chat Widget aparecerá para todos los visitantes del sitio web. 

: Al desactivarlo, el Chat Widget desaparecerá del sitio web. Las conversaciones en curso no se perderán, pero el visitante no podrá iniciar otra conversación.

Nota: El botón Save solo se activará una vez que añada el dominio y seleccione un Studio flow.

Después de guardar sus configuraciones, volverá al modo de visualización, donde podrá ver la configuración aplicada y el código del widget que debe añadir a su sitio web.

En "Domain Information", puede ver el dominio, el nombre descriptivo del dominio y el Studio flow asignado.

Después de guardar las configuraciones del Touchpoint, se generará el código del widget. Consulte esta sección para obtener más información sobre cómo añadir el código del widget a su sitio web.

Nota: La sección de código del widget solo se muestra en el modo de visualización.

Conexión a Feedback flow

Busque la opción "Connect to Feedback flow" y utilice el menú desplegable para seleccionar el flujo de comentarios que desea asignar al touchpoint.

También puede abrir el enlace Configure a Studio flow [1] para acceder al Feedback flow y crear una encuesta de chat.

Para desconectar una encuesta de chat del touchpoint de chat, pulse el icono "x" a la derecha del nombre del flujo.

Pestaña Customization

Al entrar en la pestaña Customization, estará en modo de visualización. Para cambiar al modo de edición, haga clic en el botón Edit para comenzar a configurar la apariencia de su chat.
 

Pestaña Appearance [1]: Personalice el tema, el color y el icono del Chat Widget, incluidos el color de la marca, la marca, el iniciador de chat y el color del iniciador.

Pestaña Preference [2]: Aquí puede activar, desactivar y configurar ajustes generales del Chat Widget, como el botón de finalizar chat, descargar la transcripción del chat, indicador de escritura, mostrar el nombre del agente, personalizar Autopilot, etc.

Vista previa [3]: Vista previa de las pantallas del Chat Widget
 

Pestaña Appearance

Al entrar en la pestaña "Appearance", podrá comenzar a configurar la apariencia de su chat. Las siguientes funcionalidades estarán disponibles para su edición:

Dentro de "Chat Widget", puede seleccionar "Brand color" para elegir el color del tema del widget de chat que coincida con sus preferencias de marca. Esta selección actualizará varios elementos del widget de chat, incluido el fondo del encabezado, el texto del encabezado y el color de fondo del widget, entre otros.

Si selecciona la opción "More color settings", podrá especificar y obtener una vista previa de los colores del widget de chat para alinearlos con su marca. Estas opciones son:

• "Header background": El color de fondo del encabezado.
• "Header text": El color del texto del encabezado.
• "Welcome message background": El color de fondo del mensaje de bienvenida en la pantalla inicial del formulario.
• "Welcome message text": El color del texto del mensaje de bienvenida en la pantalla inicial del formulario.
• "Widget background": El color de fondo del widget de chat.
• "Action button": El color de fondo, contorno o frontal del botón de acción, incluyendo: el "botón Start chat", el "botón Start new chat", el "botón End chat", el "botón Cancel chat" y los botones de acción (digital component carousel, quick reply, etc.).
• "Agent’s bubble": El color de fondo de la burbuja de chat de un agente.
• "Agent’s text": El color del texto de un mensaje de chat de un agente.
• "Customer’s bubble": El color de fondo de la burbuja de chat del cliente.
• "Customer’s text": El color del texto del mensaje de chat del cliente.

• "Branding - Logo URL" [1]: Introduzca una URL para personalizar y obtener una vista previa de los logotipos de la marca en el Chat Widget.
• "Title" [2]: Introduzca el título y la descripción para personalizar y obtener una vista previa de las marcas en el Chat Widget.
• "Chat launcher - Icon URL" [3]: Introduzca una URL para personalizar y obtener una vista previa del icono del iniciador de chat.
• "Launcher color" [4]: Seleccione un color para personalizar y obtener una vista previa del color de fondo del iniciador de chat.

Preference

Al ampliar la pestaña "Preference", verá una vista previa de cómo se verá el Widget en la sección Preview style.

También podrá configurar las siguientes funcionalidades activando o desactivando los respectivos selectores:

• Botón "Close conversation": activa/desactiva la opción que permite a los visitantes cerrar la conversación de chat (aparecerá en la cabecera del widget de chat).
• Indicador de escritura: Activa/desactiva la visibilidad del indicador de que el agente o el contacto está escribiendo (o de que Autopilot está cargando la respuesta).

Después de guardar sus configuraciones, volverá al modo de visualización, donde podrá ver las configuraciones aplicadas y qué contenido se mostrará en el Widget de Chat. Una etiqueta de estado indica si la opción “Close conversation" está habilitada o no.

Enable/Disable Chat Transcript Download

La función de descarga de transcripciones de chat permite a los usuarios ver o archivar el historial de conversaciones importantes descargando las transcripciones de chat directamente desde el widget de chat.

Utilice el botón resaltado para activar o desactivar la opción que permite a los contactos descargar la transcripción del chat. Esta opción estará disponible en el menú More Options (tres puntos).

Una vez activada la opción «Descargar transcripción», los contactos pueden localizarla en el menú del widget de chat y hacer clic para descargarla como texto sin formato. El archivo descargado estará accesible desde la lista de descargas del navegador, para futuras consultas y fines de registro.

Display Privacy Policy Disclaimer

Cuando esta opción está activada, los administradores pueden configurar y mostrar un descargo de responsabilidad de la Política de Privacidad a los usuarios finales, que admite formato enriquecido (como enlaces incrustados) que aparecerán directamente en el Chat Widget. Este descargo de responsabilidad suele informar a los usuarios sobre cómo se recopilan, almacenan y utilizan sus datos antes de que interactúen con el sistema, y los usuarios pueden hacer clic en el botón Cancel para descartarlo.

Display Agent’s Name

Cuando este selector esté activo, los contactos podrán ver el nombre del agente en sus mensajes y se mostrará un mensaje informativo cuando el agente se haga cargo: por ejemplo, "Graham Shaw se encargará de su chat". Los admin puede personalizar la pantalla para que aparezca el nombre completo del agente, su nombre, su apellido o un nombre específico.

Customize Autopilot’s Name and Avatar

Active el botón "Customize Autopilot's Name" [1] para personalizar el nombre del Autopilot. Los contactos pueden ver el nombre del autopilot bajo los respectivos mensajes. El nombre predeterminado es "ChatBot".

Para personalizar el avatar del autopilot [2], active el botón y configure el avatar del autopilot proporcionando una URL de avatar. Los contactos podrán ver el avatar del autopilot bajo los respectivos mensajes.

Pestaña Engagement

Inicio de la conversación

Al entrar en la pestaña Engagement, estará en modo de visualización. Para cambiar al modo de edición, haga clic en el botón Edit para comenzar a configurar. Al expandir la pestaña "Conversation", podrá activarla o desactivarla.

Activación o desactivación de "Chat immediately"

El selector "Chat immediately" ofrece una forma sencilla de iniciar conversaciones de chat sin requerir ninguna intervención por parte del usuario. Por ejemplo, cuando está habilitado y el formulario inicial está desactivado:

• La conversación por chat comienza instantáneamente cuando el usuario hace clic en el icono de inicio de chat.
• La contact person será dirigida en función del Studio Flow configurado, ya sea a Autopilot o a un agente en directo, lo que reduce la fricción y permite una asistencia inmediata.

Nota: En el Chat Widget V2, esta función sustituye a la casilla de verificación anterior "Route conversation immediately after the user clicks this button". Los touchpoints de chat existentes pasan automáticamente a la nueva configuración, lo que garantiza que los Studio flows se activen tan pronto como el usuario interactúe con el botón de chat.
 

Initial Screen

Al expandir la pestaña "Initial screen", podrá activar y configurar sus componentes.

Utilice el botón "Show/Hide initial screen" [1] para activar o desactivar la pantalla inicial del Chat Widget.

Nota: El "Preview style" [2] se actualizará cada vez que haga algún cambio en sus componentes.

Añada un "Welcome message" [3] en la parte superior del Chat Widget para darle la bienvenida a sus visitantes. Puede estar compuesto por un título de hasta 20 caracteres y un texto de hasta 120 caracteres.

Nota: Las URL añadidas a estos elementos serán enlaces en los que se podrá hacer clic.

Luego, puede crear un formulario de conversación previa para conseguir información del visitante que puede utilizarse con fines de enrutamiento o para facilitar contexto adicional a sus agentes.

Tenga en cuenta que, por defecto, hay un mensaje personalizado, un campo personalizado, un menú desplegable personalizado y un botón personalizado. Estos componentes por defecto no se pueden eliminar, pero solo se mostrarán si los configura.

Puede utilizar el botón + Add field para añadir otro componente personalizado a la pantalla inicial según el tipo que seleccione: 

• "Button"
• "Dropdown"
• "Field"
•  "Message"

El "Custom button" añade un botón (al que puede asignar una etiqueta) para activar una acción. Actualmente, solo existe una opción de activación: "Start the chat".

Nota: Active "Route conversation immediately after the user clicks this button" si desea que el Studio flow se active tan pronto como el usuario haga clic en el botón. Si está desactivado, el usuario tiene que enviar un mensaje para activar el Studio flow.

Con el "Custom dropdown" puede añadir un menú desplegable personalizado a la pantalla inicial.

En el "Custom field" podrá añadir un campo de entrada a la pantalla inicial, que permitirá al visitante introducir información. Puede añadir la etiqueta del campo en el cuadro de texto y luego asignarla al valor que está recopilando.

Nota: Por ejemplo, si desea solicitar la dirección de correo electrónico del visitante, escriba "Email" como nombre del campo personalizado y seleccione la opción "Contact email" que se muestra en el menú desplegable. En caso de que desee solicitar otro tipo de información (por ejemplo, número de pedido), puede definir el valor del campo personalizado como "Custom option".

La opción de añadir un "Custom message" añadirá un mensaje a la pantalla inicial. Al activar el conmutador "Chat bubble", el mensaje se mostrará dentro de una burbuja de chat.

Si elimina un campo mediante el icono correspondiente, se eliminará ese componente personalizado de la pantalla inicial.

Nota: Los componentes predeterminados no se pueden eliminar y, por tanto, tiene que eliminar su configuración para ocultarlos de la pantalla inicial.

El selector "Required" establece qué campos son opcionales u obligatorios antes de que el visitante pase a la pantalla del chat. Cada componente dispone de una herramienta de arrastrar y soltar que le permitirá cambiar el orden de presentación de los componentes en la pantalla inicial.

Después de guardar las configuraciones, volverá al modo de visualización y verá la configuración aplicada y qué contenido se mostrará en el widget de chat.

Verá una etiqueta de estado que indica si la pantalla inicial está habilitada o no, así como una vista previa de su configuración. 

Para cada campo personalizado o menú desplegable personalizado, se generará un valor "Studio Argument". Cada argumento se puede asignar al componente "Incoming Message" del Studio flow del touchpoint para facilitar contexto a los agentes o con fines de enrutamiento.

Quickstart

Al expandir la sección "Quickstart", puede editar la siguiente configuración.

Mensajes

En la sección Messages [1], puede añadir mensajes estáticos que aparecerán una vez que el visitante esté en la pantalla de chat.

De forma predeterminada, hay un cuadro de entrada [2] para añadir un mensaje, pero solo se mostrará si lo configura. Puede añadir tantos mensajes como desee haciendo clic en el botón Add another message [3].

Consejo: Vacíe un mensaje para evitar que aparezca en la pantalla de chat.

Cada mensaje dispone de una herramienta de arrastrar y soltar que le permitirá cambiar el orden de presentación de los mensajes en la pantalla del chat.

Quickstart

En la sección "Quickstart" [4], puede seleccionar un Quickstart de la lista desplegable para asociarlo con el touchpoint de chat. Cuando se abre el widget de chat, la opción de inicio rápido que está seleccionada aparecerá al instante.

Vista previa de Quickstart

Al ampliar la sección "Quickstart", puede obtener una vista previa del inicio rápido. 

El Chat Widget le permite obtener una vista previa del color y el estilo visual de un Quickstart seleccionado antes de publicarlo. Cuando la opción Fly Out de Quickstart está activada, la vista previa muestra el Quickstart flotando fuera de la burbuja de chat, lo que le ayuda a comprender exactamente cómo aparecerá y se comportará para los visitantes de su sitio web.

Cuando un usuario pasa el cursor sobre el Flyout de Quickstart en un navegador de sobremesa, aparece el botón Cancel. Si el usuario descarta el Quickstart, el Flyout se suprimirá y no se volverá a mostrar durante las siguientes 24 horas.

Después de guardar sus configuraciones, volverá al modo de visualización, donde podrá ver la configuración aplicada y qué contenido se mostrará en el Chat Widget.
 

Pestaña Settings

En la pestaña "Settings", puede configurar los ajustes a nivel del touchpoint, así como ver un resumen de la configuración actual de los ajustes disponibles. Haga clic en el botón Edit del touchpoint deseado para configurar los ajustes.

Conversation Preview

Con la opción "Conversation Preview", tiene la posibilidad de conceder o restringir a determinados roles la vista previa de las conversaciones de chat directamente desde la aplicación "Inbox".

• Allow previews: Botón para activar o desactivar la vista previa de la conversación. Si se activa, todas las conversaciones de este Touchpoint podrán ser previsualizadas por los usuarios autorizados.
• Authorized roles: Cuando la opción "Allow previews" está activada, puede seleccionar las funciones que pueden obtener una vista previa de las conversaciones del touchpoint.

Sección Quickstart

En el canal de chat hay 2 pestañas: "Touchpoint" y "Quickstart". Al hacer clic en la pestaña Quickstart, se le redirigirá a la lista de inicio rápido.

El inicio rápido de chat permite que la contact person vea componentes enriquecidos (como respuestas rápidas y mensajes enriquecidos) de inmediato después de abrir el widget de chat. Esto elimina el waiting time, lo que permite a los usuarios participar en conversaciones de inmediato y sin esperas. Con acceso instantáneo a elementos interactivos, los usuarios pueden iniciar el chat sin problemas y comunicarse con un agente en Autopilot o con un agente en vivo. 

La lista de Quickstart [1] detalla el tipo, la hora de creación y la hora de la última actualización de los inicios rápidos. Nota: Los tipos de mensaje y respuesta rápida de la plantilla de Quickstart se crean de forma predeterminada.

Utilice el botón Create quickstart [2] para crear un nuevo Quickstart. Una vez que se haga clic, se le pedirá que introduzca el nombre y la selección de la plantilla (por ejemplo, mensaje y respuesta rápida). Puede obtener más información en la sección Creación de un inicio rápido.

Con el botón “Más opciones“ (...) podrá realizar las siguientes acciones:

• Duplicate [3]: Se utiliza para duplicar un inicio rápido.
• Delete [4]: Haga clic aquí para eliminar un inicio rápido.

Creación de un inicio rápido

Después de hacer clic en el botón Create quickstart, aparecerá una ventana pop-up. Aquí, los Administradores pueden proporcionar un nombre para el inicio rápido [1] y elegir una plantilla [2] para crearlo (por ejemplo, "Message"o "Quick reply"). Se creará el inicio rápido después de hacer clic en el botón Create [3].

Edición de un inicio rápido: mensaje

Nota:Los mensajes de inicio rápido admiten formato enriquecido, como negrita, cursiva, texto subrayado, viñetas, enlaces incrustados, emojis y más.

Los administradores pueden editar el mensaje mientras crean una opción de inicio rápido o haciendo clic en una opción de inicio rápido existente de la lista.

Para comenzar a editar, seleccione el icono Edit [1]. Ahora podrá utilizar el editor Quickstart Message [2] para redactar mensajes con formato de texto enriquecido. El editor admite:

• Negrita, cursiva, subrayado.
• Listas con viñetas y numeradas.
• Inserción de hipervínculos para dirigir a los usuarios a recursos relevantes.

Para completar la edición, haga clic en el botón Save [3].

Si desea eliminar este inicio rápido, haga clic en el botón Delete [4]. En ese caso, aparecerá una ventana de diálogo de confirmación para confirmar la eliminación del inicio rápido.

Edición de un mensaje rápido: respuesta rápida

La respuesta rápida muestra botones interactivos para fomentar la participación del usuario. Cuando un usuario hace clic en uno de los botones, se envía un mensaje que contiene el valor de respuesta para iniciar la conversación de chat. Si el Autopilot está activado, gestionará y responderá al mensaje de respuesta automáticamente.

Para gestionar una respuesta, haga clic en ella para Edit [1] (editar) su etiqueta e insertar el mensaje de respuesta deseado [2]. Este es el mensaje que recibe y al que responde el Autopilot. 

La secuencia de respuestas se puede modificar arrastrando y soltando las respuestas.

Para eliminar un mensaje de respuesta, simplemente haga clic en el icono "Delete" [3] correspondiente al mensaje.  

Haga clic en el botón Confirm [4] para confirmar los cambios. 

Nota: El número de respuestas permitidas es de hasta 10 botones. Se requiere al menos un botón.

Edición de un inicio rápido: botones

Los botones de inicio rápido ofrecen una interfaz interactiva que fomenta la participación del usuario. Cuando un usuario hace clic en uno de los botones, se envía un mensaje que contiene el valor de respuesta para iniciar la conversación de chat. Si el Autopilot está activado, gestionará y responderá al mensaje de respuesta automáticamente.

Para modificar un botón, haga clic en él para editar su contenido. Puede modificar la etiqueta "Label" [1] en el campo correspondiente. Encontrará las siguientes opciones en el menú desplegable "Action type" [2]:

• Postback: El mensaje que Autopilot recibe y al que responde. 
• Open url: Para configurar una URL válida que abra la página web en una nueva pestaña desde el widget de chat.
• Call to number: Configura un número válido para hacer una llamada desde el widget de chat.

La secuencia de botones se puede modificar arrastrando y soltando los botones correspondientes.

Haga clic en el botón Confirm [3] para confirmar los cambios. 

Nota: El número de respuestas permitidas es de hasta 10 botones. Se requiere al menos un botón.

Edición de un inicio rápido: Activación de Fly Out

El mensaje emergente dinámico del chat muestra una invitación flotante fuera de la burbuja del iniciador de chat para captar al instante la atención del visitante. Cuando está activado, aparece de forma dinámica, invitando a los usuarios a iniciar una conversación sin tener que abrir primero el iniciador. Esto ayuda a aumentar la participación y la conversión al hacer que las invitaciones al chat sean más visibles y oportunas.

Para activarlo, active el botón "Fly Out" [1]. La configuración se aplica a todos los tipos de Inicio rápido, incluidos los mensajes, las respuestas rápidas y los botones.

Nota: El mensaje emergente Fly Out solo se admite en Chat Widget V2. En los touchpoints de chat V2 que usan código personalizado para modificar el iniciador de chat, es posible que la función no se muestre como se espera. Si desea activar el mensaje Fly Out en este escenario, envíe un ticket de asistencia.

[Preview] Edición de un inicio rápido: Editar Condiciones

Nota: Esta es una función de vista previa. Para activar esta funcionalidad, póngase en contacto con su representante de Talkdesk.

El chat proactivo aprovecha una combinación de datos de comportamiento (como el tiempo en el sitio web y el número de páginas visitadas), la visita a la URL de la página y variables personalizadas para activar un mensaje personalizado. 

Esto cambia la asistencia de reactiva a proactiva, lo que garantiza una intervención oportuna y contextual en páginas de gran valor para evitar fricciones, aumentar las conversiones y mejorar la experiencia general del cliente.

Busque el inicio rápido específico que desea editar. Haga clic en el icono Edit para abrir la vista del editor de condiciones.

Visitante [1]

• Todos: La condición establecida se aplica a todos los visitantes del sitio web. 
• Visitante nuevo: La condición establecida solo se aplica a los usuarios que visitan el sitio por primera vez. 
• Visitante recurrente: La condición establecida solo se aplica a los usuarios que han visitado anteriormente el sitio.

Nota: El Chat Widget identifica si un visitante es un usuario nuevo o recurrente en función de sus interacciones con las páginas web en las que se ha implementado el Widget. La identificación del usuario se basa en el dispositivo y el navegador utilizados. Una contact person se considerará un nuevo usuario si:

• Utiliza otro navegador.
• Utiliza otro dispositivo.
• Borra el almacenamiento local de su navegador.

Coincidencia [2]

• Coincide con TODAS estas condiciones: El mensaje Fly Out solo se activará si el visitante cumple todas las condiciones enumeradas (por ejemplo, tiene que estar en la página del carrito Y tener una puntuación baja en la encuesta Y haber visitado 3 páginas). 
• Coincide con UNA de estas condiciones: El mensaje Fly Out se activará si el visitante cumple alguna de las condiciones enumeradas.

Tiempo en el sitio web [3]

El tiempo en el sitio web registra la duración de la interacción activa del visitante dentro del sitio web, específicamente en las páginas implementadas por el Chat Widget. El rango configurable es de 10 a 1800 segundos. Los periodos de inactividad o tiempo de inactividad (como ver otras pestañas del navegador o cerrar la ventana) se excluyen para garantizar una medición precisa del tiempo concentrado.

Número de páginas visitadas [4]

Esta condición requiere que el visitante haya visto un número mínimo especificado de páginas durante la sesión de navegación actual. Cada página vista, incluidas las visitas repetidas a la misma página, contribuye a este total.

URL de la página [5]

La condición URL de la Página le permite activar el chat proactivo en función de la dirección específica de la página que está viendo el visitante. Esto es esencial para seleccionar o excluir páginas específicas de gran valor. 

La condición utiliza cuatro operadores principales: 

• 'is' activa el chat solo si la URL coincide exactamente.
• 'is not' lo activa si la URL no coincide exactamente.
• 'contains' es flexible y activa el chat si alguna parte de la URL incluye la palabra clave especificada.
• 'doesn't contain' activa el chat si la URL no tiene la palabra clave especificada.

Variable personalizada [6]

Permite la segmentación personalizada mediante pares clave-valor transmitidos desde el sitio web mediante el método SDK webchat.setContextParam(). 

Estas variables, que proporcionan contexto, como el idioma del usuario o un estado VIP, se pueden evaluar con varios operadores: is,' 'is not,' 'is greater than,' 'is less than,' 'contains,' y 'doesn't contain'. 

Esto permite a los administradores crear reglas basadas en datos dinámicos recibidos desde el navegador del cliente para controlar con precisión el activador del Chat Fly Out. Consulte Chat Widget V2 para obtener información sobre cómo establecer el contexto.

Nota importante: La función de chat proactivo monitoriza el comportamiento del usuario dentro de un período de una hora. Esto significa: Si un visitante permanece activo en el sitio web durante más de una hora, no se hará un seguimiento de su comportamiento después de ese período.

Integración de Chat Widget

Integración del Widget mediante secuencia de comandos

Acceda a "Admin" > "Channels" > "Chat" > "Touchpoint". En la pestaña Touchpoint, en el modo de visualización, localice la sección del código de widget.

Seleccione el fragmento de código y haga clic en el botón Copy. Pegue el fragmento de código delante de la siguiente etiqueta de cierre en su propio sitio web:

• </body>

Nota: Cópielo en todas las páginas en las que desee que aparezca el Chat Widget.

Integración del modo CSP seguro del Chat Widget

El script de integración del Chat Widget inserta etiquetas <style> inline en tiempo de ejecución. En entornos sanitarios regulados (por ejemplo, DigiD/Reglamento General de Protección de Datos (RGPD)), las políticas de seguridad prohíben el uso de 'unsafe-inline' en la directiva de CSP style-src. Como resultado, el navegador bloquea los estilos insertados, impidiendo la carga del widget y provocando potencialmente un error no gestionado.

Cuando su sitio web aplica una Política de Seguridad de Contenido (CSP) estricta con 'unsafe-inline' desactivado, el fragmento de código JS-SDK predeterminado del Chat Widget no funcionará porque depende de estilos en línea generados dinámicamente. Este comportamiento está restringido en entornos de CSP seguros.

Para implementar el Chat Widget con éxito en estas condiciones, siga la mejor práctica de la sección "Integración del modo CSP seguro del Chat Widget con CSP unsafe-inline desactivado" en el Chat Widget V2.

Personalización del Chat Widget

Para adaptar mejor el Chat Widget a las características de su sitio web, puede personalizar la apariencia del widget y la experiencia del usuario. Consulte este artículo para obtener más información.

Experiencias de contacto

Visualización del formato Markdown

El widget de chat ahora admite la representación del formato Markdown directamente dentro del chat, lo que permite que los mensajes generados por la Agentic AI platform muestren un formato enriquecido. Esto mejora la claridad del mensaje, la legibilidad y el compromiso en las interacciones por chat, lo que hace que las respuestas asistidas por IA sean más visualmente estructuradas y fáciles de usar.

• Configuraciones: Los administradores no tienen que activar ni configurar esta función. El sistema representa automáticamente el contenido Markdown generado por el AI Agent.
• Markdown admitidos: Se admiten las salidas Markdown más utilizadas de Agentic AI.
  • Encabezados
  • Negrita, cursiva
  • Listas
  • Tablas
  • Enlaces incrustados
  • Bloques de código
  • Citas de bloque

Nota: La representación de Markdown solo se admite en el canal de chat. Para canales como WhatsApp y SMS, se recomienda utilizar instrucciones para evitar la salida de Markdown de Agentic AI, lo que garantiza que los mensajes permanezcan en texto sin formato para una visualización óptima.

Variables de contexto

El componente de paso inicial en el flujo de "Incoming Message" en Studio le permite traer contexto proveniente del Chat Widget.

Es posible recopilar variables de contexto de las siguientes maneras:

• Datos proporcionados por el visitante: Solicita información en la pantalla inicial a través de campos y menús desplegables personalizados. Posteriormente, el visitante rellenará la información solicitada.
• Datos proporcionados por su sistema: Recepción de información de su sitio web cuando el visitante abre el Chat Widget o cuando el visitante inicia una conversación de chat.

Nota: Puede utilizar ambos métodos al mismo tiempo.

Las variables recopiladas deben asignarse al componente "Incoming Message" del Studio flow que se asigna al Touchpoint de Chat. Después de eso, puede utilizarlos para gestionar qué variables desea presentar a sus agentes como contexto adicional para fines de enrutamiento o crear integraciones con otros Talkdesk Products.

Variables de contexto recibidas desde la pantalla inicial

Vaya a "Admin" > "Channels" > "Chat" > "Touchpoint", abra la pestaña "Appearance" y haga clic en el botón Edit. Active la pantalla inicial y añada los campos que recopilarán el contexto que necesita. Consulte esta sección para obtener más información.

Verifique los argumentos Studio relacionados con cada campo de la pantalla inicial. Para más información sobre los argumentos de Studio, lea los siguientes artículos:

• Digital Engagement: Configuración de Studio para Administradores
• Studio: Trabajar con variables

Abra el Studio flow del Touchpoint en modo de edición. Seleccione el componente Incoming Message, añada los argumentos y asigne las variables de flujo correspondientes:

• "Argument name": Copie el nombre del argumento del campo que aparece en la pestaña "Appearance" (modo de visualización) y péguelo en el cuadro de entrada del argumento.
• "Map to flow variable": Para las variables de datos de contacto, se debe aplicar la siguiente nomenclatura:
  • field_name1 > contact_name
  • field_number1 > contact_number
  • field_email1 > contact_email
• Se puede aplicar cualquier otro nombre de variable para cualquier otro argumento.

Complete la configuración según sus requisitos y haga clic en Save.

Variables de contexto recibidas desde el sitio web

En el código del widget, busque la sección comentada con la siguiente función y descoméntela:

• setContext()

Ejemplo: Recepción de variables al iniciar la conversación (con variables estáticas).

Luego, busque la función que se muestra a continuación y modifique sus parámetros para pasar los datos deseados:

• webchat.setContextParam()

Ahora elegirá cuándo desea recibir las variables context de su sitio web.

Para recibirlas al iniciar la conversación, mantenga la función:

• webchat.onConversationStart = function() { setContext() }

Y luego elimine la función:

• webchat.onOpenWebchat = function() { setContext() }

Para recibirlas cuando el Chat Widget esté abierto, mantenga la función:

• webchat.onOpenWebchat = function() { setContext() }

Y luego elimine la función:

• webchat.onConversationStart = function() { setContext() }

Los nombres de las variables que ha añadido a la función que se muestra a continuación corresponden a los argumentos de Studio:

• webchat.setContextParam()

Abra el Studio flow de Touchpoint en modo de edición. Seleccione el componente Incoming Message, añada los argumentos y asigne las variables de flujo correspondientes:

• "Argument name": Copie el nombre de la variable que ha añadido al código del widget dentro de la función "webchat.setContextParam" y péguelo en el cuadro de entrada de argumentos.
• “Map to flow variable”: Para las variables existentes, debe aplicarse la siguiente nomenclatura:
  • argumento que recopila el nombre ➞ contact_name
  • argumento que recopila el número ➞ contact_number
  • argumento que recopila el correo electrónico ➞ contact_email
• Se puede aplicar cualquier otro nombre de variable para cualquier otro argumento.

Complete la configuración de Studio flow y haga clic en Save para guardar sus configuraciones.

Posibles aplicaciones de las variables de contexto

Mostrar contexto adicional a los agentes

En la sección "Manage context" del Studio flow del Touchpoint, puede definir el contexto que se mostrará a sus agentes. Para hacerlo, abra Studio flow en el modo de edición y haga clic en este botón: . Luego, seleccione las variables a las que desea que su agente tenga acceso durante la conversación de chat.

Ejemplos recibidos de la pantalla inicial y un ejemplo recibido del sitio web.

Rellenado previo de la tarjeta de datos de contacto

Al recibir el nombre, el número de teléfono y la dirección de correo electrónico del visitante, puede rellenar la tarjeta de datos de contacto.

Para ello, necesita exponer esas variables como contexto en la sección "Manage contex". Abra Studio flow en el modo de edición y haga clic en: . Luego, seleccione las variables correspondientes a los datos de contacto.

Nota: Si obtiene un número de teléfono válido, el agente tendrá la posibilidad de elegir ese número al hacer clic para llamar al visitante.

Enrutado de conversaciones basadas en declaraciones condicionales

Con el componente Conditional Statement, puede enrutar una conversación de chat a una cola que coincida con las condiciones predefinidas. 

Puede utilizar las variables de contexto para establecer estas condiciones y, posteriormente, utilizar el componente "Assign agents to message" para establecer la cola a la que se debe enrutar la conversación de chat.

Otras posibles aplicaciones

Existen varios usos para las variables context dentro de los diferentes componentes de Studio, por ejemplo, asignar una conversación a un ring group basándose en el valor de la variable en el componente "Assign agents to message".

Estas variables también se pueden pasar a sistemas externos a través de integraciones o automatizaciones que es posible configurar dentro del sistema de Talkdesk.

Identificación de visitantes

En la Conversations app, un visitante se identificará como "Visitor #NNN" si no se crea o asigna ningún Contact al visitante durante la conversación de chat.

Nota: Si se rellena el campo "Name" de la tarjeta "Contact Details", se identificará al visitante por ese nombre en la pestaña Assigned to you, incluso si el contacto no se ha guardado.

En Reporting, un visitante será identificado como "Visitor #NNN" si no se ha creado o asignado ningún Contact al visitante cuando se esté gestionando una conversación de chat.

La identificación de los visitantes puede hacerse manual o automáticamente en función de cómo se consiga la información de contacto. Las opciones son:

• El contacto se crea o identifica manualmente cuando los datos son proporcionados por el visitante:
  • Opción 1: El visitante facilitará la información solicitada y el agente rellenará la tarjeta "Contact Details" y luego la guardará como un nuevo contacto o la fusionará con un contacto existente.
  • Opción 2: El visitante rellenará la información solicitada en la pantalla inicial del Widget de Chat, y el agente validará la información que se ha rellenado en la tarjeta "Contact Details". Luego puede guardarse como un nuevo contacto o fusionarse con uno ya existente.

En estos casos, si el mismo visitante vuelve a ponerse en contacto y facilita la misma información de contacto, Talkdesk no identificará al visitante automáticamente.

Nota: El contacto no se crea automáticamente, para permitir a los agentes verificar la fiabilidad de la información proporcionada. Este paso es esencial, ya que no existe ninguna forma de prevenir que los usuarios introduzcan datos de contacto incorrectos o erróneos en el formulario previo a la conversación, incluida la posibilidad de introducir la información de contacto de otra persona.

• El contacto se crea o identifica automáticamente cuando los datos son proporcionados por su sistema al recibir la información de contacto de su sitio web, con la función "Chat User Identification".

Esta función le permite enviar la dirección de correo electrónico o el número de teléfono del visitante a Talkdesk, a través de una variable designada en el código del Widget de Chat. Cuando el visitante inicia una conversación por chat, el sistema recibe el número de teléfono o la dirección de correo electrónico del visitante y luego lo guarda automáticamente como nuevo contacto o lo relaciona con un contacto existente.

En este caso, si el mismo visitante vuelve a ponerse en contacto, Talkdesk identificará al contacto.

La función "Chat User Identification" es útil para las secciones del sitio web que exigen la autenticación del usuario. Con esta función, los visitantes pueden ser identificados de forma fiable, garantizando que la información que se envía procede del usuario que inicia la conversación de chat.

Nota: Talkdesk solo creará el contacto si el número de teléfono o la dirección de correo electrónico recibidos tienen un formato válido.

Creación e identificación de un contacto manualmente

Cuando el visitante proporciona la información de contacto, los agentes tienen que decidir si crear (o no) un nuevo contacto o asignar (o no) la conversación de chat a un contacto existente. Esto se debe a que el agente necesita validar la información facilitada.

Uso de un formulario previo a la conversación para recopilar la información de contacto

Vaya a "Admin" > "Channels" > "Chat" > "Touchpoint". Abra la pestaña "Appearance" y haga clic en Edit.

Amplíe la sección de la pantalla inicial. Ahora, añada campos personalizados y defínalos como "Contact name", "Contact number" y "Contact email".

Haga clic en "save" y compruebe los argumentos de Studio.

Abra el Studio flow del Touchpoint en modo "Edit". Seleccione el componente Incoming Message y añada los argumentos de la siguiente manera:

• field_name1 > contact_name
• field_number1 > contact_number
• field_email1 > contact_email

Complete la configuración según sus requisitos y presione Save.

Haga clic en el botón y seleccione las variables de los datos de contacto:

Cómo funciona

Si no solicita la información de contacto por adelantado, sus agentes tendrán que hacer la petición de esa información durante la conversación de chat. 

Luego deben copiar y pegar esa información en la tarjeta "Contact Details" y después guardarla como un nuevo contacto o fusionarla con uno ya existente.

Si utiliza la pantalla inicial para hacer la petición de la información de contacto por adelantado, la tarjeta "Contact Details" se rellenará con esa información.

Luego los agentes deben validar qué información quieren conservar y guardarla como un nuevo contacto o fusionarla con uno ya existente.

Creación e identificación de un contacto automáticamente

La función "Chat User Identification" ofrece un proceso automatizado para crear e identificar a los visitantes que inician una conversación de chat con sus agentes. 

Los visitantes pueden ser identificados por su número de teléfono o dirección de correo electrónico.

Pasos de configuración

En primer lugar, busque la siguiente función en el código del widget:

• webchat.setContextParam()

Para enviar el número de teléfono del visitante (en formato E.164) o la dirección de correo electrónico desde su sitio web al sistema Talkdesk, utilice la siguiente variable:

• td_contact_person_identification

Nota: Los datos se tienen que recibir en un formato válido.

Asegúrese de mantener una o dos de las siguientes funciones en esa sección del código del widget:

• webchat.onConversationStart = function() { setContext() }
• webchat.onOpenWebchat = function() { setContext() }

Cómo funciona

Si la variable "td_contact_person_identification" se completa con un número de teléfono o una dirección de correo electrónico válidos, el sistema buscará un número de teléfono y una dirección de correo electrónico coincidentes en la lista "Contacts".

• Si no encuentra ninguna coincidencia, se crea automáticamente un nuevo contacto. El nombre, el número de teléfono o la dirección de correo electrónico se rellenarán con el valor de la variable.
• Si encuentra una única coincidencia, se identificará el contacto.

• Si encuentra varias coincidencias, el sistema dará la opción de elegir entre varios contactos coincidentes.

Notas:

• Si el valor de la variable está vacío o tiene un formato no válido, el sistema no creará ni identificará visitantes automáticamente. El procedimiento manual será el que se deberá seguir. Para obtener más información, consulte esta sección.
• Si se proporciona el número de teléfono o la dirección de correo electrónico en la pantalla inicial, el sistema anulará esa información con respecto a la creación e identificación del contacto.

Recursos adicionales