Implementación de chat en vivo (QSC)

Acerca de la implementación del 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 ofrece una experiencia conversacional fluida al cliente.

Introducción al chat en vivo

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 Live Chat se añada a su cuenta, se le proporcionará un ID de integración único y un ID de aplicación. Guarde estos ID para más adelante.

Personalización de su chat en vivo

Una vez que Live Chat esté habilitado para su cuenta, puede encontrarlo en el Gerente de perfil. 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 se inicie 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 está en el Gerente de perfil, haga clic en Vista previa para ver el fragmento de código de su chat en vivo. 

Copie este código y asígnelo a su equipo de TI. Deberán añadir el código a la cabecera o al cuerpo del sitio web en el que desean que aparezca el chat en vivo.

Una vez agregado, 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 el chat en vivo con CSS.

Creación automática de casos

Al utilizar Live Chat, 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 añadir 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ágina web. Esto permite a los agentes ver desde qué página web está chateando el cliente. Para agregar seguimiento de página web, deberá agregar código adicional al fragmento de código para Chat en vivo.

1. En el 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ódigos 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 desde qué página web ha chateado el cliente.

Rompehielos

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

Para agregar un rompehielo, deberá agregar 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ódigos en la nueva línea:

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

4. En el fragmento de código anterior, puede ajustar los valores en negrita para personalizar su rompehielo. Es posible que tenga que 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 de rompehielo.
   • 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 HEX de color. Esta propiedad es obligatoria.
   • textColor: el color del texto. Introduzca un código HEX de color. Esta propiedad es obligatoria.
   • borderWidth: 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á frontera.
   • borderColor: el color del borde. Introduzca un código HEX de color. 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 rompehielo 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 rompehielo tendrá por defecto una altura de 50 píxeles.
5. Su icono de chat en vivo ahora tendrá un mensaje de rompehielo junto a él.

Flujos

Puede agregar flujos a su chat en vivo para automatizar las respuestas a través de su 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 explicará 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. Diríjase a la pestaña Gerente de perfil y utilice el menú desplegable Enviar flujo al iniciar para seleccionar un flujo.
3. Puede seleccionar 3 flujos adicionales para adjuntar a cada mensaje saliente dando a los clientes varias opciones, como iniciar el chat de nuevo o cambiar el idioma de soporte.

Horario de apertura y disponibilidad del 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.

1. Siga esta guía para integrar su sitio web con la API de conexión social de Qualtrics.
2. Llame 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 mediante este punto final.
4. Recibirá un resultado que tiene este aspecto:

   {"name":"Mi programación","períodos":[{"dayofweek":1,"start":"0900","end":"1900"},{"dayofweek":1,"day":"1300","end":"1900"},{"dayday","end":"1900""start""inicio""900""inicio":"00":"inicio""inicio""900""fin""1","00","fin":"inicio": 1800""inicio""900""fin":"900","0900","00","fin":"inicio": 1800""inicio""1","00":"inicio": 1800""inicio":"900""fin":"900","inicio","00","inicio": 1800""inicio""900","900""0900","00","fin":

5. Puede utilizar esta información para habilitar 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.