Web JS
Rollee Connect SDK is a plugin for integrating Rollee Connect process on Web applications based on HTML and Javascript
Installation
To add Rollee Connect to your webpage, you add the following tag on your HTML file.
<script src="https://rollee.s3.fr-par.scw.cloud/rolleeconnect-sdk-2.0.4.min.js"></script>
Usage
You should be provided by token
and it's mandatory along with sessionToken
param for a defining user session on Rollee Connect.
const client = new RolleeConnect({
elementId: 'rollee',
debug: true,
config: {
token: '<your-jwt-token>',
sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
}
});
The setup param is optional and makes you experience more customizable:
const client = new RolleeConnect({
elementId: 'rollee',
debug: true,
config: {
token: '<your-jwt-token>',
sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
setup: {
production: false,
introScreenSkip: false,
introScreenTitle: 'Get Rollee',
ctaTextColor: 'white',
ctaBackgroundColor: 'blue',
partnerLogoUrl: 'https://somedomain.com/your_logo.png',
datasource: '<datasource-uuid>',
skipDatasourcesPage: false,
partnerLogoUrl: '<your logo url>'
}
}
});
In order to present Rollee Connect on the webpage, one must create an html tag
, with the same id
value as the elementId
parameter on the config
.
<div id="rollee"></div>
Starting experience
When you are done with setup your Rollee experience, you can now create instance of Rollee Connect and you can listen for a callbacks provided:
client.create({
onConnectStarted: () => {
console.log('onConnectStarted');
},
onLoginStarted: () => {
console.log('onLoginStarted');
},
onClose: () => {
console.log('onClose');
},
onSuccess: ({ sessionToken }) => {
console.log('onSuccess', sessionToken);
},
});
Running the SDK in the Production environment
By default, Rollee Connect runs in the Sandbox environment, meant for testing.
To be able to test SDK in the Production environment, you should provide a setup parameter named production and set it to true.
setup: {
production: true
}
Setup Parameters Descriptions
Bellow you have the description of all the parameters present in the Setup.
If you wish not to customise one of the parameters present in setup
, you can just delete them and the SDK will use the respective default value.
Param | Description |
---|---|
elementID | String - an ID of a HTML element where Rollee Connect with initialise itself |
debug | Boolean - with debug enabled you will get console log of Rollee Connect statuses |
sessionToken | String - defining user session on Rollee Connect application |
production | Boolean - parameter for switching between sandbox and production env |
introScreenSkip | Boolean - with this parameter set as true you can skip the first screen and load directly a Terms screen |
introScreenTitle | String - Change intro screen title sentence |
ctaTextColor | String - Changing CTA button “Get started” text color |
ctaBackgroundColor | String - Changing CTA button “Get started” background color |
partnerLogoUrl | String - Change header logo image with proper URL of image |
datasource | String - add data source ID provided by Rollee |
skipDatasourcesPage | Boolean - with this parameter set as true you can skip the Search page straight into the defined datasource |
Example file
In order to quickstart your Rollee Connect experience on your Webpage, you can simply use this HTML file. Please update the token and sessionToken values accordingly.
<html>
<head></head>
<body>
<div id="rollee"></div>
<script src="https://rollee.s3.fr-par.scw.cloud/rolleeconnect-sdk-2.0.4.min.js"></script>
<script>
const client = new RolleeConnect({
elementId: 'rollee',
debug: true,
config: {
token: '<your-jwt-token>',
sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
setup: {
production: false,
introScreenSkip: false,
introScreenTitle: 'My custom intro title',
ctaTextColor: 'black',
ctaBackgroundColor: 'green',
partnerLogoUrl: 'https://somedomain.com/your_logo.png',
skipDatasourcesPage: false,
datasource: '<datasource-uuid>'
}
}
});
client.create({
onConnectStarted: () => {
console.log('onConnectStarted');
},
onLoginStarted: () => {
console.log('onLoginStarted');
},
onClose: () => {
console.log('onClose');
},
onSuccess: ({ userUUID }) => {
console.log('onSuccess', userUUID);
},
});
</script>
</body>
</html>
Updated about 2 months ago