📱Quickstart Guide for Flutter Apps

CustomerGlu enables growth teams to run gamified programs in minutes using a low-code builder. This guide will help you integrate the CustomerGlu Flutter SDK into your App.

Pre-Requisites

  • Android Studio

  • Xcode

Recipe

This Quickstart Guide will walk you through an existing implementation of the CustomerGlu Flitter SDK using CustomerGlu Sandbox App. You'd learn the fundamentals of using CustomerGlu Flutter SDK in your existing app project.

  1. Set up the Sandbox app in your IDE

  2. Identify and authenticate your Users

  3. Load a campaign via Campaign ID in the app

  4. Load a campaign with Dynamic Nudges

  5. Handling OnClicks Actions (Navigation and Analytics)

🛠️ Setup the Sandbox App

Start by cloning our pre-configured Demo App with Flutter SDK

Start by cloning our pre-configured Demo App with Flutter SDK

git clone https://github.com/customerglu/FlutterSandbox.git

1. Update the API Key in the Sandbox App

Open the Sandbox App in Visual Studio Code or any relevant editor.

  • Open the Android Manifest file located at /android/app/src/main/AndroidManifest.xml

  • Add your API Key in <meta-data> of the AndroidManifest.xml file like this:

<meta-data android:name="CUSTOMERGLU_API_KEY"  
    android:value="YOUR_API_KEY" />

How to find your CustomerGlu API Key?

2. Install Dependencies for Sandbox App

Run the following command in the terminal to install dependencies 

flutter pub get

3. Launch the Emulator and build the App

Launch the Emulator via Android Studio or Xcode and launch the app.

You're all set to launch & test CustomerGlu campaigns now! 🎉

🔍 Identify and Authenticate your Users

All campaigns within CustomerGlu are activated for a unique User ID. This User ID is provided during User Registration via the SDK in the app code.

Register the User on the Sandbox app launch

CustomerGlu Flutter SDK provides the method registerDevice(userData) that authenticates and identifies a specific user so that campaigns can be activated for the eligible users. Eligibility via segmentation is also checked at this step on the server side.

To see the sample implementation, open /lib/pages/register_page.dart and then check for registerUserWithCG() function declaration, and the registerDevice() function inside the block.

For using segmentation for the users please look the UpdateUser Attributes

We recommend using the registerDevice() call at the start of each session.

Methods to Load a campaign in the app

CustomerGlu Flutter SDK provides 2 methods to launch the campaign experiences inside the app:

  1. Load a Campaign via Campaign ID by clicking a button or any other Widget in the app.

  2. Load a Campaign via a Dynamic Entrypoint attached to the campaign.

Load a Campaign Via Campaign ID using a Banner or Any Widget

CustomerGlu Flutter SDK provides the method CustomergluPlugin.loadCampaignById("campaign_id") to start loading a launched campaign from the dashboard with campaignId.

1. Launch a Campaign

For test purposes, you can launch any campaign via the CustomerGlu dashboard.

2. Copy the Campaign ID

After launching the campaign from dashboard copy the campaignId of that campaign

3. Update the `campaignId` in the Sandbox App

  • Open file /lib/page/home_page.dart

  • Search for the loadCampaignById(“”) function call inside the return block of the HomePage component, and update it with the campaignID

4. Test the Campaign

  • Go back to the emulator and click on the banner present in the HomeScreen

  • The campaign should now load in a new web view.

Great going! We can now see the created campaign in the sandbox App 🚀

Load a campaign with Dynamic EntryPoints

CustomerGlu can launch spontaneous campaigns using native entry points that are dynamically mounted at runtime.

1. Launch a Campaign

For test purposes, start creating any new campaign.

2. Configure the Nudge

  • In the campaign creation wizard, navigate to the Nudges section

  • Click on + ADD ANOTHER NUDGE

  • Set the channel to App and the type of Nudge to Floating

  • Configure the Nudge with a background image and specify the on-click behavior to navigate to a campaign

3. Screen Names present in demo app

File NameScreenName

register_page.dart

RegisterScreen

home_page.dart

HomeScreeen

details_page.dart

ProductScreen

4. Set Trigger Criteria

  • Define the screens where you want to show the Nudge.

  • For Android, select HomeScreen as the allowed screen that is configured for the Sandbox App. If the option is not present, ddd a Custom Screen with the name HomeScreen

5.. Handle the Screen Name in the code

In HomePage.dart, use CGScreenDetector to wrap the whole widget and add classname"HomeScreen" during app load

  body: CGScreenDetector(
        classname: 'HomeScreen',
        child: Container()
)

We can use setCurrentClassName("ScreenName") in the app's router code or screen initialisation code to enable Dynamic Nudges

6. Testing the Dynamic Nudge

  • Relaunch the Emulator

  • In the HomeScreen you are able to see the Floating nudge

Well Done! Now we can see the Dynamic Nudges in the Sandbox App 🏆

For more Entry Points please refer Entry Points

Handling Navigation and Analytics

CustomerGlu Flutter SDK emits various events when users interact with CTAs/Activities. These events can be handled within the app code to trigger navigation, analytics, or custom workflows.

Configure CTA in Campaign

You can add CTA in the Campaign by selecting Callback as a type in Reward Section

Handling Navigation on Button Tap

  1. Observe Deeplink Events

    In the Android studio/Xcode terminal, you might see.

  1. Edit `main.dart`

    the initState function and add the event listener:

  static const broadcast_channel = MethodChannel("CUSTOMERGLU_EVENTS");

broadcast_channel.setMethodCallHandler((call) async {

      switch (call.method) {
        case "CUSTOMERGLU_DEEPLINK_EVENT":
          print("CUSTOMERGLU_DEEPLINK_EVENT");
          print(call.arguments);
          // Add your own logic to handle Navigation
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (builder) => HomePage(),
            ),
          );
          break;
}
});

  1. Capture Analytics Events

    For Capture Analytics add another listener for analytics

 case "CUSTOMERGLU_ANALYTICS_EVENT":
          print("CUSTOMERGLU_ANALYTICS_EVENT FROM FLUTTER");
          print(call.arguments);
          break;

Congratulations! You finished setting up the CustomerGlu Flutter SDK with the Sandbox app.

Please refer to Full SDK Documentation for full reference installation in your app and for advanced use cases.

Additional References

PreviousQuickstart Guide for React Native AppsNextIntegrating with SDKs

Last updated