Web JS

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>