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

Quickstart Guide

This Quickstart Guide will walk you through integrating CustomerGlu's Flutter SDK in a Demo App and launching a few campaigns.

Install the SDK

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

Or if you wish to set up your existing Flutter project with CustomerGlu Flutter SDK, you can install the latest package from the pub and import it into your project as follows:

Installation

You can install the package using pub:

flutter pub add customerglu_plugin

Add your WriteKey/API Key in meta-data of the AndroidManifest.xml file like this:

<meta-data android:name="CUSTOMERGLU_WRITE_KEY"  
    android:value="YOUR_WRITE_KEY" />  //Don't Change Name

WriteKey - Mandatory (WriteKey/API Key is provided by CustomerGlu)

Usage

Here’s a basic example of how to use the component in your project:

Import the following package in classes where CG methods are used:

import “package:customerglu_plugin/customerglu_plugin.dart”;

Registration and Attributes Updation

Use the given function to Register a user with CustomerGlu :

var userData = {
'userId': user_id
};
bool is_registered = await CustomergluPlugin.registerDevice(userData)

Please replace the userId as appropriate or provided by your Technical Onboarding Manager, in the app, a test writeKey and userId.

Use the given function to Update userAttributes that we use for segmentation with CustomerGlu :

var attributes = {
'count': 50
}
CustomergluPlugin.updateUserAttributes(attributes)

Load Campaigns

To load the campaign manually like click on banner or button use the below method by passing the campaignId created from dashboard:

void openCampaign() {
  CustomergluPlugin.loadCampaignById('YOUR_CAMPAIGN_ID');   
}
  

The following code should be added to set the screen name for every screen or You can add it into your Navigation Class. The SDK will then render the campaigns according to the screen name configured in entrypoint in dashboard:

@override 
void initState() {
    CustomergluPlugin.setCurrentClassName("Home");
    super.initState();
  }
  

For Android:

The given function should be used in MainActivity , inside the onResume method to support adding the floating button/popup entry points on the activity via the dashboard:

@Override
protected void onResume() {
    super.onResume();
        CGUtils.setActivity(this);
} 

Complete Activities

To complete activities for the user, you can use CustomerGlu Debugger from the CustomerGlu Dashboard or you can also use the following SDK Method:

eventproperties = {"orderValue":1000},
CustomergluPlugin.sendEventData("EVENT_NAME", eventproperties)

Upon refresh, you should see the relevant banner or campaign being rendered in the app.

If you face any issues in the above setup, please contact us via the support channel.

Last updated