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');
  },
  onLoginSuccess: ({ accountID, datasourceID }) => {
    console.log('onLoginSuccess', accountID, datasourceID);
  },
  onSuccess: ({ sessionToken }) => {
    console.log('onLoginSuccess', 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.

ParamDescription
elementIDString - an ID of a HTML element where Rollee Connect with initialise itself
debugBoolean - with debug enabled you will get console log of Rollee Connect statuses
sessionTokenString - defining user session on Rollee Connect application
productionBoolean - parameter for switching between sandbox and production env
introScreenSkipBoolean - with this parameter set as true you can skip the first screen and load directly a Terms screen
introScreenTitleString - Change intro screen title sentence
ctaTextColorString - Changing CTA button “Get started” text color
ctaBackgroundColorString - Changing CTA button “Get started” background color
partnerLogoUrlString - Change header logo image with proper URL of image
datasourceString - add data source ID provided by Rollee
skipDatasourcesPageBoolean - 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');
            },
            onLoginSuccess: ({ accountID, datasourceID }) => {
                console.log('onLoginSuccess', accountID, datasourceID);
            },
            onSuccess: ({ userUUID }) => {
                console.log('onSuccess', userUUID);
            },
            });
    </script>


</body>

</html>