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

# Integración en una Web

## Incluir el script

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

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

{% hint style="info" %}
&#x20;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.
{% endhint %}

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.

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

{% hint style="danger" %}
Es importante inicializar el Widget una vez cargado el `<body>` , ya que de lo contrario generará un error de manipulación del DOM&#x20;
{% endhint %}

{% hint style="info" %}
La ID de la publicación la puedes obtener en la URL de tu Bot publicado en Web: `http://chat.wannabot.io/`**`59c308ba91e19d572485f83c`**&#x20;
{% endhint %}

#### Personalización del Botón

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

```javascript
// 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});
```
