CustomerGlu Developer Documentation
  • 🔧Getting started
  • 🔧Quickstart Guide for React Web Apps
  • 📱Quickstart Guide for React Native Apps
  • 📱Quickstart Guide for Flutter Apps
  • Integrating with SDKs
    • Web SDK
    • Mobile SDKs
      • How to Test Integration?
    • Cordova SDK
    • Shopify
  • Integrating with APIs
    • Register User/Device
    • Load Campaigns
    • Binding Webview to Native App Functions
    • 🔍Using __GLU_NUDGE_CLICK for Widget Visibility
    • 🎯API-based Segmentation Quickstart Guide
  • 🔌Third-Party Integrations
    • Source
      • Sending Events directly from Server
      • Segment
      • Moengage
      • Amplitude
      • Clevertap
      • Webengage
    • Destination
      • Analytics Webhook
      • Customer.io
      • Talon.One
      • Segment
      • MoEngage
      • Amplitude
      • Clevertap
      • WebEngage
      • Google Sheets
    • Cohort
      • Mixpanel
  • Miscellaneous Topics
    • Direct Campaign/Wallet URLs
    • Configuring Webhooks
      • Rewards Webhook
      • Nudge Webhook
    • Notifications
      • FCM
      • APNs
      • CustomerGlu Notification
      • Testing Nudges
    • Referral Campaigns
      • Firebase
      • Branch
    • Handling Non Logged-in Users
    • Testing Campaigns with User Logs
    • Using the Editor
      • How to edit Buttons in Campaigns
    • How to Create and Manage Segments in CustomerGlu
  • SCHEMA REPOSITORY
    • Webhook Schema
      • Reward Webhook Schema
      • Nudge Webhook Schema
      • Raw Event Webhook Schema
    • Webview Callback Schema
      • Analytics Event Schema
    • Analytics schema V4
      • Page Events
      • Track Events (UI)
      • Track Events (SDK)
      • State-Change Events
      • System Events
    • 🗝️FAQ
      • API Key
      • How to find and add Screen Names for Entrypoints
  • Demo Apps
    • Demo Apps
Powered by GitBook
On this page
  • Pre-Requisites
  • Recipe
  • 🛠️ Setup the Sandbox App
  • 1. Update the API Key in the Sandbox App
  • 2. Install Dependencies for Sandbox App
  • 3. Launch the Emulator and build the App
  • 🔍 Identify and Authenticate your Users
  • Register the User on the Sandbox app launch
  • Methods to Load a campaign in the app
  • Load a Campaign Via Campaign ID using a Banner or Any Widget
  • 1. Launch a Campaign
  • 2. Copy the Campaign ID
  • 3. Update the `campaignId` in the Sandbox App
  • 4. Test the Campaign
  • Load a campaign with Dynamic EntryPoints
  • 1. Launch a Campaign
  • 2. Configure the Nudge
  • 3. Screen Names present in demo app
  • 4. Set Trigger Criteria
  • 5.. Handle the Screen Name in the code
  • 6. Testing the Dynamic Nudge
  • Handling Navigation and Analytics
  • Configure CTA in Campaign
  • Handling Navigation on Button Tap
  • Additional References

Was this helpful?

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.

PreviousQuickstart Guide for React Native AppsNextIntegrating with SDKs

Last updated 9 months ago

Was this helpful?

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" />

Open the Info.plist file path - ios/app_name/Info.plist Add the following key to the Info.plist file:

<key>CUSTOMERGLU_API_KEY</key>
<string>YOUR_API_KEY</string>

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.

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 Name
ScreenName

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 🏆

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.

Additional References

For using segmentation for the users please look the

For more Entry Points please refer

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

📱
Analytics Event Schema
Third Party Integration
User Segmentations
Reward Webhooks
SandboxApp
How to find your CustomerGlu API Key?
How to find your CustomerGlu API Key?
UpdateUser Attributes
Entry Points
Full SDK Documentation