Talkdesk Digital Engagement: Canal de Chat para Administradores

Este artículo sirve de guía completa para configurar e integrar el widget de chat en su sitio web, y así 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 el widget de chat, garantizando su disponibilidad para los clientes.

Para facilitar la navegación, utilice el siguiente índice:

 

Excepciones del Firewall

Cuando se inicia una conversación de chat, se llama a algunas URL que tienen que pasar a través del Firewall. Por lo tanto, añada las siguientes URL como excepciones del Firewall:

  • https://api.talkdeskapp.com
  • https://talkdeskchatsdk.talkdeskapp.com
  • wss://tsock.us1.twilio.com/v3/wsconnect
  • https://prd-cdn-talkdesk.talkdesk.com
  • https://cdn.jsdelivr.net
  • https://media.us1.twilio.com
  • https://mcs.us1.twilio.com
  • https://api.talkdeskapp.eu
  • wss://tsock.ie1.twilio.com/v3/wsconnect
  • https://mcs.ie1.twilio.com
  • https://media.ie1.twilio.com
  • https://*.dynatrace.com

Política de seguridad de CSP

Si el sitio web del cliente tiene activada la función de política de seguridad CSP, es necesario añadir algunas listas blancas para permitir que el chat funcione con normalidad.

  • https://mcs.us1.twilio.com
  • wss://tsock.us1.twilio.com
  • https://api.talkdeskapp.com
  • https://talkdeskchatsdk.talkdeskapp.com
  • https://media.us1.twilio.com
  • https://api.talkdeskapp.eu
  • https://*.dynatrace.com
  • https://mcs.ie1.twilio.com
  • wss://tsock.ie1.twilio.com
  • https://media.ie1.twilio.com

 

Ejemplos de Configuración del CSP

  • script-src 'self' talkdeskchatsdk.talkdeskapp.com
  • connect-src 'self' api.talkdeskapp.com api.talkdeskapp.eu api.talkdeskappca.com wss://tsock.us1.twilio.com wss://tsock.ie1.twilio.com mcs.us1.twilio.com mcs.ie1.twilio.com *.dynatrace.com
  • img-src 'self' data: blob: media.us1.twilio.com media.ie1.twilio.com
  • video-src 'self' data: blob: media.us1.twilio.com media.ie1.twilio.com
  • audio-src 'self' data: blob: media.us1.twilio.com media.ie1.twilio.com
  • frame-src 'self' api.talkdeskapp.com api.talkdeskapp.eu api.talkdeskappca.com

 

Seguridad OneTrust

Si su sitio web utiliza  OneTrust, tenga en cuenta que, como parte de su funcionalidad, OneTrust utiliza el comando OtAutoBlock.js para bloquear comportamientos sospechosos, incluida la lectura y escritura de cookies de fuentes de terceros como Talkdesk Chat. En consecuencia, puede bloquearse su carga y, por lo tanto, es posible que el ejecutor del chat no se muestre en el sitio web.

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

  • Inicie sesión en su cuenta de OneTrust.
  • Vaya a la sección de configuración de cookies y busque las cookies asociadas al Widget de Talkdesk Chat y cambie la clasificación a "Strictly Necessary";
  • Dependiendo de su modelo de consentimiento, es posible que tenga que actualizar la configuración de su anuncio de consentimiento para asegurarse de que los usuarios pueden dar su consentimiento a las cookies asociadas al Widget de Talkdesk Chat.
  • Una vez que haya efectuado estos cambios, pruebe su sitio web para asegurarse de que el widget de chat se carga como se espera.

 

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 en la que se le pedirá que indique el dominio (obligatorio) y el nombre descriptivo (obligatorio) del nuevo touchpoint de chat. Haga clic en Create.

El nuevo touchpoint de chat estará ahora visible en la lista y aparecerá inactivo por defecto. 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 debe asignarse al nuevo touchpoint de chat. Haga clic en Save para volver a la página de configuración.

Seleccione la pestaña   Appearance  y haga clic en Edit. Aquí puede personalizar el contenido del widget de chat:

  • 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 widget de chat en las páginas deseadas 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 más información.

Después de integrar el widget de chat 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 conmutador "Status". Guarde su progreso.

Vuelva a cargar su sitio web y debería poder ver el widget de chat en las páginas web en las que 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.".

Nota:  Es posible eliminar la información del protocolo, ya que funcionará para todas las combinaciones.

Dominio del Touchpoint URL
www.talkdesk.com http://www.talkdesk.com
https://www.talkdesk.com
http://talkdesk.com
https://talkdesk.com

 

Dominio del Touchpoint URL
talkdesk.com http://www.talkdesk.com
https://www.talkdesk.com
http://talkdesk.com
https://talkdesk.com
  • Se admiten subdominios.
  • No se admiten subdirectorio .

 

Crear una Instancia de Chat Regional

Cuando se crea un touchpoint de chat, se crea una instancia de chat regional basada en la región de despliegue 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:

Notas:

  • Los touchpoints de chat creados en la región de EE. UU. antes del 22 de mayo de 2024 seguirán conectándose con la instancia de chat regional correspondiente ubicada en los EE. UU. Si desea migrar la aplicación de chat regional de la UE existente a la instancia de chat de la UE, siga las instrucciones del PDF Migración de los Touchpoints de Chat de la UE (disponible para su descarga 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 de 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.

  • Channels list: Los canales disponibles en su cuenta. Seleccione Chat para configurar los Touchpoint del canal.
  • Global settings: Ajustes aplicables a uno o varios canales. Por ejemplo, la definición de la importancia de la ocupación de cada conversación para cada canal.
  • Templates: Cree mensajes previamente redactados para ayudar a los agentes a ser más eficientes.
  • Chat channel: Para configurar este canal, haga clic en la sección Chat dentro de la aplicación "Channels".
  • Number of touchpoints: Esta etiqueta indica el número de Touchpoint que ya se han configurado 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 Touchpoint de Chat, hay tres pestañas:

  • "Touchpoint"
  • "Appearance"
  • "Setting"

Una vez que abra un Touchpoint de Chat, se le redirigirá a la pestaña "Touchpoint" en el modo de visualización.

  • "Touchpoint": En esta pestaña, puede establecer el dominio de su sitio web, asignar un Studio 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.
  • "Appearance": En esta pestaña podrá configurar la funcionalidad y el comportamiento del Widget de Chat.
  • "Settings": En esta pestaña, podrá configurar el permiso de vista previa de conversaciones en la aplicación Inbox en función de los Touchpoint y los roles.

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 pasar 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", indique 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. Guarde su progreso.

 

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

 

: Al desactivarlo, el Widget de Chat 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 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.

 

Pestaña Appearance

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

  • "General settings": En esta sección puede activar, desactivar y configurar los ajustes generales del Widget de Chat.
  • "Initial screen": Aquí puede activar o desactivar la pantalla inicial y cambiar su configuración.
  • "Chat": Añada mensajes estáticos que se mostrarán cuando el visitante esté en el Widget de Chat. Si la pantalla inicial está activada, estos mensajes se mostrarán después de que el visitante haga clic en el botón para iniciar la conversación de chat.
  • "Preview style": Vista previa de las pantallas del Widget de Chat.

 

Ajustes Generales

Al desplegar la pestaña "General settings", en la sección Preview style aparecerá una vista previa del aspecto que tendrá el widget.

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

  • 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).
  • Typing indicator: activa/desactiva la visibilidad del indicador que señala que el agente o el contacto están tecleando (o que el Autopilot está cargando la respuesta).

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

 

Activar/desactivar la descarga de transcripciones de chat

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ú Más opciones (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. Se podrá acceder al archivo descargado desde la lista de descargas del navegador, para futuras referencias y para fines de registro.

 

Pantalla inicial

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

Utilice el conmutador "Show/Hide initial screen" para activar o desactivar la pantalla inicial del Widget de Chat.

 

Nota: El "Preview style" se actualizará cada vez que haga un cambio en sus componentes.

 

Añada un "Mensaje de bienvenida" en la parte superior del Widget de Chat para dar 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 (que puede etiquetar) para activar una acción. Actualmente, solo existe una opción de activación: "Start the chat".

 

Nota: Active la opción "Route conversation immediately after the user clicks this button" si desea que el Studio flow se active en cuanto el usuario haga clic en el botón. Si está desactivada, el usuario debe 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: A modo de 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" en el menú desplegable. En caso de que desee solicitar otro tipo de información (por ejemplo, el 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, ese componente personalizado desaparecerá de la pantalla inicial.

 

Nota: Los componentes por defecto no pueden eliminarse y, por lo tanto, es necesario eliminar su configuración para ocultarlos de la pantalla inicial.

 

El conmutador "Required" establece qué campos son opcionales y 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 sus 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á activada 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 puede asignarse al componente "Incoming Message" del Studio flow del Touchpoint para facilitar contexto a los agentes o con fines de enrutamiento.

 

Pantalla del Chat

Al desplegar la pestaña "Chat", podrá configurar la pantalla del chat.

Si la pantalla inicial está activada, la pantalla del chat se mostrará cuando el visitante haga clic en el botón Start the chat. Si no hay ninguna pantalla inicial, la pantalla del chat se mostrará en cuanto el visitante abra el Widget de Chat.

En "Messages", puede añadir mensajes estáticos que aparecerán una vez que el visitante se encuentre en la pantalla del chat.

Por defecto, hay una casilla de entrada para añadir un mensaje, pero solo se mostrará si la configura. Puede añadir tantos mensajes como desee haciendo clic en el botón Add another message.

 

Notas:

  • Todos los mensajes se mostrarán en una burbuja de chat.
  • Las URL añadidas a este elemento serán enlaces sobre los que se podrá hacer clic.

 

Pulse el icono "Delete" para evitar que los mensajes aparezcan en la pantalla del 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.

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 Widget de Chat.

 

Conectarse al Flujo de Comentarios

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 flujo de comentarios y poder crear una encuesta de chat.

Para desconectar una encuesta de chat del Touchpoint de chat, pulse el icono de la "X" ubicado a la derecha del nombre del flujo.

 

Pestaña Settings

En la pestaña "Settings", puede configurar los ajustes de nivel del Touchpoint, así como tener una visión general de la configuración actual de los ajustes disponibles. Haga clic en el botón Edit del Touchpoint deseado para configurar los ajustes.

 

Vista previa de la conversación

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: Toque 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 los roles que pueden previsualizar las conversaciones del Touchpoint.

 

Integración del Widget de Chat

Integración del Widget a través de iframe

Para integrar un widget de chat en su sitio web a través de iframe, siga estos pasos:

 

Paso 1: Cree un archivo HTML que contenga el código del Widget de Chat

Cree un archivo HTML llamado chat-iframe.html que contenga el siguiente fragmento de código:

<!-- Start of Talkdesk Code -->
<script>
var webchat;
((window, document, node, props, configs) => {
if (window.TalkdeskChatSDK) {
console.error("TalkdeskChatSDK already included");
return;
}
var divContainer = document.createElement("div");
divContainer.id = node;
document.body.appendChild(divContainer);
var src = `https://talkdeskchatsdk.talkdeskapp.com/talkdeskchatsdk.js`; var script = document.createElement("script");
var firstScriptTag = document.getElementsByTagName("script")[0];
script.type = "text/javascript";
script.charset = "UTF-8";
script.id = "tdwebchatscript";
script.src = src;
script.async = true;
firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
script.onload = () => {
const onOpen = () => {
const chatIframeElement =
window.parent.document.getElementById('chat-iframe');
if (chatIframeElement) {
chatIframeElement.className = 'chat-iframe chat-iframe-open'
}
}
const onClose = () => {
const chatIframeElement =
window.parent.document.getElementById('chat-iframe');
if (chatIframeElement) {
chatIframeElement.className = 'chat-iframe chat-iframe-close' }
}
webchat = TalkdeskChatSDK(node, props);
webchat.init(configs);
webchat.onOpen = onOpen;
webchat.onClose = onClose;
/*
* ¡Envíe datos personalizados desde su sitio web a Talkdesk!
* Si desea hacerlo, debe eliminar el siguiente código y
* modificar los parámetros webchat.setContextParam para pasar los datos que necesite.
*/
/*function setContext() {
webchat.setContextParam({ "var1": "value1", "var2": "value2", "var3": 100 })
}
// Send data when the chat conversation is initiated
webchat.onConversationStart = function() {
setContext()
}
// Send data when the chat widget is open
webchat.onOpenWebchat = function() {
setContext()
}*/
};
})(
window,
document,
"tdWebchat",
{ touchpointId: "TOUCHPOINTID", accountId: "", region: "REGION" },
{ enableValidation: false, enableEmoji: true, enableUserInput: true, enableAttachments: true }
);
</script>
<!-- End of Talkdesk Code -->

En la línea resaltada, los valores de "touchpointId" y "region" anteriores deben sustituirse por los correctos.

LaID del Touchpoin corresponde a la ID del Touchpoint de Chat, y "region " corresponde a la región en la que está alojada su cuenta.

Ambos valores se encuentran en la página de configuración del Touchpoint (en modo de visualización):

  • Vaya a "Admin" > "Channels" > "Chat" > "Touchpoint".
  • En la pestaña "Touchpoint" en modo de visualización, busque la sección del código del widget.
  • En el código del widget, busque la línea 45 y allí encontrará los valores touchpointID y region que necesita sustituir en el archivo HTML que creó anteriormente.

image1.png

También puede encontrar los valores touchpointId y region en la barra de URL del navegador web mientras visita la página de configuración del Touchpoint:

  • https://youraccount.mytalkdesk.DOMAINEXTENSION/atlas/apps/channels/livechat/touchpoint/TOUCHPOINTID

Y puede utilizar la siguiente correlación para conocer el valor de la región para cada extensión de dominio:

  • youraccount.mytalkdesk.com ➞ td-us-1
  • youraccount.mytalkdesk.eu ➞ td-eu-1
  • youraccount.mytalkdesk.ca ➞ td-ca-1

Notas:

  • La ID del Touchpoint puede identificarse mediante flowId o touchpointId. El antiguo flowId se sustituyó por touchpointId para que no se confundiera con la ID del Studio Flow. Actualmente se admiten ambas versiones.
  • Para personalizar el widget, añada los estilos del objeto con comandos de personalización y sus valores después de enableAttachments: true y before }.

 

Paso 2: Cree un archivo CSS

Cree un archivo CSS llamado chat-iframe.css, que contenga el siguiente código:

.chat-iframe {
border: none;
position: fixed;
bottom: 0;
right: 0;
z-index: 9999;
}
.chat-iframe-open {
width: 335px;
height: 600px;
right: 20px;
bottom: 20px;
border-radius: 8px;
box-shadow: 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%), 0 3px 5px -1px rgb(0 0 0 / 20%);
}
.chat-iframe-close {
width: 80px;
height: 90px;
}
@media only screen and (max-width: 600px), (max-height: 620px) { .chat-iframe-open {
min-width: 100%;
max-width: 100%;
right: 0;
top: 0;
min-height: 100%;
max-height: 100%;
bottom: 0;
}
}

 

Nota: La personalización del widget no se hace en el archivo CSS. Este archivo CSS está pensado solo para el iframe y no para el widget en sí.


Paso 3: Incluya el iframe y el estilo en su sitio web

Por último, añada un y un < iframe> a su sitio web (líneas 7 y 11):

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Customer website</title>
</head>
<body>
<h1>Customer website</h1>
<iframe id="chat-iframe" class="chat-iframe chat-iframe-close" allowtransparency="true"
src="https://customer-website.com/.chat-iframe.html"></iframe>
</body>
</html>

El archivo HTML (chat-iframe.html) y el archivo CSS (chat-iframe.css) tienen que estar en la misma carpeta que la página principal.

 

Integración del widget a través de secuencias de comandos

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

Seleccione el fragmento de código y haga clic en el botón Copy. Pegue el fragmento de código antes 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 Widget de Chat.

 

Personalización del Widget de Chat

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

 

Variables Context

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

Es posible recopilar variables context de las siguientes maneras:

  • Data provided by the visitor: Solicitar información en la pantalla inicial a través de Custom Fields y menús desplegables personalizados. Posteriormente, el visitante rellenará la información solicitada.
  • Data provided by your system: Recibir información de su sitio web cuando el visitante abra el Widget de Chat o cuando inicie una conversación de chat.

 

Nota: Puede utilizar ambos modos 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 Context Recibidas de 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. Para más información, consulte esta secció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:

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 respectivas:

  • "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, debe aplicarse la siguiente nomenclatura:
    • field_name1 > contact_name
    • field_number1 > contact_number
    • field_email1 > contact_email
  • En el caso de cualquier otro argumento, se puede aplicar cualquier otro nombre de variable.

Finalice la configuración según sus necesidades y haga clic en Save.

 

Variables Context Recibidas del 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 cuando se inicie la conversación, conserve la función:

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

Y luego elimine la función:

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

Para recibirlas cuando el Widget de Chat esté abierto, conserve 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 respectivas:

  • "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
  • Para cualquier otro argumento, se puede aplicar cualquier otro nombre de variable.

Finalice la configuración del Studio flow y guarde las configuraciones.

 

Posibles Aplicaciones de las Variables Context

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 ello, abra el Studio flow en 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.

 

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 el Studio flow en modo de edición y haga clic en:. Luego, seleccione las variables correspondientes a los datos de contacto.

 

Nota: Si recibe un número de teléfono válido, el agente podrá elegir ese número cuando haga clic para llamar al visitante.

 

Conversaciones Enrutadas Basadas en Sentencias Condicionales

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

Puede utilizar las variables context para establecer estas condiciones y, posteriormente, utilizar e componente "Assign agents to message"Assign agents to message" para establecer la cola a la que debe dirigirse 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

Screenshot

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", el visitante se identificará con ese nombre en la pestaña Assigned to you, aunque no se guarde el contacto.

Screenshot

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 el visitante facilita los datos:
    • 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 Contact no se crea automáticamente para que los agentes puedan verificar la fiabilidad de la información facilitada. Este paso es esencial, ya que no existe ninguna prevención para los datos de contacto incorrectos o erróneos introducidos por los usuarios en el formulario de conversación previa, incluida la posibilidad de introducir los datos de contacto de otra persona.

 

  • El contacto se crea o identifica automáticamente cuando los datos son facilitados por su sistema al recibir la información de contacto desde su sitio web, utilizando 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 Contact 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 Manual de un Contacto

Cuando la información de contacto es facilitada por el visitante, los agentes deben decidir si crean (o no) un nuevo contacto o asignan (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 de Conversación Previa para Recopilar la Información del 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. Añada los argumentos como se indica a continuación:

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

Finalice la configuración según sus necesidades y pulse 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 Automática de un Contacto

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 deben recibirse 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

Sila variable "td_contact_person_identification" contiene 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 que coincidan en la lista de "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á a los visitantes automáticamente. El procedimiento manual será el que se deberá seguir. Para más información, consulte esta sección.
  • Si se facilita el número de teléfono o la dirección de correo electrónico en la pantalla inicial, el sistema anulará esa información en lo que respecta a la creación e identificación de contactos.

 

Recursos adicionales

 

 

 

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