Implementación de chat en tiempo real (QSC)

Acerca de la implementación de chat en vivo

Chat en vivo es una función de conexión social de Qualtrics 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, lo que brinda 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. Póngase en contacto con su ejecutivo de cuentas para comenzar a utilizar el chat en vivo. Una vez que el chat en vivo se agrega a su cuenta, se le proporcionará un ID de integración único y un ID de 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 Gestor de perfiles. Aquí puede personalizar aspectos de su chat en vivo, como:

• El aspecto de la ventana de chat (colores y logotipo).
• Añada los dominios del sitio web en los que debe aparecer la ventana de chat.
• Seleccione un flujo que empiece cuando un cliente envíe un mensaje inicial.
• Adjunte una respuesta rápida a cada mensaje saliente.

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

Añadir chat en vivo a su sitio web

Mientras que en el Gestor de perfiles, haga clic en Vista previa para ver el fragmento de código de su chat en vivo. 

Copie este código y dárselo a su equipo de TI. Necesitarán agregar el código a la cabecera o al cuerpo del sitio web en el que desean que aparezca el chat en vivo.

Una vez añadido, el chat en vivo aparecerá en la esquina inferior derecha de su sitio web. A continuación, puede personalizar aún más su chat en vivo ajustando el CSS. Consulte 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 la 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ágina web

Si tiene su chat en vivo en varias páginas web, le recomendamos que agregue seguimiento de páginas web. Esto permite a los agentes ver de qué página web habla el cliente. Para añadir el seguimiento de la página web, tendrá que añadir código adicional al fragmento de código para el chat en vivo.

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

   ClarabridgeChat.init({ appId: 'integration-id' }).then(() => {

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

   ClarabridgeChat.setDelegate({
   
    beforeSend(message) {
   
    message.metadata = {
   
    ...message.metadata,
   
    originTitle: document.title,
   
    originUrl: window.location.href
   
    };
   
    return message;
   
    }
   
    });

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

Rompehielos

Un rompehielos es un mensaje corto que aparece junto al icono de chat en vivo en su sitio web. A menudo actúa como una señal para llamar la atención del cliente hacia el chat en vivo como un recurso si tienen preguntas. En el siguiente ejemplo, “¿Podemos ayudarlo?” es el rompehielos.

Para añadir un rompehielos, tendrá que añadir código adicional al fragmento de código para su chat en vivo:

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

   ClarabridgeChat.init({
   
    // integrationId: 'your_integration_id', // Use this OR appId
   
    appId: '', // Use this OR integrationId

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

   rompehielos: {
   
    retraso: 1000,
   
    texto: "¿Podemos ayudarle?",
   
    estilos: {
   
    backgroundColor: '#9FFF04',
   
    textColor: '#F420F5',
   
    borderWidth: '1px', //
   
    borderColor: '#EAFD10',
   
    width: '150px', //
   
    high: '40px' //
   
    }
   
    },

4. En el fragmento de código anterior, puede ajustar los valores en negrita para personalizar su rompehielos. Es posible que deba pedir ayuda a su equipo de TI. A continuación se muestran consejos para cada campo:
   • Retraso: La cantidad de tiempo que el cliente necesita pasar en la página antes de que aparezca el rompehielos. Introduzca un período de retraso en milisegundos.
   • texto: Introduzca el mensaje del rompehielos.
   • Estilos: Estas son propiedades CSS adicionales para personalizar el aspecto del rompehielos. Algunos son obligatorios, mientras que otros son opcionales. Siga leyendo para obtener más información sobre cada propiedad.
   • backgroundColor: El color de fondo. Introduzca un código de color HEX. Esta propiedad es obligatoria.
   • textColor: El color del texto. Introduzca un código de color HEX. Esta propiedad es obligatoria.
   • borderWidth: El ancho del borde de la burbuja que muestra el mensaje. Indique un ancho en píxeles. Esta propiedad es opcional. Cuando se excluye, el rompehielos no tendrá un borde.
   • borderColor: El color del borde. Introduzca un código de color HEX. Esta propiedad es obligatoria si se utiliza borderWidth.
   • Anchura: La anchura de la burbuja del rompehielos. Indique 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 del rompehielos. Indique una altura en píxeles. Esta propiedad es opcional. Si se excluye, el rompehielos tendrá por defecto una altura de 50 píxeles.
5. Su icono de chat en vivo ahora tendrá un mensaje de rompehielos al lado.

Flujos

Puede añadir flujos a su chat en vivo para automatizar las respuestas a través del chat en vivo. Visite la página enlazada para obtener más información sobre la creación de flujos. En esta sección se explica cómo añadir un flujo a su chat en vivo.

1. Pegue el siguiente bloque de código después de su fragmento de código de Live Chat original:

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

2. Navegar a la Gestor de perfiles y utilice el menú desplegable Enviar flujo al inicio para seleccionar un flujo.
3. Puede seleccionar 3 flujos adicionales para adjuntarlos a cada mensaje saliente y ofrecer a los clientes varias opciones, como iniciar el chat o cambiar el idioma de soporte.

Horario de apertura y disponibilidad de agente

Puede limitar su chat en vivo para que solo esté disponible durante su horario laboral y cuando los agentes estén en línea y disponibles. Esto requiere que integre su chat en vivo con la API Qualtric Social Connect. También debe crear su horario de apertura programado.

1. Siga esta guía para integrar su página web con la API de conexión social de Qualtrics.
2. Llame a este punto final para recuperar su ID de horario de apertura.
3. Utilice su ID empresarial para recuperar la programación del horario de apertura utilizando este punto final.
4. Recibirá un resultado que se verá así:

   {"name":"My program","period":[{"dayofweek":1,"start":"0900","end":"1200"},{"dayofweek":1,"start":"1300","end":"1900"},{"dayofweek":2,"start":"0900","end":"end":"0"{"18}, {"18}"

5. Puede utilizar esta información para activar el chat en vivo solo durante las horas de trabajo.
6. También puede utilizar la misma llamada API para recuperar información sobre los agentes disponibles y desactivar el chat en vivo si no hay ninguno disponible.