Groovs React Native Embed library

What does integrating Groov widgets look like?

👍

Eg: Integrating in native mobile applications (using Groovs React Native embed library)

The following diagram explains a high level setup and handshake between the interacting components across your app ecosystem and Groov's.

To setup and use Groov widget in a native mobile application using react native library:

1. Add the Widget code from Groovs npm-library as per the readme instructions:
   Groovs npm react-native-embed library

   1. Adding dependency through npm. Navigate to the root directory of your React Native project. and run the following command:

      $ npm install @wearegroov/react-native-embed --save

   2. Import the library in your main app code base

   3. Follow the sample implementation steps to initiate calls to the GroovWebView by passing the requisite parameters and optionally setting any custom widget styling (Groov has a default styling pre-set)

2. Your app server will need a new web service endpoint implemented to relay gWidgetId (Groov Widget Token) using your existing auth mechanism. This step ensures the Groov Widget Id (or identifier) acts as a session binder to the logged in user to your app client. You will need the gWidgetId to be passed to Groov in the next step
   1. Your organization is expected to implement a web service to receive and process such requests. This step 2 is purely a communication between your app client and your app server.
   2. The URL of this web service will need to be specified and updated in the Widget Code parameter as per step 1.iii
3. Your app server will need to make a POST request to Groov endpoint and relay the following:
   1. gWidgetId - this enables Groov to bind the widget session to the logged in user/merchant
   2. MerchantIdentifier - this will need to be an identifier of the merchant user on your platform. This could be a lead id or userid - something that helps bind a reference of the merchant in your platform to a reference of the merchant on Groov's platform, so that we can always show contextual information to such merchant. Whilst GroovWidgetToken will refresh and change everytime an instance of the widgets regenerates (due to app session timeouts, logouts, etc), the MerchantIdentifier will stay the same for the Merchant
   3. Authorise the call to Groov by sending the x_api_key (the api key) you have for your Groov organisation account. Refer x-api-keys for details.
4. Once Groov has received the gWidgetId from your app server, Groov widget as part of the webview initialisation will use the gWidgetId to kick start the journey within your app. These sessions appear as part of your application, making the process feel more seamless and really embedded.
   1. all product interaction within the widget hereafter will be controlled by Groov with direct communication between the Groov widget and the Groov app server.

ℹ️

Any new sessions by the merchant user on your app client will regenerate a new gWidgetId via the handshakes as detailed in steps 2 and 4.