API Webchat Widget

Conecta con tus clientes para fidelizar.

Descripción General

Para la instalación del widget en la página del cliente, previamente se debe haber contratado el canal y haber completado el formulario de configuración respectivo.

En las siguientes secciones indicaremos cómo debe implementar el widget en su página web.

Instalación estándar

Paso 1:

Agregar el script que carga los componentes en la página del cliente.

<script src="https://cdn-widgets.chattigo.com/webchat-widget-new.js" id="widget-chattigo" title="did@del@cliente"></script>

Para Google Tag Manager se configura de la siguiente manera.

<script src="https://cdn-widgets.chattigo.com/webchat-widget-new.js"></script>
<script>
    var e = document.createElement("div");
    for (e.innerHTML = "\x3capp-widget-root did\x3d'did@del@cliente' remote\x3d'true'\x3e\x3c/app-widget-root\x3e"; e.firstChild;) document.body.appendChild(e.firstChild);
    widget = document.querySelector("app-widget-root");
    widget.init();
</script>

Descripción de propiedades

Fields	Type	Comentario
id	String	Para todos los casos “widget-chattigo”
title	String	Identificador del canal, entregado al cliente
remote	Boolean	Para todos los casos true

Ejemplo:

A continuación una implementación en una página html básica:

<!DOCTYPE html>
<html>
<head>
   <title>WebChat Chattigo Ofertas</title>
   <meta
           content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
           name="viewport"/>
   <meta content="telephone=no" name="format-detection"/>
   <meta content="no" name="msapplication-tap-highlight"/>
   <meta content="yes" name="apple-mobile-web-app-capable"/>
   <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
</head>
<body>
<script src="https://cdn-widgets.chattigo.com/webchat-widget-new.js" id="widget-chattigo" title="did@del@cliente"></script>
</body>
</html>

Funciones adicionales

Toogle

Da la funcionalidad de visibilidad y esconde el widget según su estado actual. Ver el siguiente ejemplo:

<script>
 
 widget = document.querySelector("app-widget-root");
  document.addEventListener("DOMContentLoaded", function () {
   widget.toogle();
 });
 
</script>

Visibility

Oculta o muestra el trigger o botón de inicio del widget, el parámetro de entrada determina su funcionalidad. Ver el siguiente ejemplo:

<script>
 
 widget = document.querySelector("app-widget-root");
  document.addEventListener("DOMContentLoaded", function () {
   widget.visibilityWC(false); //widget iniciado pero oculto
 });
 
</script>

Expand

Muestra el panel del widget (el trigger queda visible). Ver el siguiente ejemplo:

<script>
 
 widget = document.querySelector("app-widget-root");
  document.addEventListener("DOMContentLoaded", function () {
   widget.expandChat();
 });
 
</script>

Collapse

Oculta el widget (el trigger queda visible). Ver el siguiente ejemplo:

<script>
 
 widget = document.querySelector("app-widget-root");
  document.addEventListener("DOMContentLoaded", function () {
   widget.expandChat();
   widget.collapseChat();
 });
 
</script>

Logout

Termina la sesión del webchat (misma funcionalidad que terminar chat), se puede aplicar esta función en cualquier momento que el cliente esté en chat con el agente. Ver el siguiente ejemplo:

<script>
 
 widget = document.querySelector("app-widget-root");
  document.addEventListener(“DOMContentLoaded”, function () {
   widget.init();
 });
  widget.logout();
 
</script>

Start Chat

Inicia el chat con un primer mensaje sin necesidad de desplegar la página de inicio pasando directamente a la bandeja de conversación.

Descripción de objeto DATA

Fields	Type	Comentario
msisdn	String	Id para cada cliente que de uso del widget
content	String	Contenido de un mensaje que dara inicio al chat
campaignId	Integer	Identificador de la campaña la cual el chat sera recibido. (Opcional)
name	String	Nombre del cliente que da uso del widget

{
   "msisdn": "",
   "name": "",
   "content": "",
   "campaignId": ""
}

Ver el siguiente ejemplo:

<script>
 
 widget = document.querySelector("app-widget-root");
  var data = {
   "msisdn": "25778899-1",
   "name": "My Name Is",
   "content": "Hello",
   "campaignId": 12
 };
  document.addEventListener("DOMContentLoaded", function () {
   widget.init();
   widget.startChat(data);
 });
 
</script>

Start Chat Agent

Inicia el chat con el identificador del usuario seleccionado sin necesidad de desplegar la página de inicio pasando directamente a la bandeja de conversación. Ver el siguiente ejemplo:

<script>
 
 widget = document.querySelector("app-widget-root");
  var idAgente = 285
  document.addEventListener("DOMContentLoaded", function () {
   widget.init();
   widget.initChatWithAgent(idAgente);
 });
 
</script>