Integración en una Web

Si ya tenemos un sitio web y queremos incorporar nuestro Bot publicado, tendremos que seguir estos simples pasos.

Incluir el script

En cualquier lugar antes del cierre de la etiqueta html body, incluye la importación del script del Widget:

<script src="https://chat.wannabot.io/public/widget.js"></script>

Te recomendamos que sea al final del body, en lugar del head, ya que el Bot no influirá en el SEO de tu página, y por lo tanto es mejor que la carga del script se realice al final y así no afecte la carga de elementos más importantes.

Una vez incluida la etiqueta que carga el script del Widget, estamos listos para crearlo y personalizarlo a nuestros requerimientos. Para ello, abrimos una etiqueta <script> y comenzamos:

Inicialización del Bot

Lo primero que debemos hacer es crear una nueva instancia de nuestra Clase Wannabot. Luego, definimos el chat que se vamos a mostrar en el Widget, seteando la ID de la publicación.

let wannabot = new Wannabot();
wannabot.setId('59c308ba91e19d572485f83c');

Es importante inicializar el Widget una vez cargado el <body> , ya que de lo contrario generará un error de manipulación del DOM

La ID de la publicación la puedes obtener en la URL de tu Bot publicado en Web: http://chat.wannabot.io/59c308ba91e19d572485f83c

Personalización del Botón

El botón que abre / cierra nuestro Bot, se puede personalizar de múltiples maneras:

// CONTENEDOR
// Definimos si el boton de wannabot va a estar dentro del elemento DOM especificado, de lo contrario, estará en la raíz del body
// Puede recibir una cadena de texto con una clase CSS o una ID, o puede recibir un elemento DOM directamente
wannabot.setElement('.prueba');

// Abre el contenedor del Chat
wannabot.openContainer();

// ····························································
// CONVERSACIÓN
// Indicamos la ID de la conversación que deseamos mantener con el Bot
wannabot.setSessionToLoad('...');

// ····························································
// HEADER
// Por defecto es TRUE, si se establece a FALSE no se mostrara el header del chat
wannabot.setHeader(true);

// ····························································
// INPUTS
// Por defecto es TRUE, si se establece a FALSE no se mostraran los inputs para que el usuario pueda escribir o responder
wannabot.setInputs(true);

// ····························································
// LAYOUT
// Define donde va a estar colocado el boton de Wannabot
// Primer valor 'top' | 'bottom'
// Segundo valor 'right' | 'left'
wannabot.setPosition('top', 'left');

// Define el margen que va a tener el botón con respecto al borde de la pantalla (en píxeles)
// Primer valor es en el eje Y
// Segundo valor es en el eje X
wannabot.setMargins(50, 150);

// ····························································
// APARIENCIA DEL BOTÓN
// Define si el botón esta oculto al terminar la carga del Widget
// Por defecto FALSE, si se establece a TRUE en cualquier momento, se ocultará.
wannabot.setButtonHide(false);

// Define si el botón se ocultará al cerrar la caja de chat
// Por defecto FALSE
wannabot.setButtonHideOnClose(false);

// Define el ancho y alto del botón de wannabot (píxeles)
wannabot.setButtonSize(80);

// Sustituye el botón de wannabot por el html indicado
wannabot.setButtonHtml('<div class="prueba">Prueba</div>');

// Define la url de la imagen a mostrar en el bóton
wannabot.setButtonImage('https://www.miwuki.com/wp-content/uploads/2016/11/gatito-830x623.jpg');

// ····························································
// APARIENCIA DE LA CAJA DE CHAT
// Define el color de fondo de la capa contenedora del pre-load
// Por defecto #FFFFFF
wannabot.setLoadingBgColor('#333333');

// Define el html que va dentro de la capa contenedora de loading
// Por defecto, muestra un spiner indicando la carga
wannabot.setLoadingContent('<div>Cargando...</div>');

// Define el alto de la caja de chat (píxeles)
wannabot.setHeight(300);

// Define el ancho de la caja de chat (píxeles)
wannabot.setWidth(300);

// Sustituye la imagen del Logo establecido en la apariencia del Bot publicado
wannabot.setHeaderLogoUrl('https://www.miwuki.com/wp-content/uploads/2016/11/gatito-830x623.jpg');

// Sustituye el color del botón de cerrar
wannabot.setHeaderButtonColor('#0307ff');

// Sustituye el color de fondo del boton de cerrar
wannabot.setHeaderButtonBgColor('#ff00e9');

// Sustituye el color de fondo del header
wannabot.setHeaderBgColor('#06ff0c');

// Se tiene que llamar antes del wannabot.init() y solo se actualizaran las variables si la sesión se crea nueva.
// Primer parametro: token de autenticación (Mas info: https://wannabot.gitbook.io/conversaciones)
// Segundo parametro: Variables de sessión | Tercer parametro: Variable globales (Mas info: https://wannabot.gitbook.io/conversaciones/actualizar)
wannabot.setVarsOnCreate('fcaf25d791fb45c397fa331f3b387cdb', {name: 'Pepito'}, {count_n: 22});

// Se puede llamar antes y despues del wannabot.init() si se llama antes se esperara a la creación de la sesión para setear las variable
// Primer parametro: token de autenticación (Mas info: https://wannabot.gitbook.io/conversaciones)
// Segundo parametro: Variables de sessión | Tercer parametro: Variable globales (Mas info: https://wannabot.gitbook.io/conversaciones/actualizar)
wannabot.setVarsNow('fcaf25d791fb45c397fa331f3b387cdb', {name: 'Pepito'}, {count_n: 22});
PreviousWeb WidgetNextIntegración Webview

Last updated