Installation

$ npm i @getrollee/connect-react-sdk

Usage

The RolleeConnect component is a view that you can integrate into your app's flow. The CONFIG and optional callback handlers are passed in as props.

import { RolleeView } from '@getrollee/connect-react-sdk';
.
.
.
<RolleeView config={CONFIG} onCompleted={onCompleted} />;

Configuration

You should be provided by apiKey, partnerName and partnerIUUID from Rollee and those fields are mandatory.

The setup parameters are optional.

▫️The minimum configuration for setting up RolleeConnect component:

const CONFIG = {
  apiKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  partnerName: 'my_company_slug',
  partnerUUID: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
};

function onCompleted(data) {
  console.log('onCompleted', data);
}

▫️ The optional configuration for setting up RolleeConnect component:

const CONFIG = {
  apiKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  partnerName: 'my_company_slug',
  partnerUUID: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  setup: {
    production: false,
    introScreenSkip: false,
    introScreenTitle: 'Roll the Rollee',
    ctaTextColor: 'white',
    ctaBackgroundColor: 'red',
    partnerLogoUrl:
      'https://somedomain.com/your_logo.png',
  },
};

Testing SDK in the Sandbox

To be able to test SDK in Sandbox mode, you should provide a setup parameter named production and set it to false.

setup: {
  production: false
}

Setup Parameters Descriptions

ParamDescription
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

Did this page help you?