Cómo adicionar un bot en un un sitio web utilizando Blip Chat

Índice:

1. Integrar un bot a un sitio web como un widget
2. Integrar un bot en un sitio web de forma incrustada

Integrar tu bot a una página web con Blip es muy sencillo. Para eso, deberás publicar tu bot en el canal de Blip Chat.

El canal permite que un bot se integre en un sitio web de dos formas diferentes:

• como un widget;
• incrustado (embedded) en el sitio web, junto al cuerpo HTML del sitio web.

Antes de comenzar, ve al portal Blip y elige el bot que deseas colocar en tu sitio.

Integrar un bot a un sitio web como un widget

1. ​Haz clic en el módulo Canales (en el portal de Blip) y elige el canal Blip Chat.
   
2. Haz clic en la pestaña Configuración e ingresa el dominio de los sitios en los que deseas colocar Blip Chat.

Observación: esta es una operación obligatoria. Por razones de seguridad, tu bot solo funcionará en páginas cuyo dominio haya sido previamente habilitado en el portal Blip. En el ejemplo de la imagen a continuación, Blip Chat solo se cargará en páginas cuyo dominio sea tudominio.com

3. Haz clic en la pestaña Instalación, copia el script presentado y pégalo en el body de tu página web.

Integrar un bot en un sitio web de forma incrustada

1. Repite los mismos 3 pasos del modo de integración como un widget.
2. Realiza un cambio en el script copiado en el portal

El script de integración estándar de Blip Chat es idéntico al script a continuación (con la excepción de la clave, que es única para cada bot).

<script src="https://unpkg.com/blip-chat-widget" type="text/javascript">

</script>

<script>

   (function () {

      window.onload = function () {

         new BlipChat()

                    .withAppKey('YOUR-BLIP-CHAT-KEY')

                    .withButton({"color":"#2CC3D5"})

                    .build();

      }

})();

</script>

Para incrustar la interfaz en un elemento HTML con 'your-element-id' de tu sitio, cambia el script de la siguiente manera:

<script src="https://unpkg.com/blip-chat-widget" type="text/javascript">

</script>

<script>

   (function () {

      window.onload = function () {

         new BlipChat()

                    .withAppKey('YOUR-BLIP-CHAT-KEY')

                    .withButton({"color":"#2CC3D5"})

                    .withTarget('your-element-id')

                    .build(options);

      }

})();

</script>

Observaciones:

* Independientemente de la forma de integración, aún son posibles algunos ajustes para personalizar la experiencia del usuario con la interfaz de Blip Chat. Para consultar todos los detalles, haz clic aquí^[a].

* Para conocer la configuración avanzada del script de Blip Chat en la web, consulta el proyecto en GitHub.