Plantilla de artículo

Acerca de la implementación del chat en vivo

Live Chat es una función de Qualtrics Social Connect que le permite agregar un servicio de chat en vivo a su sitio web. Cuando los clientes hacen clic en este chatbot, se crea una mención en su cuenta de Social Connect para que un agente actúe. Cuando un agente responde a esta mención, la respuesta proviene del chatbot, brindando una experiencia de conversación fluida al cliente.

Introducción al chat en vivo

El chat en vivo es un complemento de su licencia de Qualtrics . Contacto con tu Ejecutivo de Cuenta para comenzar a utilizar el chat en vivo. Una vez que se agregue el chat en vivo a su cuenta, se le proporcionará una cuenta única ID de integración y un Identificación de la aplicación. Guarde estos ID para más tarde.

Personalización de su chat en vivo

Una vez que el chat en vivo esté habilitado para su cuenta, puede encontrarlo en el gerente de perfiles. Aquí puedes personalizar aspectos de tu chat en vivo, como:

• La aspecto visual y operativo de la ventana de chat (colores y logotipo).
• Agregue los dominios de sitios web en los que debe aparecer la ventana de chat.
• Elija un flujo que comience cuando un cliente envía un mensaje inicial.
• Adjunte una respuesta rápida a cada mensaje saliente.

Consulte la página de perfil de chat en vivo para obtener más información.

Cómo agregar un chat en vivo a su sitio web

Mientras que en el gerente de perfiles, haga clic Avance para ver el fragmento de código de su chat en vivo. 

Copia este código y entrégaselo a tu equipo de TI. Tendrán que agregar el código a cualquiera de los dos encabezamiento o cuerpo del sitio web en el que quieren que aparezca el chat en vivo.

Una vez agregado, el chat en vivo aparecerá en la esquina inferior derecha de su sitio web. Luego puedes personalizar aún más tu chat en vivo ajustando el CSS. Ver Esta página de soporte externo para obtener más información sobre cómo personalizar su chat en vivo con CSS.

Creación automática de casos

Al utilizar el chat en vivo, le recomendamos encarecidamente que habilite creación automática de casos. Esto agrupará automáticamente los mensajes de la misma conversación en un hilo en lugar de agregar cada mensaje como una mención individual.

Seguimiento de páginas web

Si tiene su chat en vivo en varias páginas web, le recomendamos agregar seguimiento de páginas web. Esto permite a los agentes ver desde qué página web está chateando el cliente. Para agregar seguimiento de páginas web, deberá agregar código adicional al fragmento de código para el chat en vivo.

1. En el fragmento de código existente, busque la siguiente línea de código:

   ClarabridgeChat.init({appId: 'identificación-de-integración'}).then(() => {

2. Insertar un salto de línea.
3. Agregue el siguiente bloque de código en la nueva línea:

   ClarabridgeChat.setDelegate({
   
   beforeSend(mensaje) {
   
   metadatos = {
   
   ...mensaje. metadatos,
   
   origenTítulo: documento.título,
   
   origenUrl: ventana.ubicación.href
   
   };
   
   mensaje de retorno;
   
   }
   
   });

4. Las menciones ahora le mostrarán desde qué página web chateó el cliente.

Rompehielos

Un rompehielos es un mensaje breve que aparece siguiente al ícono de chat en vivo en su sitio web. A menudo actúa como un aviso para atraer la atención del cliente hacia el chat en vivo como un recurso si tiene preguntas. En el siguiente ejemplo, la frase para romper el hielo es “¿Podemos ayudarle?”.

Para agregar un rompehielos, deberá agregar código adicional al fragmento de código para su chat en vivo:

1. Encuentre las siguientes líneas de código en su fragmento de código existente:

   ClarabridgeChat.init({
   
   // integrationId: 'your_integration_id', // Utilice este O appId
   
   appId: '', // Utilice este O integrationId

2. Insertar un salto de línea.
3. Agregue el siguiente bloque de código en la nueva línea:

   rompehielos : {
   
   retraso: 1000,
   
   texto: '¿Podemos ayudarle?',
   
   estilos: {
   
   color de fondo: '#9FFF04',
   
   textoColor: '#F420F5',
   
   Ancho del borde: '1px', //
   
   color del borde: '#EAFD10',
   
   ancho: '150px', //
   
   altura: '40px' //
   
   }
   
   },

4. En el fragmento de código anterior, puedes ajustar los valores en negrita para personalizar tu rompehielos. Es posible que necesites pedir ayuda a tu equipo de TI. A continuación se presentan algunos consejos para cada campo:
   • demora: La cantidad de tiempo que el cliente debe pasar en la página antes de que aparezca el rompehielos. Introduzca un período de retraso en milisegundos.
   • texto:Ingrese el mensaje para romper el hielo.
   • estilos:Estas son propiedades CSS adicionales para personalizar la apariencia del rompehielos. Algunos son obligatorios mientras que otros son opcionales. Continúe leyendo para obtener más información sobre cada propiedad.
   • color de fondo:El color de fondo. Introduzca un código de color HEX. Esta propiedad es obligatoria.
   • textoColor:El color del texto. Introduzca un código de color HEX. Esta propiedad es obligatoria.
   • Ancho del borde:El ancho del borde de la burbuja que muestra el mensaje. Introduzca un ancho en píxeles. Esta propiedad es opcional. Cuando se excluye, el rompehielos no tendrá borde.
   • color del borde:El color del borde. Introduzca un código de color HEX. Esta propiedad es necesaria si se utiliza borderWidth.
   • ancho:El ancho de la burbuja rompehielos. Introduzca un ancho en píxeles. Esta propiedad es opcional. Si se excluye, el rompehielos tendrá un ancho predeterminado de 150 píxeles.
   • altura:La altura de la burbuja rompehielos. Introduzca una altura en píxeles. Esta propiedad es opcional. Si se excluye, el rompehielos tendrá una altura predeterminada de 50 píxeles.
5. Tu ícono de chat en vivo ahora tendrá un mensaje para romper el hielo al siguiente .

Flujos

Puedes agregar Flujos a su chat en vivo para automatizar respuestas a través de su chat en vivo. Visita la página vinculada para obtener más información sobre la creación de flujos. Esta sección cubrirá cómo agregar un flujo a su chat en vivo.

1. Pegue el siguiente bloque de código después del fragmento de código original del chat en vivo:

   ClarabridgeChat.on(' widget:abierto', () => {
   
   ClarabridgeChat.createConversation();
   
   });

2. Diríjase a la pestaña gerente de perfiles y utiliza el Enviar flujo al iniciar menú desplegable para elegir un flujo.
3. Puede seleccionar 3 flujos adicionales para adjuntar a cada mensaje saliente, brindando a los clientes varias opciones, como iniciar el chat nuevamente o cambiar el idioma de soporte.

Horario comercial y disponibilidad de los agentes

Puedes limitar tu chat en vivo para que solo esté disponible durante tu Horario comercial y cuando los agentes están en línea y disponibles. Para ello, es necesario que integres tu chat en vivo con la API de Qualtric Social Connect. También debes crear tu horario comercial.

1. Seguir Esta guía para integrar su sitio web con la API de Qualtrics Social Connect.
2. Llamar Este punto final para recuperar su ID de horario comercial.
3. Utilice su ID comercial para luego recuperar el horario comercial utilizando Este punto final.
4. Recibirás un resultado parecido al siguiente:

   {"name": "Mi horario", "periods": [{"dayofweek": 1,"start": "0900", "end": "1200"},{"dayofweek": 1,"start": "1300", "end": "1900"},{"dayofweek": 2,"start": "0900", "end": "1800"},{"dayofweek": 3,"start": "0900", "end": "1100"},{"dayofweek": 3,"start": "1200", "end": "1600"},{"dayofweek": 5,"start": "0900", "end": "1800"},{"dayofweek": 6,"start": "0900", "end": "1200"},{"dayofweek": 6,"start": "1300", "end": "1900"}]}

5. Puedes utilizar esta información para habilitar el chat en vivo únicamente durante el horario laboral.
6. También puede utilizar la misma llamada API para recuperar información sobre los agentes disponibles y deshabilitar el chat en vivo si no hay ninguno disponible.