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-3.0.0.min.js"></script>

Usage

You should be provided by sessionToken param for a defining user session on Rollee Connect.

const client = new RolleeConnect({
  elementId: 'rollee',
  debug: true,
  config: {
    sessionToken: 'xxxxx-xxxxx-xxxxx-xxxxx-xxxxx',
  }
});

The setup param is optional and makes you experience more customizable:

const client = new RolleeConnect({
  elementId: 'rollee',
  debug: true,
  config: {
    sessionToken: 'xxxxx-xxxxx-xxxxx-xxxxx-xxxxx',
    production: false,
    customizationId: 'xxxxx-xxxxx-xxxxx-xxxxx-xxxxx',
  }
});

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: ({ userUUID }) => {
    console.log('onLoginSuccess', userUUID);
  },
  onAnalytics: (payload) => {
    console.log('onAnalytics', payload);
  }
});

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
customizationIdString - defining customization on Rollee Connect application

Example file

In order to quickstart your Rollee Connect experience on your Webpage, you can simply use this HTML file. Please update the sessionToken values accordingly.

<html>
<head></head>
<body>
    <div id="rollee"></div>
    <script src="https://rollee.s3.fr-par.scw.cloud/rolleeconnect-sdk-3.0.0.min.js"></script>
    <script>
        const client = new RolleeConnect({
          elementId: 'rollee',
          debug: true,
          config: {
            sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
            setup: {
              production: false,
            }
          }
        });

        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('onLoginSuccess', userUUID);
          },
          onAnalytics: (payload) => {
            console.log('onAnalytics', payload);
          }
        });
    </script>


</body>

</html>