Mobile SDKs

Integrating CustomerGlu on your Mobile Apps

Pre-Requisites

Android

CustomerGlu Android SDK supports API 21 and above. Please ensure the minSDKVersion in the app's build.gradle file reflects the same.

​Note:

If Proguard is enabled in the app, please add the following rule in

proguard-rules.pro file to ensure smooth working of CustomerGlu SDK:

-keep class com.customerglu.sdk.Modal.*{*;}

Permissions

Add the following permissions to the AndroidManifest.xml file

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

iOS

CustomerGlu iOS SDK supports IOS 12.0+ and requires Xcode 12 or above to build.

Flutter

Android

CustomerGlu Flutter SDK supports API 21 and above. Please ensure the minSDKVersion in the app's build.gradle file reflects the same.

Firstly add the permission of internet in Manifest file

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Note:

If Proguard is enabled in the app, please add the following rule in the build.gradle file to ensure smooth working of CustomerGlu SDK.

buildTypes {
    release {
        // TODO: Add your own signing config for the release build.
        // Signing with the debug keys for now, so `flutter run --release` works.
        signingConfig signingConfigs.debug
        proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 
        'proguard-rules.pro'
    }
}

Create a Proguard rules file if not present and add the following rule in Proguard Rules file:

-keep class com.customerglu.sdk.Modal.*{*;}

iOS

CustomerGlu iOS SDK supports IOS 11.0+ and requires Xcode 12 or above to build.

React Native

Android

CustomerGlu Android SDK supports API 21 and above. Please ensure the minSDKVersion in the app's build.gradle file reflects the same.

​Note:

If Proguard is enabled in the app, please add the following rule in Proguard Rules file to ensure smooth working of CustomerGlu SDK:

-keep class com.customerglu.sdk.Modal.*{*;}

Permissions

Add the following permissions to the AndroidManifest.xml file

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

iOS

CustomerGlu iOS SDK supports IOS 11.0+ and requires Xcode 12 or above to build.

Installation

Android

Add the following dependency to the app's build.gradle file:

dependencies{
    implementation 'com.customerglu:CustomerGluLibrary:3.0.4'
}

Add the below code snippet in project level build.gradle file:

allprojects {
    repositories {
        ...
        mavenCentral()
    }
}

For new Projects , add the below code snippet in settings.gradle file (if above not work):

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        ...
        mavenCentral()

    }
}

iOS

Option 1: Using CocoaPods

Add CustomerGlu to your Podfile and run pod install

pod 'CustomerGlu'

Option 2: Using Swift Package Manager

Add https://github.com/customerglu/CG-iOS-SDK as a Swift Package Repository in Xcode and follow the instructions to add Intercom as a Swift Package.

Flutter

Option 1

Add the CustomerGlu Flutter plugin in pubspec.yaml file

customerglu_plugin: ^2.0.3

Option 2

Run this command With Flutter:

flutter pub add customerglu_plugin

React Native

Option 1

Add the CustomerGlu React Native plugin in package.json file

"@customerglu/react-native-customerglu" : "2.1.0"
"@react-native-community/push-notification-ios": "^1.10.1",
"@react-native-firebase/app": "^15.1.1",
"@react-native-firebase/messaging": "^15.1.1",
"react-native-push-notification": "^8.1.1",

Option 2

Run this command With npm:

npm install @customerglu/react-native-customerglu

Initialise SDK

Android

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" /> 
<!-- only value should be changed -->

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

Define the global instance of CustomerGlu SDK in your Application class:

public CustomerGlu customerGlu;
customerGlu = CustomerGlu.getInstance();

For Initialising SDK add the following line in your Application Class (Mandatory)

CustomerGlu.getInstance().initializeSdk(getApplicationContext());

iOS

Add the following key to the Info.plist file.

<key>CUSTOMERGLU_WRITE_KEY</key>
<string>YOUR_WRITE_KEY</string>

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

Define the global instance of CustomerGlu SDK

You can store the global instance of CustomerGlu SDK in a variable so you don't have to use CustomerGlu.getInstance for each function call

let customerGlu = CustomerGlu.getInstance

For Initialising SDK add the following line in your AppDelegate (Mandatory)

CustomerGlu.getInstance.initializeSdk()

Flutter

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

import “package:customerglu_plugin/customerglu_plugin.dart”;

Android

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)

iOS

Add the following key to the Info.plist file:

<key>CUSTOMERGLU_WRITE_KEY</key>
<string>YOUR_WRITE_KEY</string

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

React Native

Android

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

To initialize the SDK the initialization method must be called at every app launch before using any other method from the CG SDK. use it in index.js at entry point of the app

import { initCGSDK } from '@customerglu/react-native-customerglu';

initCGSDK("in");  

iOS

Add the following key to the Info.plist file:

<key>CUSTOMERGLU_WRITE_KEY</key>
<string>YOUR_WRITE_KEY</string>

WriteKey - Mandatory (WriteKey/API Key is provided

To initialize the SDK the initialization method must be called at every app launch before using any other method from the CG SDK. use it in index.js at entry point of the app

import { initCGSDK } from '@customerglu/react-native-customerglu';

initCGSDK("in");  

Register User (Mandatory)

Registering a user of your platform with CustomerGlu is mandatory to be able to show any CG powered UIs and experiences to the user. Users need not be registered on your platform. You can check out the flow to handle non-logged/guest users here.

As the same registration method can also be used to update user attributes, it is recommended to use this method on every app launch, after signing in/up and reaching the app home page.

Android

This method is now used to register the user with CG. Make sure to call it on every App launch. In SDK v3.0.0 or above we are not accepting CustomAttributes here in the registerDevice:

customerGlu.registerDevice(this, registerData, new DataListner() {
            //this method register your device with CG and load the campaigns
            @Override
            public void onSuccess(Boolean success) {
                Toast.makeText(getApplicationContext(), "Registered" , Toast.LENGTH_SHORT).show();
            }
            @Override
            public void onFail(String message) {
                Toast.makeText(getApplicationContext(), "" + message, Toast.LENGTH_SHORT).show();
            }
        }
);

Note: The Register function is used to generate token only

Function Parameters:

1. Context: this/getApplicationContext()

2. userData: A HashMap that holds user information

Sample UserData object

Map<String,Object> userData = new HashMap<>();
String user_id="testUser_1";
String fcmToken="FCM_TOKEN_OF_DEVICE";
userData.put("userId",user_id); // Mandatory:any identifier to uniquely identify a user of your platform
userdata.put("firebaseToken",fcmToken); // for enabling Firebase Notifications
userdata.put("referredBy": "userAId"); // for referrals
userdata.put("referralCode": "userAReferralCode"); // for referrals

Note: You can check out the complete userData object payload here.

iOS

This method is now used to register the user with CG. Make sure to call it on every App launch. In SDK v3.0.0 or above we are not accepting CustomAttributes here in the registerDevice:

customerGlu.registerDevice(userdata: userData) { success in
            if success {
               print("Register Successfully")
            } else {
                print("error")
            }
        }

Note: The Register function is used to generate Token only

Function Parameters:

1. userData: A Dictionary that holds user information

Sample UserData object

 var userData = [String: AnyHashable]()
        userData["userId"] = "testUser_1" // Mandatory:any identifier to uniquely identify a user of your platform
        userData["userName"] = "John Doe"
        userData["firebaseToken"] = CustomerGlu.getInstance.fcmToken // for enabling Firebase Notifications
        userData["apnsDeviceToken"] = CustomerGlu.getInstance.apnToken // for enabling APNS Notifications
        userdata["referredBy": "userAId"]; // for referrals
        userdata["referralCode": "userAReferralCode"]; // for referrals
       

Note: You can check out the complete userData object payload here

Flutter

Use the given function to register a user with CustomerGlu :

bool is_registered = await CustomergluPlugin.registerDevice(userData)

Note: The Register function is also used to update the user attributes

Sample UserData object

var userData = {
'userId': user_id, // Mandatory:any identifier to uniquely identify a user of your platform
'firebaseToken': "FCM_TOKEN_OF_DEVICE", // for enabling Firebase Notifications
'referredBy': "userAId", // for referrals
'referralCode': "userAReferralCode", // for referrals
'customAttributes':{ 
 // any custom key-value pairs, which may be used for targeting can be sent as customAttributes
// segments can be created by applying filters on these customAttributes
// campaigns can be launched on specific segments
"orderCount":5,
"city":"Mumbai"
 }
'profile':{
"firstName":"JaneDoe"
 }
}

Note: You can check out the complete userData object payload here.

React Native

Use the given function to register a user with CustomerGlu :

import { RegisterDevice } from '@customerglu/react-native-customerglu';
var ok = await RegisterDevice(userData);
if (ok == true) {
// Success 
}else { 
// fail
} 

Note: The Register function is also used to update the user attributes

Sample UserData object

let userData = {
'userId': user_id, // Mandatory:any identifier to uniquely identify a user of your platform
'firebaseToken': "FCM_TOKEN_OF_DEVICE", // for enabling Firebase Notifications
'apnsDeviceToken': "APN_TOKEN_OF_DEVICE", // for enabling APN Notifications only for IOS
'referredBy': "userAId", // for referrals
'referralCode': "userAReferralCode", // for referrals
'customAttributes':{ 
 // any custom key-value pairs, which may be used for targeting can be sent as customAttributes
// segments can be created by applying filters on these customAttributes
// campaigns can be launched on specific segments
"orderCount":5,
"city":"Mumbai"
 }
'profile':{
"firstName":"JaneDoe"
 }
}

Note: You can check out the complete userData object payload here.

UpdateUser Attributes

This method is used to update the user custom Attributes to add users to the respective segments

Android

Map<String, Object> attributes = new HashMap<>();
attributes.put("city", "Mumbai");
customerGlu.updateUserAttributes(getApplicationContext(), attributes);

iOS

var myCustomAttributes = [String: AnyHashable]()
myCustomAttributes["city"] = "Mumbai"
CustomerGlu.getInstance.updateUserAttributes(customAttributes: myCustomAttributes)

Flutter

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

React Native

  userAttributes = {
            city : "Mumbai"
    }
    UpdateUserAttributes(userAttributes)

UpdateUser Profile

You can update the user profile and customAttributes values by using following method:

Note: You can check out the complete userData object payload here.

Android

Map<String, Object> registerData = new HashMap<>();
registerData.put("userName", "glutest-234");

customerGlu.updateProfile(this, registerData, new DataListner() {
            //this method register your device with CG and load the campaigns
            @Override
            public void onSuccess(Boolean success) {

            }
            @Override
            public void onFail(String message) {
                Toast.makeText(getApplicationContext(), "" + message, Toast.LENGTH_SHORT).show();
            }
        }
);

iOS

customerGlu.updateProfile(userdata: ["userName" : "glutest"])

Flutter

var userData = {
'userName': "glutest"
}

CustomergluPlugin.updateProfile(userData)

React Native

userdata = {
    userName: "glutest"
    }
UpdateProfile(userdata)

Clear Data on Logout (Mandatory)

Use the given function when the user logs out, to clear CustomerGlu SDK cached data like user_id, token, entry point related data, etc.

Android

customerGlu.clearGluData(getApplicationContext());

iOS

customerGlu.clearGluData();

Flutter

CustomergluPlugin.clearGluData()

React Native

import {dataClear} from '@customerglu/react-native-customerglu';
dataClear();

Handling Webview Events

CG Webviews send the following types of events to the app:

• Deeplink redirection Events (OPEN_DEEPLINK): Redirect to a given screen on click of buttons from CustomerGlu UIs Example: Clicking on "Go To Cart" should redirect to the Cart Screen

• Analytics Events (ANALYTICS): Send click analytics events on CG UI directly from the app to your servers/CDP Platform Example: coupon code copied event

Note: Analytics events need to be explicitly enabled

Enable Analytics Events

If click analytics are to be captured directly via the app, you can enable the analytics events by using the given function:

Android

customerGlu.enableAnalyticsEvent(true);

iOS

customerGlu.enableAnalyticsEvent(event: true)

Flutter

CustomergluPlugin.enableAnalyticsEvent(true)

React Native

import {enableAnalytic} from '@customerglu/react-native-customerglu';
enableAnalytic(true);

Handling Events

Android

For handling Deeplink or Analytics events triggered by the webview, you need to register a broadcast receiver and handle the logic for the respective event:

BroadcastReceiver mMessageReceiver;
 
mMessageReceiver = new BroadcastReceiver() {
    @Override
    public void onReceive(Context context, Intent intent) {
        try {

           if(intent.getAction().equalsIgnoreCase("CUSTOMERGLU_DEEPLINK_EVENT"))
            {
            String data =  intent.getStringExtra("data");
            JSONObject jsonObject = new JSONObject(data);
            String message = jsonObject.getString("deepLink");
           // Add the logic to redirect to appropriate page
          Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show();
            }
            /* If you want to listen analytics event */
             if(intent.getAction().equalsIgnoreCase("CUSTOMERGLU_ANALYTICS_EVENT"))
               {

                  String data =  intent.getStringExtra("data");
                  JSONObject jsonObject = new JSONObject(data);
                  Toast.makeText(getApplicationContext(), jsonObject.toString(), Toast.LENGTH_LONG).show();
                  //This Event can be forwarded to your Servers/CDP tool
                }
        }
        catch (Exception e)
        {
            System.out.println(e);
        }
    }

};
registerReceiver(mMessageReceiver,new IntentFilter("CUSTOMERGLU_DEEPLINK_EVENT"));
/* If you want to listen analytics event register the below reciever*/
registerReceiver(mMessageReceiver,new IntentFilter("CUSTOMERGLU_ANALYTICS_EVENT"));

Note: Do not unregister the broadcast receiver in the app lifecycle.

iOS

Deeplink Events

For handling Deeplink events triggered by the webview, you need to add a notification observer:

NotificationCenter.default.addObserver(
            self,
            selector: #selector(self.catchDeeplinkNotification),
            name: Notification.Name("CUSTOMERGLU_DEEPLINK_EVENT"),
            object: nil)

@objc private func catchDeeplinkNotification(notification: NSNotification) {
        //do stuff using the userInfo property of the notification object
        if let userInfo = notification.userInfo as? [String: Any] // or use if you know the type  [AnyHashable : Any]
        {
             print(userInfo)
        }
    }

Analytics Events

For handling analytics events triggered by the webview, you need to a notification observer:

NotificationCenter.default.addObserver(
          self,
          selector: #selector(self.catchAnalyticsNotification),
          name: Notification.Name("CUSTOMERGLU_ANALYTICS_EVENT"),
          object: nil)
@objc private func catchAnalyticsNotification(notification: NSNotification) {
      if let userInfo = notification.userInfo as? [String: Any]
      {
         print(userInfo)
			}
}

Flutter

For handling Deeplink and Analytics broadcast events in Flutter you need to create a MethodChannel and handle the logic for the respective event:

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);
      var json = jsonDecode(call.arguments);
      print(json["name"]);
      break;
    case "CUSTOMERGLU_ANALYTICS_EVENT":
      print("CUSTOMERGLU_ANALYTICS_EVENT");
      print(call.arguments);
      var json = jsonDecode(call.arguments);
      print(json["event_name"]);
      break;
  }
});

React Native

For handling Deeplink and Analytics broadcast events in React-Native you need to add following code in your js file :

useEffect(() => {
        const { Rncustomerglu } = NativeModules;
        const RncustomergluManagerEmitter = new NativeEventEmitter(Rncustomerglu);

        const eventanalytics = RncustomergluManagerEmitter.addListener(
            'CUSTOMERGLU_ANALYTICS_EVENT',
            (reminder) => console.log('CUSTOMERGLU_ANALYTICS_EVENT...', reminder)
        );
        const eventdeeplink = RncustomergluManagerEmitter.addListener(
            'CUSTOMERGLU_DEEPLINK_EVENT',
            (reminder) =>  
             if (Platform.OS === ‘ios’) {
                    reminder = reminder.data
                }
             console.log('CUSTOMERGLU_DEEPLINK_EVENT...', reminder)
        );
        }
        return () => {
            eventanalytics.remove();
            eventdeeplink.remove();
        }
    }, []);

Nudge Configuration

Nudge Configuration is an object that can be passed as an optional parameter to the openWallet, loadCampaignById and openNudge methods to configure the layout, height, and other related properties for the webview.

Android

NudgeConfiguration nudgeConfiguration = new NudgeConfiguration();
nudgeConfiguration.setAbsoluteHeight(700);
nudgeConfiguration.setRelativeHeight(60);
nudgeConfiguration.setLayout("bottom-popup");
nudgeConfiguration.setOpacity(0.9);
nudgeConfiguration.setCloseOnDeepLink(true);
 

iOS

let nudgeConfiguration = CGNudgeConfiguration()
            nudgeConfiguration.closeOnDeepLink = false
            nudgeConfiguration.opacity = 0.9
            nudgeConfiguration.layout = "bottom-default"
            nudgeConfiguration.absoluteHeight = 100
            nudgeConfiguration.relativeHeight = 70

Flutter

nudgeConfiguration = NudgeConfiguration(relativeHeight: 50,
absoluteHeight: 700, layout: "bottom-slider",closeOnDeepLink: true,
opacity: 0.7),

React-Native

 let nudgeConfigurationData = {
        nudgeConfiguration:{
             layout:'middle-default',
             opacity:'0.8',
             closeOnDeepLink:true,
             absoluteHeight:'50',
             relativeHeight:'60'
        },
    };

1. Relative Height - It accepts an integer value from 1 to 100 as Percentage(%) of device screen height. Default value: 70

2. Absolute Height - It accepts an integer value greater than 0. It follows native units like px (iOS) and dp (android) to adjust height. Default value: 0

Provide either relative or absolute dimensions for height. Priority is given to relative height in case of both being defined.

3. Layout - Set the layout of nudge. Possible values: [full-default, middle-popup, bottom-popup, bottom-slider] | Refer here to see al supported layouts. Default value : full-default

4. closeOnDeepLink - If set to true , the Webview will be dismissed automatically if the user is redirected to an app screen from a button in the UI. Default value: false

5. Opacity - For any of the layouts except for fullscreen, set the background opacity of the screen not covered by content. It can take values between 0 to 1, where 0 means fully transparent and 1 means fully opaque background. Default value: 0.5

Open Wallet

CustomerGlu offers a fully customisable wallet page which contains challenges, games, rewards and other user specific information as shown below:

Use the following function to open the wallet screen powered by CustomerGlu:

Android

customerGlu.openWallet(getApplicationContext(),nudgeConfiguration);

Function Parameters

1. Context: this/getApplicationContext()

2. NudgeConfiguration(optional) : Please refer to the NudgeConfiguration

iOS

customerGlu.openWallet(nudgeConfiguration: nudgeConfiguration)

Function Parameters

NudgeConfiguration(optional) : Please refer to the NudgeConfiguration

Flutter

CustomergluPlugin.openWallet(nudgeConfiguration: nudgeConfiguration)

Function Parameters:

NudgeConfiguration(optional) : Please refer to the NudgeConfiguration

React native

import { openWallet } from '@customerglu/react-native-customerglu';
openWallet(nudgeConfigurationData)

Function Parameters:

NudgeConfiguration(optional) : Please refer to the NudgeConfiguration

Open Campaign

You can also open specific campaigns by using the campaignId or tag assigned to a campaign.

CampaignId

Finding the campaignId

Tag

Adding a tag

Use the following function to open a specific campaign:

Android

customerGlu.loadCampaignById(getApplicationContext(),"CAMPAIGN_ID/TAG",nudgeConfiguration);

Function Parameters

1. Context: this/getApplicationContext()

2. CampaignId/Tag : Unique Identifier assigned to a campaign, can be copied from the dashboard.

3. NudgeConfiguration(optional) : Please refer to the NudgeConfiguration

iOS

customerGlu.loadCampaignById(campaign_id: "CAMPAIGN_ID/TAG", nudgeConfiguration: nudgeConfiguration);

Function Parameters

1. CampaignId/Tag : Unique Identifier assigned to a campaign, can be copied from the dashboard.

2. NudgeConfiguration(optional) : Please refer to the NudgeConfiguration

Flutter

CustomergluPlugin.loadCampaignById("CAMPAIGN_ID/TAG",nudgeConfiguration: nudgeConfiguration);

Function Parameters

1. CampaignId/Tag : Unique Identifier assigned a campaign, can be copied from the dashboard.

2. NudgeConfiguration - Please refer to NudgeConfiguration

React Native

import { loadCampaginById } from '@customerglu/react-native-customerglu';
loadCampaginById("CAMPAIGN_ID/TAG",nudgeConfigurationData)

Function Parameters

1. CampaignId/Tag : Unique Identifier assigned a campaign, can be copied from the dashboard.

2. NudgeConfiguration(optional) : Please refer to the NudgeConfiguration

Note: If the value of campaignId/tag provided is empty/invalid, wallet will be opened by default. To handle this case in a custom manner, CG_INVALID_CAMPAIGN_ID event can be consumed

Verify CampaignId

You can verify the campaignId before opening the campaign using the below method

Android

customerGlu.isCampaignValid("campaignId");

iOS

customerGlu.isCampaignValid("campaignId");

Above method returns the boolean value is the campaign valid or not.

Function Parameters

1. CampaignId/Tag : Unique Identifier assigned to a campaign, can be copied from the dashboard.

Entry Points

Entry Points are the various ways how users can discover and explore experiences like games, challenges, rewards, nudges, wallet, etc.

The following entry points are supported by CustomerGlu Mobile SDKs:

1. Banner

2. Floating Button/Launcher

3. Popup

4. Embed View

Banner Floating Button/Launcher

Popup

Enable Entry Points

Use the given function to enable Entry Points in the app (should be called on every app launch):

Android

customerGlu.enableEntryPoints(getApplicationContext(), true);

iOS

customerGlu.enableEntryPoints(enabled: true)

Flutter

CustomergluPlugin.enableEntryPoints(true);

React Native

import { enableEntryPoints } from '@customerglu/react-native-customerglu';
enableEntryPoints(true);

Setting up Banners

Banners need elements with unique ids to be pre-defined in the app screens. These components need to be added at all the places where banners need to show up- that is why it is important to add these elements generously, covering all possible use cases where a banner might be needed, as an app release will be required to edit them.

Note: These components will not take any screen space and will remain hidden in the background unless the banners configured are activated explicitly from the dashboard.

Android

Add the following component, wherever a banner might be needed, in the Activity’s layout file (XML):

<com.customerglu.sdk.entrypoints.Banner
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/someUniqueIdentifier"/> //same id should be configured on the dashboard

iOS

Banners can be set up in the following ways:

1. Storyboard / XIB

• Drag and drop an empty UIView on the ViewController in which a banner might be needed, and adjust it to the correct position.

• Under identity inspector add BannerView as the class name.

• Under attribute inspector add a unique value for BannerId.

• Height constraint can be added in the same view.

2. SwiftUI

If the app screens are developed using SwiftUI, add the following banner component, wherever a banner might be needed:

// Add code where a banner might be needed
Spacer()
VStack {
           AddBannerView()
}.padding(.horizontal, 10)
Spacer()

//Struct for adding banner view
struct AddBannerView: UIViewRepresentable {
    func updateUIView(_ uiView: BannerView, context: Context) {

    }
    
    func makeUIView(context: Context) -> BannerView {
        let view = BannerView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width-30, height: 0), bannerId: "Add unique bannerId ID here")
        view.setContentHuggingPriority(.required, for: .horizontal)
        view.setContentHuggingPriority(.required, for: .vertical)
        return view
    }
}

Flutter

Add the following banner component, wherever a banner might be needed, in the flutter layout :

CustomergluPlugin().showBanner(id:"uniqueBannerId") 

For Android:

In MainActivity add the following code in configureFlutterEngine to add BannerView:

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import com.customerglu.customerglu_plugin.FLNativeFactoryBannerView;

public class MainActivity extends FlutterActivity {

    @Override
    public void configureFlutterEngine( FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);
        flutterEngine
                .getPlatformViewsController()
                .getRegistry()
                .registerViewFactory("cgnativebanner", new FLNativeFactoryBannerView());
    }

}

React Native

Add the following banner component, wherever a banner might be needed, in the React-Native layout :

import { BannerWidget } from '@customerglu/react-native-customerglu';
<BannerWidget
    bannerId="UniqueBannerId"
 />

Note : The id or bannerId is mandatory and the exact same id needs to be set on the dashboard as the bannerId in the entry point configuration section. Please follow a semantic nomenclature like screenName_banner_1 for the ids for ease of configuration on the dashboard.

ℹ️ Banner Loaded Callback:

The banner will be hidden automatically in cases like the banner being disabled, user not eligible to see the banner (not in segment/campaign already completed).

If the status of banner components is also needed by the app, for use cases like changing the parent container size, depending on visibility of the banner, the following method can be used to check the banner availability:

Android

Register a Broadcast Receiver, listen for the banner load event and handle the logic:

BroadcastReceiver mMessageReceiver;

  mMessageReceiver = new BroadcastReceiver() {
            @Override
            public void onReceive(Context context, Intent intent) {
                // Extract data included in the Intent
                try {

                  
                    if (intent.getAction().equalsIgnoreCase("CUSTOMERGLU_BANNER_LOADED")) {

                        String data = intent.getStringExtra("data"); 
                         JSONObject jsonObject = new JSONObject(data);
                         
                         System.out.println(jsonObject.toString());
                       //  Output - {"banner1":2,"banner2":0}
           // Key is the bannerId and value is number of banners in the Banner Component
                    }

                } catch (Exception e) {
                    System.out.println(e);
                }
            }

        };

        registerReceiver(mMessageReceiver, new IntentFilter("CUSTOMERGLU_BANNER_LOADED"));

iOS

Add a Notification Observer, listen for the banner load event and handle the logic:

// Add Observer to listen Notification with name CUSTOMERGLU_BANNER_LOADED
NotificationCenter.default.addObserver(
                    self,
                    selector: #selector(self.getBannersCount),
                    name: Notification.Name("CUSTOMERGLU_BANNER_LOADED"),
                    object: nil)
                    
// Method to listen notification with name CUSTOMERGLU_BANNER_LOADED
@objc private func getBannersCount(notification: NSNotification) {
       if let userInfo = notification.userInfo as? [String: Any]
            {
                    //  Output - ["banner1":2,"banner2":0]
                    // Key is the bannerId and value is number of banners in the Banner Component
                    print(userInfo)
            }
  }

Flutter

Create a MethodChannel, listen for the banner load event and handle the logic:

static const broadcast_channel = MethodChannel("CUSTOMERGLU_EVENTS");
broadcast_channel.setMethodCallHandler((call) async {
  switch (call.method) {
    case "CUSTOMERGLU_BANNER_LOADED":
      print(call.arguments);
      break;

  }
});

React Native

Add the following code to listen for banner load event callback:

useEffect(() => {
        const { Rncustomerglu } = NativeModules;
        const RncustomergluManagerEmitter = new NativeEventEmitter(Rncustomerglu);
        const eventbanner = RncustomergluManagerEmitter.addListener(
            'CUSTOMERGLU_BANNER_LOADED',
            (reminder) => console.log('CUSTOMERGLU_BANNER_LOADED...', reminder)
        );
        const eventfheight = RncustomergluManagerEmitter.addListener(
            'CGBANNER_FINAL_HEIGHT',
             (reminder) => {
                    console.log('CGBANNER_FINAL_HEIGHT....', reminder["entry1"])
                    if (reminder["entry1"]) {                            
                }
            );
        }

        return () => {
            eventbanner.remove();
            eventfheight.remove();
        }
    }, []);

Setting up Embed View

Embed views can be used to embed CustomerGlu campaigns and screens directly in your native screens. Embed view works similar to Banners and needs elements with unique ids to be pre-defined in the app screens. These components need to be added at all the places where Embed view need to show up- that is why it is important to add these elements generously, covering all possible use cases where a Embed view might be needed, as an app release will be required to edit them.

Note: These components will not take any screen space and will remain hidden in the background unless the embed views configured are activated explicitly from the dashboard.

Android

Add the following component, wherever a banner might be needed, in the Activity’s layout file (XML):

 <com.customerglu.sdk.entrypoints.CGEmbedView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:id="@+id/someUniqueIdentifier"/> //same id should be configured on the dashboard

iOS

Banners can be set up in the following ways:

1. Storyboard / XIB

• Drag and drop an empty UIView on the ViewController in which a banner might be needed, and adjust it to the correct position.

• Under identity inspector add CGEmbedView as the class name.

• Under attribute inspector add a unique value for embedId.

• Height constraint can be added in the same view.

2. SwiftUI

If the app screens are developed using SwiftUI, add the following banner component, wherever a banner might be needed:

// Add code where a banner might be needed
Spacer()
VStack {
CGEmbedView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 0), embedId: "embedded1")}.padding(.horizontal, 10)
Spacer()

//Struct for adding embed view
struct EmbedViewAdd: UIViewRepresentable {
  func updateUIView(_ uiView: CGEmbedView, context: Context) {
  }
  func makeUIView(context: Context) -> CGEmbedView {
    let view = CGEmbedView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 0), embedId: "embedded1")
    view.setContentHuggingPriority(.required, for: .horizontal) // << here !!
    view.setContentHuggingPriority(.required, for: .vertical)
    // the same for compression if needed
    return view
  }
}
  
  

Flutter

Add the following embed component, wherever a embed view might be needed, in the flutter layout :

CustomergluPlugin().CGEmbedView(id:"uniqueEmbedId") 

For Android:

In MainActivity add the following code in configureFlutterEngine to add BannerView:

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import com.customerglu.customerglu_plugin.FLNativeFactoryBannerView;

public class MainActivity extends FlutterActivity {

    @Override
    public void configureFlutterEngine( FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);
        flutterEngine
                .getPlatformViewsController()
                .getRegistry()
                .registerViewFactory("cgnativebanner", new FLNativeFactoryBannerView());
    }

}

React Native

Add the following embed component, wherever a embed view might be needed, in the React-Native layout :

import { BannerWidget } from '@customerglu/react-native-customerglu';
  EmbedBannerHeight = RncustomergluManagerEmitter.addListener(
                'CGEMBED_FINAL_HEIGHT',
                (reminder) => {
                    console.log('reminder----', reminder);
                    console.log('reminder["embedded1"]....', reminder["embedded1"])
                    if (reminder && reminder["embedded1"]) {
                        finalEBHeight = (reminder["embedded1"]);
                    }

                }

            );

<EmbedBannerWidget
                    style={{ width: '100%', height: Platform.OS === 'ios' ? finalEBHeight : null }}
                    bannerId="embedded1"
                />

Note : The id or bannerId is mandatory and the exact same id needs to be set on the dashboard as the bannerId in the entry point configuration section. Please follow a semantic nomenclature like screenName_banner_1 for the ids for ease of configuration on the dashboard.

Setting up Floating Buttons and Popups and PIP

As Floating Buttons and Popups are overlays, they need no special components to be predefined like Banners. They only need to be added on all screens/activities of the app and each screen should be assigned a name/identifier which can then be used to configure these entrypoints via the dashboard.

Android

The given function should be used on every Activity's onResume Method to support adding the floating button/popup entry points on the activity via the dashboard:

@Override
protected void onResume() {
    super.onResume();
    customerGlu.showEntryPoint(MainActivity.this,"screenName");
} 

iOS

The given function should be used on each ViewController's viewWillAppear() method to support adding the floating button/popup entry points via the dashboard:

override func viewWillAppear(_ animated: Bool) {
    super.viewDidLoad()
    customerGlu.setCurrentClassName(className: String(describing: type(of: self)))
}

Flutter

The given code should be added on every Activity:

@override 
Widget build(BuildContext context) { 
return CGScreenDetector(
 classname: "screenName",
  child: Scaffold( 
  body: Container( 
  width: MediaQuery.of(context).size.width, 
  decoration: BoxDecoration(color: Colors.white), 
  child: Text("My Widget");
      ),
     )
    );
   }
  

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);
} 

React Native

The given function should be used on every Activity's useFocusEffect() Method to support adding the floating button/popup entry points on the activity via the dashboard:

import { SetCurrentClassName } from '@customerglu/react-native-customerglu';
import { useFocusEffect, useRoute } from "@react-navigation/native";
const route = useRoute();
    useFocusEffect(
        React.useCallback(() => {
            SetCurrentClassName(route.name);
        }, [navigation])
    );
   

Handle CustomerGlu Nudges

The push and in-app nudges sent via CustomerGlu need to be handled by the app.

Android

Add the displayCustomerGluNotification method in the Firebase onMessageRecieved callback to handle nudges, as shown below:

@RequiresApi(api = Build.VERSION_CODES.M)
@Override
public void onMessageReceived(@NonNull RemoteMessage remoteMessage) {
    super.onMessageReceived(remoteMessage);
    JSONObject data = null;
    JSONObject json = new JSONObject(remoteMessage.getData());

     customerGlu.displayCustomerGluNotification(this,json,R.drawable.icon,0.5,true);

    }

Function Parameters:

1. context : this/getApplicationContext()

2. json : The json object of the remote message.

3. icon : The App Icon to be displayed for the push notifications.

4. opacity: For any of the layouts except for fullscreen, set the background opacity of the screen not covered by content. Can take values between 0 to 1, where 0 means fully transparent and 1 means fully opaque background. (Default value is 0.5)

5. autoclosewebview : If set to true , the webview will be dismissed automatically if the user is redirected to an app screen from a button in the UI

Note: App icon should be in PNG format with size less than 100KB.

Handling Nudges for Background/Killed State

Add the given snippet on the Splash Screen to fetch nudge data and then call the displayCustomerGluBackgroundNotification method on the same

Intent parent_intent = getIntent();
String intentSource = "none";
    if (parent_intent != null) {
        if (parent_intent.getExtras() != null) {
            intentSource = parent_intent.getExtras().getString("type", "none");
            String myType = parent_intent.getExtras().getString("from", "none");
                if (intentSource.equalsIgnoreCase("CustomerGlu")) {
                    Bundle data = parent_intent.getExtras();
                    JSONObject json = new JSONObject();
                    Set<String> keys = data.keySet();
                    for (String key : keys) {
                        try {
                            json.put(key, JSONObject.wrap(data.get(key)));
                            } catch (JSONException e) {
                                        //Handle exception here
                            }
                            }
                    Intent i = new Intent(SplashScreen.this, MainActivity.class);
                    i.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);
                    startActivity(i);
                    CustomerGlu.getInstance().displayCustomerGluBackgroundNotification(getApplicationContext(), json);


                            }
                        }
      }

iOS

Configure Notification Type

Set the sender of the nudge (Firebase/APNS) in the AppDelegate file:

customerGlu.isFcmApn(fcmApn:"fcm") //or "apn"

Function Parameter

fcmApn: It accepts a string value out of "fcm" or "apn" depending on the notification service being used by the app.

Set FCM/APNS Token

Add following code in didFinishLaunchingWithOptions()

 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

          
        UNUserNotificationCenter.current().delegate = self
        let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
        UNUserNotificationCenter.current().requestAuthorization(
            options: authOptions,
            completionHandler: {_, _ in })
        application.registerForRemoteNotifications()

        //Only For FCM
        FirebaseApp.configure()
        Messaging.messaging().delegate = self

        return true
    }

Add the following extension in AppDelegate:

extension AppDelegate: UNUserNotificationCenterDelegate {
    
    // Receive displayed notifications for iOS 10 devices.
    func userNotificationCenter(_ center: UNUserNotificationCenter,
                                willPresent notification: UNNotification,
                                withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
        // Change this to your preferred presentation option
        customerGlu.cgUserNotificationCenter(center, willPresent: notification, withCompletionHandler: completionHandler)
    }
    
    func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) { //apn
        let tokenString = deviceToken.reduce("", {$0 + String(format: "%02X", $1)})
        print("Device token: \(tokenString)")
        customerGlu.apnToken = tokenString
        
        // Not required for FCM
        let userData = [String: AnyHashable]()
        customerGlu.updateProfile(userdata: userData) { success in
            if success {
            } else {
            }
        }
        
        //Only required for FCM
        Messaging.messaging().apnsToken = deviceToken
        print("APNs token retrieved: \(deviceToken)")
    }
    
    func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
    }
    
    func userNotificationCenter(_ center: UNUserNotificationCenter,
                                didReceive response: UNNotificationResponse,
                                withCompletionHandler completionHandler: @escaping () -> Void) {
        let userInfo = response.notification.request.content.userInfo
        print(userInfo)
  // autoclosewebview - If True then it will dismiss the webview on Deeplink Event.

customerGlu.displayBackgroundNotification(remoteMessage: userInfo as? [String: AnyHashable] ?? ["glu_message_type":"glu"],auto_close_webview:false)        completionHandler()
        completionHandler()
    }
    
    func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable: Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
        print(userInfo)
          // autoclosewebview - If True then it will dismiss the webview on Deeplink Event.

customerGlu.cgapplication(application, didReceiveRemoteNotification: userInfo, backgroundAlpha: 0.5 ,auto_close_webview:false,fetchCompletionHandler: completionHandler)     }
     }
    
    func messaging(_ messaging: Messaging, didRefreshRegistrationToken fcmToken: String) {
        print(fcmToken)
    }
}

// MARK: FCM Notification delegate
extension AppDelegate: MessagingDelegate {
    func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
        print("Firebase registration token: \(String(describing: fcmToken))")
        customerGlu.fcmToken = fcmToken ?? ""
        let userData = [String: AnyHashable]()
        customerGlu.updateProfile(userdata: userData) { success in
            if success {
            } else {
            }
        }
    }
}

Flutter

Android

Add your Notification icon in meta-data of the AndroidManifest.xml file like this:

<meta-data
    android:name="CUSTOMERGLU_NOTIFICATION_ICON"
    android:resource="@drawable/appicon" /><!-- only value should be changed -->

Add the following method in the Firebase message listener:

FirebaseMessaging.onMessage.listen((message) {
  print("FirebaseMessaging.onMessage.listen");
  CustomergluPlugin.displayCustomerGluNotification(message.data,autoclosewebview: true);
});
  FirebaseMessaging.onMessageOpenedApp.listen((message) {
      print("FirebaseMessaging.onMessageOpenedApp.listen");
      CustomergluPlugin.displayCustomerGluBackgroundNotification(message.data);
    });
        FirebaseMessaging.instance.getInitialMessage().then((message) async {
      print("FirebaseMessaging.instance.getInitialMessage().then((message)");
      if (message != null) {
        CustomergluPlugin.displayCustomerGluBackgroundNotification(message.data);

      }
    });

Function Parameters:

autoclosewebview : If set to true , the webview will be dismissed automatically if the user is redirected to an app screen from a button in the UI.

iOS

Configure Notification Type

Set the sender of the nudge (Firebase/APNS) in the AppDelegate file:

customerGlu.isFcmApn(fcmApn:"fcm") //or "apn"

Function Parameter

fcmApn: It accepts a string value out of "fcm" or "apn" depending on the notification service being used by the app.

Set FCM/APNS Token

Add following code in didFinishLaunchingWithOptions()

 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

          
        UNUserNotificationCenter.current().delegate = self
        let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
        UNUserNotificationCenter.current().requestAuthorization(
            options: authOptions,
            completionHandler: {_, _ in })
        application.registerForRemoteNotifications()

        //Only For FCM
        FirebaseApp.configure()
        Messaging.messaging().delegate = self

        return true
    }

Add the following extension in AppDelegate:

extension AppDelegate: UNUserNotificationCenterDelegate {
    
    // Receive displayed notifications for iOS 10 devices.
    func userNotificationCenter(_ center: UNUserNotificationCenter,
                                willPresent notification: UNNotification,
                                withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
        // Change this to your preferred presentation option
        CustomerGlu.getInstance.cgUserNotificationCenter(center, willPresent: notification, withCompletionHandler: completionHandler)
    }
    
    func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) { //apn
        let tokenString = deviceToken.reduce("", {$0 + String(format: "%02X", $1)})
        print("Device token: \(tokenString)")
        CustomerGlu.getInstance.apnToken = tokenString
        
        // Not required for FCM
        let userData = [String: AnyHashable]()
        CustomerGlu.getInstance.updateProfile(userdata: userData) { success in
            if success {
            } else {
            }
        }
        
        //Only required for FCM
        Messaging.messaging().apnsToken = deviceToken
        print("APNs token retrieved: \(deviceToken)")
    }
    
    func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
    }
    
    func userNotificationCenter(_ center: UNUserNotificationCenter,
                                didReceive response: UNNotificationResponse,
                                withCompletionHandler completionHandler: @escaping () -> Void) {
        let userInfo = response.notification.request.content.userInfo
        print(userInfo)
  // autoclosewebview - If True then it will dismiss the webview on Deeplink Event.

CustomerGlu.getInstance.displayBackgroundNotification(remoteMessage: userInfo as? [String: AnyHashable] ?? ["glu_message_type":"glu"],auto_close_webview:false)        completionHandler()
        completionHandler()
    }
    
    func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable: Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
        print(userInfo)
          // autoclosewebview - If True then it will dismiss the webview on Deeplink Event.

CustomerGlu.getInstance.cgapplication(application, didReceiveRemoteNotification: userInfo, backgroundAlpha: 0.5 ,auto_close_webview:false,fetchCompletionHandler: completionHandler)     }
     }
    
    func messaging(_ messaging: Messaging, didRefreshRegistrationToken fcmToken: String) {
        print(fcmToken)
    }
}

// MARK: FCM Notification delegate
extension AppDelegate: MessagingDelegate {
    func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
        print("Firebase registration token: \(String(describing: fcmToken))")
        CustomerGlu.getInstance.fcmToken = fcmToken ?? ""
        let userData = [String: AnyHashable]()
        CustomerGlu.getInstance.updateProfile(userdata: userData) { success in
            if success {
            } else {
            }
        }
    }
}

React native

• Add the given dependencies in your application's package.json file:

"@react-native-community/push-notification-ios": "^1.10.1",
"@react-native-firebase/messaging": "^15.1.1",
"react-native-push-notification": "^8.1.1"

• Import the given function:

import { DisplayCGNotification,DisplayCGBackgroundNotification } from '@customerglu/react-native-customerglu';

• Add it in the PushNotification library onNotification callback, as shown below:

import PushNotification from "react-native-push-notification";
PushNotification.configure({
  // (required) Called when a remote is received or opened, or local notification is opened
       onNotification: function (notification) {
        console.log("NOTIFICATION----:", notification);
        if (notification.foreground) {
            if (notification.data.glu_message_type) {
                //ios notification open from forground
                DisplayCGNotification(notification.data, true)

            } else {
                DisplayCGNotification(notification.data.data, true)
            }
        } else {
            //ios  notification open from Background 
            if(Platform.OS==='android'){
                DisplayCGBackgroundNotification(notification.data, true)
            }else{
                DisplayCGNotification(notification.data, true)
            }
        }
    },
    
});

For Android -

Add your Notification icon in meta-data of the AndroidManifest.xml file like this:

<meta-data
    android:name="CUSTOMERGLU_NOTIFICATION_ICON"
    android:resource="@drawable/appicon" />

For iOS

• Create a file named NotificationServices.js in the src folder and add given code in the file:

import messaging from '@react-native-firebase/messaging';
import AsyncStorage from '@react-native-async-storage/async-storage'
import { setApnFcmToken } from '@customerglu/react-native-customerglu'
import PushNotification from 'react-native-push-notification';
import { Platform } from 'react-native';
export async function requestUserPermission() {
    const authStatus = await messaging().requestPermission();
    const enabled =
        authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
        authStatus === messaging.AuthorizationStatus.PROVISIONAL;

    if (enabled) {
        console.log('Authorization status:', authStatus);
        getFcmToken()
    }
}


const getFcmToken = async () => {
    try {
        const fcmTokenfcm = await messaging().getToken()
        await AsyncStorage.setItem('fcmTokenFCM', fcmTokenfcm);
        console.log("fcm token generated", fcmTokenfcm)

        // --------------------If setApnFcmTokenEx((token.token, "")) for apn is commented uncomment below line -------------

        if (Platform.OS === 'ios') {
            setApnFcmToken("", fcmTokenfcm);
        }


    } catch (error) {
        console.log("error in fcm", error)
    }
}

export const notificationListner = async () => {


    messaging().setBackgroundMessageHandler(async remoteMessage => {
        console.log('Message handled in the background!', remoteMessage);
    });

    messaging().onMessage(async remoteMessage => {
        PushNotification.localNotification({
            userInfo: {
                data: remoteMessage.data,
            },
            title: remoteMessage.notification.title,
            message: remoteMessage.notification.body,
           

        });
    });


}

• Add the given code in App.js :

    useEffect(() => {
        if (Platform.OS === 'ios') {
            const type = 'notification';
            PushNotificationIOS.addEventListener(type, onRemoteNotification);
            requestUserPermission();
            notificationListner();
        }
    }, [])

• Update the pod file as shown below and and install it again:

//Reference URLs
//https://rnfirebase.io/install-ios
//https://rnfirebase.io/messaging/usage/installation/ios

//Add Following lines
pod 'RNFBApp', :path => '../node_modules/@react-native-firebase/app'
pod 'RNFBMessaging', :path => '../node_modules/@react-native-firebase/messaging'

use_frameworks! :linkage => :static
pod 'Firebase/Messaging'

$RNFirebaseAsStaticFramework = true

// Remove the following line if it exists
flipper_configuration => FlipperConfiguration.enabled

Configure Notification Type

Set the sender of the nudge (Firebase/APNS)

customerGlu.isFcmApn(fcmApn:"fcm") //or "apn"

Function Parameter

fcmApn: It accepts a string value out of "fcm" or "apn" depending on the notification service being used by the app.

Set FCM/APNS Token

• Add following code in didFinishLaunchingWithOptions()

 #import <UserNotifications/UserNotifications.h>
#import <UserNotifications/UNUserNotificationCenter.h>
#import <RNCPushNotificationIOS.h>

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{
  [FIRApp configure];  // Required only if ypu are using FCM
  #ifdef FB_SONARKIT_ENABLED
    InitializeFlipper(application);
  #endif
  
  
  [application registerForRemoteNotifications];
  
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"RncustomergluExample"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
  center.delegate = self;
  return YES;
}

• Add the following method in AppDelegate.m:

-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler
{

  NSLog(@"cgUserNotificationCenter");
  completionHandler(UNNotificationPresentationOptionSound | UNNotificationPresentationOptionAlert | UNNotificationPresentationOptionBadge);
}
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
 [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}
// Required for the notification event. You must call the completion handler after handling the remote notification.
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}
// Required for the registrationError event.
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
 [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
}
// Required for localNotification event
- (void)userNotificationCenter:(UNUserNotificationCenter *)center
didReceiveNotificationResponse:(UNNotificationResponse *)response
         withCompletionHandler:(void (^)(void))completionHandler
{
  
  [RNCPushNotificationIOS didReceiveNotificationResponse:response];
}

Supported Layouts

The following layouts are supported by CustomerGlu Mobile SDKs for various functionalities like opening wallet, campaigns, nudges, etc.

Fullscreen Middle Popup

Bottom Popup Bottom Slider (Draggable)

Handling Dark Mode/Light Configuration

The dark mode settings in the CustomerGlu SDK (only v2.2.0+) can be configured using the following Methods

Handling Configuration Changes

For handling configuration changes like dark/light mode, orientation, etc., Flutter and React-Native apps need to implement this method in android MainActivity

Flutter

   @Override
    public void onConfigurationChanged(@NonNull Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        CGUtils.handleConfigurationChanges(this);

    }

React-Native

   @Override
    public void onConfigurationChanged(@NonNull Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        CGUtils.handleConfigurationChanges(this);

    }

Handling CustomerGlu Deeplinks

CustomerGlu provides Universal Deeplinks to access particular campaigns and wallet page. To support these deeplinks in the app and redirection to playstore/appstore in case the app is not installed, please follow the given steps:

Android

Step 1

Put the intent-filter inside the activity tag in Android Manifest as below to handle navigation to that activity

        <intent-filter
                android:autoVerify="true"
                tools:targetApi="m">
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data
                    android:scheme="https"
                    android:host="<your-deeplink-subdomain>.cglu.us" />

            </intent-filter>

Step 2

To get the intent data from url you need to add the following method in the OnCreate() of your activity

customerglu.setupCGDeepLinkIntentData(this);

Function Parameter

activity : Pass the activity inside the method

Step 3

To handle deeplinks in a custom manner, add the listener in the Application Class to get the callback

        CustomerGlu.getInstance().setCgDeepLinkListener(new CGDeepLinkListener() {
            @Override
            public void onSuccess(CGConstants.CGSTATE message, DeepLinkWormholeModel.DeepLinkData deepLinkData) {

                if (message.equals(CGConstants.CGSTATE.DEEPLINK_URL)) {
                    String url = "";
                    if (deepLinkData.getContent().getUrl() != null) {
                        url = deepLinkData.getContent().getUrl();

                    }
                    // Add your logic
                }
            }

            @Override
            public void onFailure(CGConstants.CGSTATE exceptions) {
                Log.e("Failure ", exceptions.toString());

            }
        });

iOS

Step 1

Add the Associate domain in your project

Step 2

For SwiftUI

Implement .onOpenURL for the Launch view defined in WindowGroup in Scene class

SomeView.onOpenURL { url in
            // URL handling
            CustomerGlu.getInstance.openDeepLink(deepurl: url){
              success, string, deeplinkdata in
               
            }
           
          }

For UI Kit

Implement the following method in AppDelegate.swift file

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
  CustomerGlu.getInstance.openDeepLink(deepurl: url){
              success, string, deeplinkdata in
               
            }
    return true
}

Flutter

Android Put the intent-filter inside the activity tag in Android Manifest

        <intent-filter
                android:autoVerify="true"
                tools:targetApi="m">
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data
                    android:scheme="https"
                    android:host="testapp.cglu.us" />

            </intent-filter>

iOS Add the Associate domain in your project

Flutter

Add the callback in main.dart in method channel

 broadcast_channel.setMethodCallHandler((call) async {
      switch (call.method) {

case "CG_UNI_DEEPLINK_EVENT":
          print("CG_UNI_DEEPLINK_EVENT FROM FLUTTER");
          print(call.arguments);
          var json = jsonDecode(call.arguments);
          break;
}
}

React Native

Android Put the intent-filter inside the activity tag in Android Manifest

        <intent-filter
                android:autoVerify="true"
                tools:targetApi="m">
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data
                    android:scheme="https"
                    android:host="testapp.cglu.us" />

            </intent-filter>

iOS Add the Associate domain in your project

React-Native

Implement the below callback:

 const CG_UNI_DEEPLINK_EVENT = RncustomergluManagerEmitter.addListener(
            'CG_UNI_DEEPLINK_EVENT',
            (reminder) => 
            console.log('CG_UNI_DEEPLINK_EVENT...', reminder)
        );

Send Events (to CG)

User events which may lead to rewards via a campaign need to be sent to CG. These events can be sent directly via the SDKs using the sendEventData method:

Note: Check out all available options to send events here

Android

HashMap<String,Object> eventProperties = new HashMap();
eventProperties.put("orderValue",1000);
customerGlu.sendEventData(Context,"Order_Placed",eventProperties);

Function Parameters

1. Context : this/getApplicationContext()

2. EventName: Event names like order_placed, add_to_cart etc.

3. EventProperties - Event properties like orderId, orderAmountetc. as a HashMap

iOS

customerGlu.sendEventData(eventName:"Order_Placed",eventProperties:["orderValue",1000])

Function Parameters

1. eventName: Event names like order_placed, add_to_cart etc.

2. eventProperties - Event properties like orderId, orderAmountetc as a dictonary.

Flutter

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

Function Parameters

1. EventName: Event names like order_placed, add_to_cart etc.

2. EventProperties - Event properties like orderId, orderAmountetc. as an object

React Native

import { sendData } from '@customerglu/react-native-customerglu';
let obj = { 
eventName: "completePurchase", 
eventProperties: {
    "orderValue":1000,
    "orderId":"xyz"
    }
}
sendData(obj);

Function Parameters:

1. EventName: Event names like order_placed, add_to_cart etc.

2. EventProperties - Event properties like orderId, orderAmountetc. as an object

Enable SDK Debugging Mode

Debugging mode enables logging for ease of debugging.

Note: Please make sure to disable debugging mode in Release/Production build.

The given function can be used to enable SDK debugging mode:

Android

customerGlu.gluSDKDebuggingMode(getApplicationContext(), true);

iOS

customerGlu.gluSDKDebuggingMode(enabled: true)

Flutter

CustomergluPlugin.gluSDKDebuggingMode(true);

React native

import { gluSDKDebuggingMode } from '@customerglu/react-native-customerglu';
gluSDKDebuggingMode(true);

Disable CustomerGlu SDK

All the functions of SDK can be disabled by using the method:

Android

customerGlu.disableGluSdk(true);

iOS

customerGlu.disableGluSdk(true);

Flutter

CustomergluPlugin.disableGluSdk(true)

React native

import { disableGluSdk } from '@customerglu/react-native-customerglu';

disableGluSdk(true);