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:
Loader: You will always get the latest version of our widget.
Script: You must manually import the script but you have more control on the version.
Using Loader ( Recommended )
Import loader script
Copy < script src = "https://cdn.jelou.ai/widgets/loader.js" ></ script >
Available attributes:
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:
Copy < 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
Copy < script defer src = "https://cdn.jelou.ai/widgets/loader.js" ></ script >
Add an event listener for the loader script
Copy < script >
document .addEventListener ( 'jelou-widget:load' , () => {
});
</ script >
Create a WidgetService instance
Copy < script >
document .addEventListener ( 'jelou-widget:load' , () => {
const widgetService = new WidgetService ({ apiKey : '<apiKey>' });
});
</ script >
Connect WidgetService
Copy < 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
Copy 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
Copy < 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
Copy < 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.
Copy < 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.
Copy < 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 >