Crisp: Un potente sistema de chat para tu sitio web

Los servicios de Chat Online para soporte al cliente existen desde hace más de una década, sin embargo, en los últimos años han evolucionado y están en auge gracias al acelerado avance de las tecnologías Web.

JavaScript, sockets, HTML5, solicitudes asíncronas, entre otras tecnologías, han hecho que este tipo de sistemas de chat se reconviertan en potentes herramientas de marketing y captura de prospectos.

Una de las mejores herramientas del mercado de este tipo es Crisp.chat. A pesar de que existen diversas opciones más para elegir, Crisp llama particularmente la atención por su potente SDK amigable con los programadores y por la gran cantidad de otras herramientas con la que se puede conectar y sincronizar, incluso en su versión gratuita.

A continuación veremos cómo registrar una cuenta gratuita en Crisp, cómo integrarlo a tu sitio web y cómo hacer uso de algunas funciones básicas, pero potentes, de su SDK.

Cómo crear una cuenta en Crisp

Para registrar una cuenta en Crisp, debes dirigirte primero a https://app.crisp.chat/initiate/signup/ donde verás un sencillo formulario de registro de tres pasos que te guiará en la creación de la cuenta gratuita.

Una vez que hayas completado el paso de registro, instantáneamente recibirás en tu dirección de correo electrónico un email con el código para integrar el chat en tu sitio Web.

Este email también te mostrará instrucciones de integración para plataformas específicas como WordPress, Prestashop o WHMCS que pueden ser útiles pero, en esencia, solo hace falta que incrustes en tu sitio el código genérico que recibiste. Una vez hecho esto lo que verás será algo así:

Antes de integrar funciones más avanzadas seguramente quieras revisar la configuración básica de Crisp para tu negocio, por ejemplo, el horario de atención, el mensaje de bienvenida, notificaciones, el idioma del chat, entre otras variadas opciones.

Posiblemente lo más importante a configurar es el horario de atención del Chat. Sería ideal configurar el horario de oficina donde alguno de los miembros de tu equipo de trabajo pueda atender a las solicitudes o preguntas de los clientes rápidamente. Si configuramos nuestros días y horario de oficina entonces el Chat solo se verá disponible en esos días y horarios. ¡No hay nada peor que tener un chat de atención al cliente y no atenderlo!

Y listo. De esta forma tan sencilla ya tienes el chat de Crisp básico integrado en tu sitio web. Cualquier visitante podrá iniciar una conversación contigo. Solo hará falta que te mantengas en línea en Crisp, donde recibirás los mensajes de tus clientes, o que instales la APP Mobile de Crisp para recibir los mensajes y chatear desde tu teléfono.

Integración Avanzada

Lo divertido aún no comenzó. Lo que vimos hasta ahora es la integración de un Chat común y corriente. Pero a continuación utilizaremos el SDK de JavaScript de Crisp para mejorar nuestro Chat. Haremos lo siguiente:

1. Enviar un mensaje automatizado depende la sección del sitio en que se encuentre el visitante.

2. Abrir el chat cuando el visitante presione un link o botón de nuestro sitio

3. Integrar el Chat con nuestro propio sistema de usuarios

Enviar un mensaje automatizado depende la sección del sitio

Para enviar un mensaje desde JavaScript al chat activo en nuestro sitio podemos usar el método $crisp.push() de la siguiente forma:

$crisp.push(["do", "message:show", ["text", "¡Hola, esto es una prueba!"]]);

A esta función podemos mezclarla con algunas más, por ejemplo, dentro de los métodos disponibles podemos identificar varios valores boolean que nos da información sobre el estado del Chat. Supongamos que queremos mostrar el mensaje anterior solamente si el chat se encuentra disponible, es decir, dentro de las horas activas que configuramos en nuestra cuenta de Crisp. Lo podemos hacer de la siguiente forma:

if($crisp.is("website:available"))
{
    $crisp.push(["do", "message:show", ["text", "¡Hola, esto es una prueba!"]]);
}

Pero hagámoslo más interesante. Digamos que solamente queremos mostrar un mensaje al usuario si ha estado en la página 30 segundos, solo si la URL que el usuario está visitando contiene el texto “/servicios/”, es decir, que el usuario esté viendo la página de servicios específicamente, y si el Chat está en el horario de disponibilidad. Podríamos hacer algo como lo siguiente:

if(window.location.href.indexOf("/servicios/") > -1)
{
    setTimeout(function()
    {
        if($crisp.is("website:available"))
        {
            $crisp.push(["do", "message:show", ["text", "¡Hola, esto es una prueba!"]]);
        }        

    },30000);
}

Abrir el chat cuando el visitante presione un link o botón de nuestro sitio

Para este caso digamos que queremos colocar un botón o link de llamada a la acción y buscamos que, cuando el cliente toque este link, el chat se abra automáticamente. Lo podemos hacer de forma sencilla de la siguiente manera:

Nuestro link se vería algo así, colocándole la id AbrirCrisp:

<a href="#" id="AbrirCrisp">HABLEMOS AHORA</a>

Y utilizaríamos el evento click de JavaScript para capturar la acción del visitante de la siguiente forma:

document.getElementById("AbrirCrisp").onclick = function()
{
    $crisp.push(['do', 'chat:open']);
}

Integrar el Chat con nuestro propio sistema de usuarios

Para lograr este objetivo lo que vamos a utilizar son las funciones de “identificación” de Crisp que nos permiten almacenar ciertos valores para saber quien es el visitante que está interactuando con nosotros y, cuando el visitante inicie sesión en su cuenta de nuestra web, vamos a pasar a Crisp un valor de CRISP_TOKEN_ID, un identificador único que le haga saber a Crisp de que usuario se trata.

Esto sirve para dos cosas:

1. Al identificar al usuario estamos sincronizando la información del sistema de usuarios de nuestro sitio con  el chat de Crisp.

2. Este CRISP_TOKEN_ID que le pasamos al chat servirá para que el cliente conserve el historial de conversación que tengamos con él incluso si cierra su sesión e inicia en otro momento u otro dispositivo.

Primero, cuando el usuario esté logueado en nuestro sitio, vamos a pasar a Crisp los datos de ese usuario de la siguiente forma desde JavaScript:

$crisp.push(["set", "user:nickname", ["Luciano Joan Vergara"]]);
$crisp.push(["set", "user:email", ["[email protected]"]]);

Hecho este paso ya sabremos quién es el cliente que nos escriba un mensaje en el Chat.

El segundo paso es establecer el TOKEN. El valor del TOKEN debe ser lo más aleatorio y secreto posible. Idealmente te recomiendo que generes el TOKEN de forma secreta del lado del servidor. Esto es para que nadie pueda “alterar” este TOKEN de alguna forma que le permita ver una conversación de otro usuario.

Para motivos de este ejemplo vamos a establecer un TOKEN simple e inseguro desde JavaScript. Solo colocaremos la ID del usuario:

Para hacer este cambio debes definir el valor de CRISP_TOKEN_ID antes de iniciar el chat en el código que incrustaste en tu sitio en un principio. Tu código debería quedar algo parecido a lo siguiente:

$crisp = [];
CRISP_TOKEN_ID = 'ID_DE_NUESTRO_USUARIO';
CRISP_WEBSITE_ID = 'xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
(function(){d=document;s=d.createElement('script');s.src='//client.crisp.chat/l.js';s.async=1;d.getElementsByTagName('head')[0].appendChild(s);})();

Sencillo pero potente ¿Cierto?

Toda la documentación de los métodos que utilizamos en este post la puedes encontrar aquí.

Hay muchas más funciones que explorar de Crisp, solo hemos dado un vistazo, pero ahora sabes que Crisp es mucho más que solo un lindo Chat.

Todo lo que hemos visto puedes hacerlo con el plan gratuito de Crisp pero hay otras integraciones y funciones de las que podrás disponer adquiriendo un plan pago. Si deseas que nuestros expertos de Diblet te ayuden a integrar Crisp en tu sitio Web no dudes en contactarnos. ?

---