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});
