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 which 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.

Usage

After adding the Nudge Core 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 package into your JS/TS file:

import { Nudge, NudgeProvider } from 'nudge_core_browser';

Create an instance of the Nudge class with your desired variable name and add:

• token (required): The secret key obtained from the Nudge website, used for authentication.

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

Step 1: Wrapping the app in NudgeProvider

The <NudgeProvider> is a JSX component that should be wrapped around the main code of your application. It enables integration with the Nudge package and by default requires one parameter: nudge

Parameters

• nudgeInstance (required): An instance of the Nudge core initialized with your unique token. The Nudge core manages your application's integration with the Nudge platform.
  Example

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

Step 2: 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.

  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.

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

Step 3: Start Tracking Events

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

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

You can also add event properties for analytics and .making segments of users based on the properties of their events performed for custom audience experiences.

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

That's it!

Nudges

To integrate Nudges from Nudge into Web, you need to make sure that the basic integration of the Nudge Core Browser SDK is done, if you have not already done it, check here.

Please also make sure that you have tagged all the relevant UI components with ids as defined in the above docs.

Our Nudges SDK is not hosted on npm and has to be installed using a private URL setup, please reach out to your Nudge account manager to get access to the Nudges SDK.

 var nudges = new NudgesUi();

Once you have integrated the Nudge Code SDK, just add the above-defined variable to the list in the plugins property of NudgeProvider

new NudgeProvider({nudgeInstance: nudge, plugins: [nudges]});

Our Nudge Core would now trigger Nudges defined on your Dashboard using the nudges plugin.