Nudges Plugin

note

Ensure the basic integration of the Nudge Core SDK is complete. If not, check here.

Overview

The nudge_nudgesv2 package lets you add Nudges to your flutter app. It includes the NudgeNudgesUi class displaying in-app nudges. Install this plugin to launch nudges from the dashboard and increase product adoption.

Find the latest version of nudge_nudgesv2 here

Step 1: Setting Up the Nudge Tracker Observer

First, add the NudgeTrackerObserver class at the root of your application:

final NudgeTrackerObserver _trackerObserver = NudgeTrackerObserver();

Next, incorporate it into your application as shown below:

return NudgeProvider(
      nudgeInstance: core,
   	  plugins : []
      child: MaterialApp(
        navigatorKey: NudgeProviderState.navigatorKey,
        navigatorObservers : [_trackerObserver],
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Home(),
      ),
    );

Step 2: Initialization

Import the NudgeNudgesUi class from nudge_nudges.dart:

 import 'package:nudge_nudgesv2/nudge_flutter_nudges_v2.dart';

Create an instance of NudgeNudgesUi:

 final nudges = NudgeNudgesUi();

Add this instance to the plugins list in the NudgeProvider:

return NudgeProvider(
      nudgeInstance: core,
   	  plugins : [nudges]
      child: MaterialApp(
        navigatorKey: NudgeProviderState.navigatorKey,
        navigatorObservers : [_trackerObserver],
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Home(),
      ),
    );

Step 3: Adding Labels to Your Widgets

To track specific widgets where you want to show nudges, import the NudgeWidgetTracker:

import 'package:nudgecore_v2/utilities/nudge_labels_manager/NudgeWidgetTracker.dart';

Use NudgeWidgetTracker.register("YOUR_UNIQUE_WIDGET_NAME") to track any widget in your application.

Here's an example:

ElevatedButton(
                  key: NudgeWidgetTracker.register("HeyButton"),
                  onPressed: () {
                    nudge.track(type: 'Name of your component');
                  },
                  child: Text('Hey'),
                ),

note

Make sure each widget name is unique to avoid conflicts.

Step 4: Connecting to the Dashboard

To create nudges from the Dashboard, connect your Android application by adding the following snippet to the Manifest file under the MainActivity section. This allows Nudge to send app pages to the dashboard for creating experiences:

         <intent-filter>
             <action android:name="android.intent.action.VIEW" />
             <category android:name="android.intent.category.DEFAULT"/>
             <category android:name="android.intent.category.BROWSABLE" />
             <data android:scheme="nudge-{APP_SCHEME_ID}"
                 android:host="nudgenow.com"
                 android:pathPattern="/.*/.*" />
         </intent-filter>

That's it!

You are now ready to create Nudges on the dashboard and see them in your Flutter application.