Flourish-web-sdk-react NPM

Web SDK for React

Everything you need to know to start integrating your React application with Flourish

Getting Started

The integration with us works as follows, the client will make a call to our API to authenticates himself, retrieve an access token and pass to our component, given that, the sdk serves to encapsulate and help in loading this webview.

Step 1: Installation

Start by adding our SDK into your project with the following command:

npm install flourish-web-sdk-react

yarn add flourish-web-sdk-react

Step 2: Initializing the SDK

After adding our module, it is necessary to retrieve an access token from our API, and we strongly recommend that it be done through a backend because the request needs your credentials and it's good to avoid the harmful environment of the web.

With your accessToken in hand, a call must happen to the signIn method along with your application initialization, which is required to complete the initialization of our component.

import { signIn } from 'flourish-web-sdk-react'

signIn(accessToken, 'staging')

Step 3: Using the SDK

After initialization and with your accessToken in hand, it is possible to pass it to the SDK component, along with the desired environment and language, just like this:

import Flourish from 'flourish-web-sdk-react';

return (
    <Flourish
        token='accessToken'
        environment='environment'
        language='"language"'
    />
);

After a successful rendering, you should see something like this.

Step 4: Listening events

You can register for some events to know when something happens within our platform.

Listen our events

To listen to our events, you will pass a callback function to our Flourish component when you add it to your screen.

import Flourish from 'flourish-web-sdk-react';

const printEventData = (data: string): void => {
  console.log('Event Client side', data);
};

return <Flourish eventCallback={printEventData} />;

Event name	Description
GoToAutoPayment	When you need to know when the user clicks to set up an automatic payment on our platform.
GoToPayment	When you need to know when the user clicks to set up a payment on our platform.
TriviaFinished	When you need to know when the user finishes a Trivia game on our platform.
GoBack	When you need to know when the user clicks on the back menu button on our platform.
RetryLogin	When you need to know when the accessToken has expired and you need to retrieve a new one on our platform.