Web: Core SDK Integration

Overview

The nudge_core_browser Package allows you to integrate the core functionalities provided by Nudge into your Web application. With this package, you can engage your users with interactive experiences. Nudge Core is the required repository that you would need to integrate to start using Nudge's capabilities.

To integrate with Nudge Core, you need to first install the nudge_core_browser package into your project. Find the latest version of nudge_core_browser here.

npm install nudge_core_browser

Once you install the nudge_core_browser package, follow the steps below to complete the integration.

Create a Nudge Account

To get started with the Nudge Package, follow these steps:

1. Navigate to Nudge's official website to book a demo and get access to Nudge's dashboard.
2. Create an account on Nudge's Dashboard
3. In the settings tab, you will obtain a unique secret key. Use this secret key while initializing the package.

Step 1: Usage

After adding the nudge_core_browser package to your project's dependencies in the package.json file, you need to run the npm install command to fetch the package and make it accessible in your project. This command will download the package and its dependencies, allowing you to import and utilize the Nudge package in your code.

To initialize the Nudge class with a reusable variable name and access all its functions through it, follow these steps:

• Import the Nudge and NudgeProvider from nudge_core_browser package into your JS/TS file:

JavaScript

import { Nudge, NudgeProvider } from 'nudge_core_browser';

• Create an instance of the Nudge class with your desired variable name and add apiKey (required): The secret key obtained from Nudge's dashboard.

JavaScript

var nudge = new Nudge({ apiKey: <API_KEY>});

Step 2: Add a NudgeProvider instance at the root of your application

Parameters

• nudgeInstance (required): An instance of Nudge initialized with your apiKey. This manages your application's integration with Nudge's dashboard.
• plugins (required) : List of all the features provided by Nudge.
  Example

JavaScript

new NudgeProvider({ nudgeInstance:nudge, plugins:[<PLUGINS>]});

Step 3: Initializing session

Whenever a distinct user ID which is used to identify users at the client's end is defined, call the initSession function to initialize the user session.

JavaScript

  await nudge.initSession({externalId:'CLIENT_IDENTIFIABLE_USER_ID'});

You can also send more user attributes along with the user ID for making segments of audiences.

JavaScript

  await nudge.initSession({externalId:'CLIENT_IDENTIFIABLE_USER_ID',
                  properties:{
                  	"name": "Client User 1",
                  	"age": 27,
                  	"gender": "M",
                  	"country":"US",
                  }});

Step 4: Start Tracking Events

Make sure you have initialized the session before tracking
To track an event, simply call

JavaScript

await nudge.track({type:'EVENT_TYPE'});

You can also add event properties for analytics and make segments of users based on their properties and actions for personalized experiences.

JavaScript

await nudge.track({type:'EVENT_TYPE',
                  properties: <String, dynamic>{
                  "product": "Fortune Cookies",
                  "quantity": 5,
                  "countryOfExport":"US",
                  }});

That's it!