¿Cómo podemos ayudar?

Talkdesk Digital Engagement: Chat Channel para Administradores
Última Actualización

 

Este artículo sirve como guía completa para configurar e integrar el widget de chat en su sitio web, proporcionando así a sus clientes la opción de ponerse en contacto con sus servicios y agentes a través del chat.

Siga los pasos detallados en este artículo para utilizar el canal de chat en todo su potencial. Añada valor a su sitio web configurando e integrando perfectamente el widget de chat, garantizando su disponibilidad para los clientes.

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

 

Crear un Chat Touchpoint

Para crear un nuevo “Chat touchpoint”, vaya a “Admin” > “Channels” > “Chat”, y haga clic en el botón Create touchpoint.

Se abrirá una ventana emergente en la que se le pedirá que indique el dominio (obligatorio) y el nombre descriptivo (obligatorio) del nuevo punto de contacto de chat. Haga clic en Create.

 

El nuevo punto de contacto de chat será ahora visible en la lista y estará inactivo por defecto. Haga clic en el dominio del punto de contacto para completar su configuración.

Localice la sección “Touchpoint” y haga clic en Edit. 

Ahora puede seleccionar el flujo de Studio que debe asignarse al nuevo punto de contacto 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í, usted tiene la opción de personalizar el contenido del widget de chat, tales como:

  • Welcome message (Mensaje de bienvenida).
  • Fields "Campos" (información del cliente).
  • Dropdowns "Desplegables" (e.g. selección del idioma).
  • Messages "Mensajes" (información valiosa).
  • Actions buttons "Botones de acción" (e.g. “Start chat”).

Integra el widget de chat en las páginas deseadas de tu sitio web. Esto puede hacerse mediante iframe (opción recomendada) o mediante script. Compruebe la sección “Widget Integration” para más información.

Después de integrar el widget de chat en su página web, vaya a “Admin” > “Channels” > “Chat” > Touchpoint.

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

Ahora ya puede activar el punto de contacto del chat al deslizar el toggle “Status”. Guarde su progreso.

Vuelva a cargar su sitio web y podrá ver el widget de chat en las páginas web en las que estaba integrado.

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

 

Dominio

  • Protocols and ‘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, y funcionará para todas las combinaciones.

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

 

Touchpoint Domain (Dominio del Touchpoint) URL
talkdesk.com http://www.talkdesk.com
https://www.talkdesk.com
http://talkdesk.com
https://talkdesk.com
  • Se admiten los Subdomains (subdominios).
  • Subdirectories (sub-directorios) no son admitidos.

Excepciones del Firewall

Cuando se inicia una conversación de chat, se llama a algunas URL que deben atravesar el firewall. Por lo tanto, añada las siguientes URL como excepciones del cortafuegos:

  • https://api.talkdeskapp.com
  • https://talkdeskchatsdk.talkdeskapp.com
  • https://sessions.bugsnag.com
  • wss://tsock.us1.twilio.com/v3/wsconnect
  • https://prd-cdn-talkdesk.talkdesk.com
  • https://cdn.jsdelivr.net

Política de seguridad del CSP

Si su sitio web utiliza la policia de securidad del CSP, poner estos dominios en la lista blanca:

  • https://mcs.us1.twilio.com
  • wss://tsock.us1.twilio.com
  • https://api.talkdeskapp.com
  • https://talkdeskchatsdk.talkdeskapp.com

Securidad 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, incluida la lectura y escritura de cookies de fuentes de terceros, tales como Talkdesk Chat. En consecuencia, puede bloquearse su carga y, por lo tanto, es posible que el lanzador de chat no se muestre en el sitio web.

Recomendamos añadir Talkdesk Chat a la configuración de cookies de confianza. Para ello:

  • Inicie sesión en la cuenta OneTrust.
  • Navegue hasta la sección de configuración de cookies y busque las cookies asociadas al Talkdesk Chat Widget y cambiar su categorización a "Strictly Necessary";
  • Dependiendo de su modelo de consentimiento, puede que tenga que actualizar la configuración de su banner de consentimiento para asegurarse de que los usuarios pueden dar su consentimiento para las cookies asociadas a Talkdesk Chat Widget.
  • Una vez realizados estos cambios, prueba tu sitio web para asegurarte de que el widget de chat se carga como es debido.

Chat App

Accede a Workspace y vaya a “Admin” > Channels. En la pestaña “Channels list”, vas a encontrar el canal “Chat”. Introdúzcalo para configurar todos los puntos de contacto del chat.

  • Channels list: Los canales disponibles en su cuenta. Seleccione Chat para configurar los puntos de contacto de los canales.
  • Global settings: Ajustes aplicables a uno o más canales. Ej. la definición del peso de la ocupación de cada conversación de cada canal.
  • Templates: Crear mensajes pre-escritas para ayudar 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 puntos de contacto qué están configurados para el chat. 

Utilice el botón Create new touchpoint para crear un nuevo punto de contacto. Una vez que dé el clic al este botón, le va a pedir el dominio de la página web e un friendly name para el punto de contacto. 

Al hacer clic en el botón “More options” (...), va a poder:

  • Editar el chat touchpoint.
  • Editar la apariencia del chat.
  • Duplicar las configuraciones de apariencia a un nuevo punto de contacto (se le pedirá el dominio e el friendly name).
  • Activar o deactivar el punto de contacto.
  • Elimine el punto de contacto (sólo es posible si primero se desactiva el chat. Nota: Ten en cuenta que también tienes que eliminar el código del widget de la página web).

Chat Touchpoint

Para cada chat del punto de contacto, hay trés pestañas: 

  • “Touchpoint”
  • “Appearance”
  • “Setting”

Una vez que abra el punto de contacto, se le redirige a la pestaña "Touchpoint" en el modo de visualización.

  • “Touchpoint”: En esta pestaña, puedes establecer el dominio de tu sitio web, asignar un flujo de Studio y copiar el código del widget para añadirlo a tu sitio web. Nota:El fragmento de código solo está disponible en el modo de visualización.
  • “Appearance”: En la pestaña, va a poder configurar la funcionalidad y el comportamiento del widget de chat. 
  • “Settings”: En esta pestaña, va a poder configurar la vista previa de los permisos de la conversación en la aplicación Inbox con base en los puntos de contactos 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, va a estar en el modo de visualización. Para pasar al modo de edición, haga clic en el botón Edit para empezar a configurar su punto de contacto de chat.

Utilice “Domain” para añadir la página web del URL where you want the widget to appear (check the available guidelines aquí). En el campo “Friendly name”, proporcionar un friendly name para el punto de contacto, lo que significa que este será el nombre que se mostrará a los agentes.

A continuación, seleccione en el menú desplegable el flujo de Studio que se asignará al punto de contacto.

Al configurar el chat por la primera vez, puede abrir el enlace Configure a Studio flow que le remitirá al Studio para que puedas crear un flujo de Studio.a

 

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

 

Deslice el toggle “Status” para activar o desactivar el punto de contacto del chat. Guarde su progreso.

 

: Una vez que el código de widget se añada a la página web, el widget del chat va a aparecer en cada página web del visitante. 

: Una vez desactivada, el vidget del chat va a desaparecer de la página web. Las conversaciones en curso no se van a perder, pero el visitante no va a poder empezar otra conversación. 

Nota: El botón Save solo va a ser activado una vez que se añada el dominio y seleccione el flujo de Studio. 

Después de guardar sus configuraciones, va a volver al modo de visualización, donde va a poder ver la configuración aplicada e el código del widget que deve estar añadido a su página web. 

En el “Domain Information”, puede ver el dominio, el nombre descriptivo del dominio y el flujo de Studio asignado.

Después de guardar las configuraciones de los puntos de contacto, se generará el código del widget. Compruebe esta sección para información en como se añade el código del widget a su  página web.

 

Nota: El código del widget solo se enseña en el modo de visualización.

 

Pestaña Appearance

Al ingresar en la pestaña “Appearance”, estarás en modo vista. Para cambiar al modo de edición, haga clic en el botón Edit para empezar a configurar la apariencia de su chat.

  • “General settings”: En esta sección, puede activar, desactivar y configurar los ajustes generales del widget de chat.
  • “Initial screen”: Aquí puedes activar o desactivar la pantalla inicial y cambiar su configuración.
  • “Chat”: Añade 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", podrás configurar sus características.

Utiliza el "Close conversation button" para activar o desactivar la posibilidad de que los visitantes cierren la conversación de chat.

Después de guardar tus configuraciones, volverás al modo de visualización, donde podrás 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á activada o no.

 

Initial Screen 

Al ampliar la pestaña “Initial screen”, va a poder activar y configurar sus componentes. 

Utilice el toggle “Show/Hide initial screen” para activar o desactivar la pantalla inicial del widget de chat.

Nota: El “Preview style” se actualizará cada vez que realice un cambio en sus componentes.

Añade una "Welcome message" en la parte superior del widget de chat para dar la bienvenida a tus visitantes. Puede estar compuesto por un título de hasta 20 caracteres, y/o un texto de hasta 120 caracteres.

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

A continuación, puede crear un formulario de preconversación para obtener información del visitante que puede utilizarse con fines de enrutamiento o para proporcionar contexto adicional a sus agentes.

Tenga en cuenta que, por defecto, hay un mensaje personalizado, un campo personalizado, un desplegable personalizado y un botón personalizado. Estos componentes por defecto no se pueden eliminar, pero solo se mostrarán si usted 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 desencadenar una acción. Actualmente, solo hay una opción de activación: “Start the chat”.

 

Nota: Active “Route conversation immediately after the user clicks this button”, si desea que el flujo de Studio se active en cuanto el usuario haga clic en el botón. Si está desactivado, el usuario debe enviar un mensaje para activar el flujo de Studio.

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

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

 

Nota: Como un 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” desde el 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 la opción "Chat bubble, el mensaje se mostrará dentro de una burbuja de chat.

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

 

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

 

El conmutador "Required" establece qué campos son opcionales u obligatorios antes de que el visitante pase a la pantalla de chat. Cada componente tiene 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 tus configuraciones, volverás al modo de visualización y verás 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 desplegable personalizado, se generará un valor de "Studio Argument". Cada argumento se puede asignar al componente “Incoming Message” del punto de contacto del flujo de Studio para dar contexto a los agentes o para fines de enrutamiento.

 

Chat Screen

Al ampliar la pestaña “Chat”, va a poder configurar la pantalla de chat.

Si la pestaña inicial está activada, la plantilla de chat se enseña cuando el visitante haga clic en el botón Start the chat. Si no hay pantalla inicial, la pantalla de 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 esté en la pantalla de chat.

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

 

Notas:

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

 

Pulsa el icono "Delete" para evitar que los mensajes aparezcan en la pantalla de chat.

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

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

 

Pestaña Settings

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

 

Conversation Preview

Con la opción "Conversation Preview", tienes 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: Permite activar o desactivar la vista previa de las conversaciones. Si está activada, los usuarios autorizados podrán previsualizar todas las conversaciones de este punto de contacto.
  • Authorized roles: Cuando la opción "Allow previews" está activada, puede seleccionar los roles que pueden previsualizar las conversaciones del punto de contacto.

 

Integración del Chat Widget

Integración del Widget via iframe (opción recomendada)

Para integrar un widget de chat en tu sitio web mediante iframe, sigue estos pasos:

 

Paso 1: Crear 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);

          /*

           * Send custom data from your website to TalkDesk!

           * If you would like to do it, you need to remove the following commented code and

           * modify the webchat.setContextParam parameters to pass in the data you need.

           */

           /*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",

  { flowId: "TOUCHPOINTID", accountId: "", region: "REGION" },

        { enableEmoji: true, enableUserInput: true, enableAttachments: true }

      );

    </script>

<!-- End of Talkdesk Code -->

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

El touchpointId corresponde al ID del touchpoint de chat, y el region corresponde a la región donde está alojada su cuenta.

Ambos valores se pueden encontrar en la página de configuración del touchpoint (en modo vista):

  • Vaya a “Admin” > “Channels” > “Chat” > “Touchpoint”.
  • En la pestaña “Touchpoint” en modo vista, localice la sección del código del widget.
  • En el código del widget, localiza la línea 45, y allí encontrarás los valores de touchpointID y region que debe reemplazar en el archivo HTML que creó anteriormente.

Alternativamente, puede encontrar el valor de touchpointId y region en la barra de URL del navegador web mientras visita la página de configuración del punto de contacto:

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

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

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

Notas:

  • El ID del touchpoint puede identificarse por medio de flowId o touchpointId. El antiguo flowId se sustituyó por touchpointId para que no se confundiera con el ID del Studio Flow. Actualmente se admiten ambas versiones.
  • Para personalizar el widget, añade el objeto styles con las claves de personalización y sus valores después de enableAttachments: true y before }.

 

Paso 2: Crear un archivo CSS

Crear un archivo CSS nombrado chat-iframe.css, que contiene 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 realiza en el archivo CSS. Este archivo CSS está destinado únicamente al iframe y no al widget en sí.


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

Por fin, añada el <link> y <iframe> para su página 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>

 <link rel="stylesheet"

href="https://customer-website.com/chat-iframe.css">

  </head>

  <body>

    <h1>Customer website</h1>
   <iframe id="chat-iframe" class="chat-iframe chat-iframe-close" allowtransparency="true"

"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. Para más información, consulte aquí.

 

Integración del Widget via Script

Acceda a  “Admin” > “Channels” > “Chat” > “Touchpoint”. En la pestaña Touchpoint en el modo de visualización, localice la sección del 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ópialo en todas las páginas en las que quieras que aparezca el widget de chat.

 

Personalización del Chat Widget

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 más información.

 

Context Variables

El componente de paso inicial en el flujo “Incoming Message” en Studio permite traer contexto procedente del widget de chat.

Es posible recoger variables de contexto de las siguientes maneras:

  • Data provided by the visitor: Solicitar información en la pantalla inicial mediante campos personalizados y desplegables personalizados. A continuación, el visitante rellenará la información solicitada.
  • Data provided by your system: Recibir información de su sitio web cuando el visitante abre el widget de chat o cuando inicia una conversación de chat.

 

Nota: Puedes utilizar ambas vías al mismo tiempo.

 

Las variables recopiladas deben asignarse al componente "Incoming Message" del flujo de Studio asignado al punto de contacto de chat. Después de eso, puede utilizarlas para gestionar qué variables desea presentar a sus agentes como contexto adicional para fines de enrutamiento, o crear integraciones con otras aplicaciones de chat. Talkdesk Products.

 

Context Variables Recibidos desde la Initial Screen (Pantalla Inicial)

Vaya a “Admin” > “Channels” > “Chat” > “Touchpoint”, abra la pestaña “Appearance”, y haga clic en el botón Edit. Habilite la pantalla inicial y añada los campos que recogerán el contexto que necesita. Para más detalles, consulte esta sección.

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

Abra el flujo Studio del punto de contacto en modo de edición. Seleccione el componente Incoming Message  añade los argumentos y asigna los respectivos variables del flujo:

  • “Argument name”: Copie el nombre del argumento del campo que se muestra en la pestaña "Appearance" (modo de vista) 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
  • Para cualquier otro argumento, cualquier otro nombre del variable puede ser aplicado.

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

 

Context Variables Recibidos desde la Página Web

En el código del widget, localiza la sección comentada con la función que se muestra a continuación y descoménsala:

  • setContext()

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

Luego, localice 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 contextuales de su sitio web.

Para recibirlos cuando se inicie la conversación, mantenga la función:

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

Y, a continuación, elimine la función:

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

Para recibirlos cuando el widget de chat está abierto, mantenga la función:

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

Y, a continuación, elimine la función:

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

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

  • webchat.setContextParam()

Abra el flujo Studio del punto de contacto en modo de edición. Seleccione el componente Incoming Message, añada los argumentos y asigne los respectivos variables del flujo:

  • “Argument name”: Copie el nombre de la variable que ha añadido al código del widget dentro de la etiqueta de la función “webchat.setContextParam” y pégalo en el cuadro de introducción de argumentos.
  • “Map to flow variable”: Para las variables existentes, debe aplicarse la siguiente nomenclatura:
    • argument that collects name ➞ contact_name
    • argument that collects number ➞ contact_number
    • argument that collects email ➞ contact_email
  • Para cualquier otro argumento, cualquier otro nombre de la variable puede ser aplicado.

Finaliza la configuración del flujo de Studio y Guarde sus configuraciones.

 

Aplicaciones Posibles para Context Variables

Mostrar contexto adicional a los agentes

En la sección “Manage context” del flujo Studio del punto de contacto, puede definir el contexto que se mostrará a sus agentes. Para ello, abra el flujo Studio en modo de edición y haga clic en este botón: . A continuación, 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 de la página web.

 

Rellenar previamente la tarjeta de datos de contacto

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

Para ello, debe exponer esas variables como contexto en la sección "Manage context". Abra el flujo de Studio en modo de edición y haga clic en

: . A continuación, 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.

 

Conversaciones de ruta basadas en Conditional Statements

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

Puede utilizar las variables de contexto para establecer estas condiciones y, posteriormente, utilizar la función de la componente “Assign agents to message” para establecer la cola a la que debe dirigirse la conversación de chat.

Otras Aplicaciones Posibles

Hay varios usos para las variables de contexto dentro de los diferentes componentes de Studio, por ejemplo, asignar una conversación a un grupo de anillos 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 del Visitante

Screenshot

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

 

Nota: Si el campo “Name” de la tarjeta “Contact Details” está rellenada, el visitante se identificará con ese nombre en el campo Assigned to you, aunque no se guarde el Contacto.

Screenshot

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

La identificación del visitante puede hacerse manual o automáticamente en función de cómo se obtenga la información de contacto. Las posibilidades son:

  • Contact is created or identified manually when the data is provided by the visitor: 
    • Option 1: El visitante proporcionará la información solicitada, y el agente rellenará el campo de la tarjeta “Contact Details” y, a continuación, guárdelo como un nuevo contacto o combínelo con un contacto existente.
    • Option 2: El visitante rellenará la información solicitada en la pantalla inicial del widget de chat, y el agente validará la información rellenada en la tarjeta "Contact Details". A continuación, 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 se proporciona la misma información de contacto, Talkdesk no identificará al visitante automáticamente.

Nota: El Contact no se crea automáticamente para permitir a los agentes 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 preconversació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 por medio de la recepción de la información de contacto de 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 de chat, el sistema recibe el número de teléfono o la dirección de correo electrónico del visitante y, a continuación, lo guarda automáticamente como un nuevo contacto o lo empareja con un contacto existente.

En este escenario, si el mismo visitante contacta de nuevo, Talkdesk identificará el 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.

 

Crear e Identificar un Contacto manualmente

Cuando la información de contacto es proporcionada por el visitante, los agentes deben 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 proporcionada.

 

Uso de un Pre-Conversation Form para recoger la información de contacto

Diríjase a “Admin” > “Channels” > “Chat” > “Touchpoint”. Abra la pestaña “Appearance” y haga clic en Edit.

Despliegue 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 comprueba los argumentos de Studio.

Abra el flujo Studio del punto de contacto en modo "Edit". Seleccione el componente Incoming Message y añadir los argumentos, y añadir los argumentos de la siguiente manera:

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

Termine 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 solicitarla durante la conversación de chat.

A continuación, deben copiar/pegar esa información en la tarjeta "Contact Details" y luego guardarla como un nuevo contacto o fusionarla con uno ya existente.

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

A continuación, los agentes deben validar qué información desean conservar y guardarla como un nuevo contacto o fusionarla con uno ya existente.

 

Crear e Identificar un Contacto automaticamente

La función “Chat User Identification” proporciona 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

Primero, localiza 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 variable:

  • td_contact_person_identification

 

Nota: Los datos deben recibirse en un formato válido.

 

Asegúrese de mantener una o ambas 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 rellena 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 creará automáticamente un nuevo contacto. El nombre y el número de teléfono/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.

Notes:

  • Si el valor de la variable está vacío o tiene un formato no válido, el sistema no creará ni identificará automáticamente a los visitantes. Será necesario seguir el procedimiento manual. Para saber más, 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 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.