Installation

How to Install

There are two methods to install our Widget, using our loader or importing the script from our CDN.

The main difference between these two methods is the following:

1. Loader: You will always get the latest version of our widget.

2. Script: You must manually import the script but you have more control on the version.

Using Loader ( Recommended )

• Fast installation

Import loader script

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

Available attributes:

Attribute	Description
data-version	Specifies a version
data-api-key	Widget Api Key
data-user-id	User ID, if none is specified a UUID will be generated automatically.
data-user-names	User names
data-init	Specifies whether the widget should start automatically or not.

The example bellow is the most basic implementation for the widget, and the most recommended. Only those attributes in the example are currently necessary to function normally.

Full Example:

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

If you wish to access the Widget instance, you must manually start the Widget and subscribe to the initial loading event.

Using CDN

• Step by step installation with access to the widget object

Import Script

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

Add an event listener for the loader script

<script>
    document.addEventListener('jelou-widget:load', () => {
    });
</script>

Create a WidgetService instance

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

Connect WidgetService

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

Parameters received by the connect method

type Connect = {
	id: string | number;
	names?: string;
	useGroupRoom?: boolean;
	initialFlow?: number;
	userInfo?: Object; // This data can be used for derivation of bot flows 
}

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

Bellow are 2 examples of the complete cdn implementation, of which we recommed using the first one, with no parameters in the connect function, just an empty object.

Guest Users

<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(() => {
            console.log("Success! 🚀")
        });
    });
</script>

Logged In Users

<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("Success! 🚀")
        });
    });
</script>

Start with a flow from the bot

someFlowId is the id number of a specific flow from the bot that is being used by the 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("Success! 🚀")
        });
    });
</script>

Start with a flow from the bot and stored parameters

someFlowId is the id number of a specific flow from the bot that is being used by the widget and someStringValue is the string value of the injected parameters.

<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>