Instalación

Instalar el widget de Jelou usando un cargador o CDN.

Existen dos métodos para instalar nuestro Widget: utilizando nuestro cargador o importando el script desde nuestro CDN.

Usando el Cargador (Recomendado)

• Instalación rápida

Importar el script del cargador: https://cdn.jelou.ai/widgets/loader.js

Atributos disponibles:

Atributo	Descripción
data-version	Especifica una versión
data-api-key	Clave API del Widget
data-user-id	ID del usuario, si no se especifica se generará automáticamente un UUID
data-user-names	Propiedads del usuario
data-init	Especifica si el widget debe iniciarse automáticamente o no

El siguiente ejemplo es la implementación más básica del widget y la más recomendada. Solo los atributos del ejemplo son necesarios para que funcione correctamente.

Ejemplo

<script
  src="https://cdn.jelou.ai/widgets/loader.js"
  data-api-key="<someKey>"
  data-init="true"
></script>

info

Si deseas acceder a la instancia del Widget, debes iniciar manualmente el Widget y suscribirte al evento de carga inicial.

Usando CDN

Instalación paso a paso con acceso al objeto del widget.

Importa el Script

<script defer src="https://cdn.jelou.ai/widgets/loader.js"></script>

Añade un listener de eventos para el script cargador

Crear una instancia de WidgetService

  document.addEventListener('jelou-widget:load', () => {
      const widgetService = new WidgetService({ apiKey: '<apiKey>' });
  });

Conectar WidgetService

    document.addEventListener('jelou-widget:load', () => {
        const widgetService = new WidgetService({ apiKey: '<apiKey>' });
        widgetService.connect({ names: "<someName>" }).then(() => {
            console.log("¡Éxito! 🚀")
        });
    });

Parámetros recibidos por el método connect

{
  "type": "Connect",
  "id": "string | number",
  "names": "string?",
  "useGroupRoom": "boolean?",
  "initialFlow": "number?",
  "userInfo": "Object?" // Estos datos pueden ser usados para derivar los flujos del bot
}

Ejemplo

widgetService
  .connect({
    id: "999999999",
    names: "Jhon",
    userInfo: {
      address: "St 3",
      ci: 1234567,
    },
  })
  .then(() => {
    console.log("¡Éxito! 🚀");
  });

A continuación se presentan 2 ejemplos de la implementación completa del CDN. Se recomienda usar el primero, sin parámetros en la función connect, solo un objeto vacío.

Usuarios invitados

document.addEventListener("jelou-widget:load", () => {
  const widgetService = new WidgetService({ apiKey: "<apiKey>" });
  widgetService.connect({}).then(() => {
    console.log("¡Éxito! 🚀");
  });
});

Usuarios registrados

<script defer src="https://cdn.jelou.ai/widgets/loader.js"></script>
<script>
    document.addEventListener('jelou-widget:load', () => {
        const widgetService = new WidgetService({ apiKey: '<apiKey>' });
        widgetService.connect({ id: '<someId>', names: "<someName>" }).then(() => {
            console.log("¡Éxito! 🚀")
        });
    });
</script>

Iniciar con un skill del bot

someFlowId es el número de identificación de un flujo específico del bot que está siendo utilizado por el widget.

<script defer src="https://cdn.jelou.ai/widgets/loader.js"></script>
<script>
    document.addEventListener('jelou-widget:load', () => {
        const widgetService = new WidgetService({ apiKey: '<apiKey>' });
        widgetService.connect({ initialFlow: '<someFlowId>' }).then(() => {
            console.log("¡Éxito! 🚀")
        });
    });
</script>

Iniciar con un skill del bot y parámetros almacenados

someFlowId es el número de identificación de un flujo específico del bot que está siendo utilizado por el widget, y someStringValue es el valor en cadena de los parámetros inyectados.

<script defer src="https://cdn.jelou.ai/widgets/loader.js"></script>
<script>
    document.addEventListener('jelou-widget:load', () => {
        const widgetService = new WidgetService({ apiKey: '<apiKey>' });
        widgetService.connect({}).then((instance) => {
            instance.setFlow(
                '<someFlowId>',
                {
                    param1: "<someStringValue>",
                    param2: "<someStringValue2>",
                    ...
                    paramN: "<someStringValueN>",
                }
            );
        });
    });
</script>