Base de Conocimiento

Back to support overview

Este caso de uso describe un ejemplo de implementación de varios métodos de WebChat SDK.

El ejemplo incluye un botón de "Ayuda" en el sitio web, que si se pulsa abre el webchat y desencadena un flujo específico.

 

1. Crea el Flujo que se enviará al usuario.

Esta guía asume que ya has creado un Flujo de acuerdo a tus deseos.

Como ejemplo, tenemos aquí un Flujo muy simple que pide al usuario que confirme si quiere ayuda. En caso afirmativo, el flujo le asigna un agente.

Para aprender a crear tu propio flujo, por favor consulta este artículo.

Mientras el editor de Flujo está abierto, copia el ID de Flujo para su uso posterior. El ID de Flujo se encuentra en la sección

 url: https://app.chatvisor.com/#/entities/flows/show/<FLOWID>.

En este ejemplo encontrarás nuestro Flujo ID is 5f17ecec3564c64604a1cc4b.

2. Implementa los métodos del SDK en tu sitio web

Primero necesitamos implementar los métodos API 'Open Chat' y 'Trigger Flow' en el sitio web. Su documentación se puede encontrar en aquí.

HTML

    Aquí creamos el botón que abrirá la ventana de chat y activará un flujo

<button onclick="getHelp()">Need help?</button>

JavaScript

Aquí es donde implementamos los métodos del SDK.

/** 

* open webchat and trigger 'Customer Help' flow
*/
function getHelp() {
    CV.webchat.open();
    CV.webchat.triggerFlow("5f17ecec3564c64604a1cc4b");
}

Esto abrirá la ventana de WebChat y activará un Flujo, ofreciendo al cliente una forma rápida de ponerse en contacto con un agente si lo necesita.

Documentación en   CV.webchat.open() and CV.webchat.triggerFlow() puedes encontrarla  aquí.

3. Check Result

Si el usuario pulsa ahora este botón en el sitio web, el chat se abrirá y se mostrará el flujo de la siguiente manera:

Otros casos posibles

Este caso de uso sólo utiliza 'Open Chat' y 'Trigger Flow', pero también hay métodos 'Show/Hide Chat' que permiten ocultar o mostrar completamente el botón de chat.

Con esto, y Flujos o Reglas de acción muchos más casos de uso son posibles.

  • Mostrar WebChat sólo cuando el usuario se haya desplazado hasta un punto determinado de la página (JS, API 'Open Chat')
  • Si el cliente hace clic en un botón de 'Ayuda', responder con un mensaje, etiquetar al cliente, asignarlo a un equipo específico y pedirle su información de contacto (JS, API 'Trigger Flow', Flow con elementos 'route to' y 'user input')
  • Habilitar WebChat sólo en función de la información del usuario, como escritorio/móvil, idioma, sitio web de referencia o motor de búsqueda (JS, API "Mostrar chat")
  • Habilitar WebChat después de que el usuario acepte sus cookies (JS, API "Abrir chat")
  • Dispón de un botón en tu sitio web que abra el chat,