# Quickstart Guide for Flutter Apps

## Pre-Requisites <a href="#pre-requisites" id="pre-requisites"></a>

* Android Studio
* Xcode

## **Recipe** <a href="#recipe" id="recipe"></a>

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&#x20;

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

<div align="left"><img src="https://img.shields.io/badge/github-repo-67F337?logoColor=67F337" alt="SandboxApp"></div>

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.

{% tabs %}
{% tab title="Android" %}

* Open the Android Manifest file located at `/android/app/src/main/AndroidManifest.xml`&#x20;
* Add your API Key in `<meta-data>` of the `AndroidManifest.xml` file  like this:

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

{% hint style="info" %}
[#how-to-find-your-customerglu-api-key](https://docs.customerglu.com/schema/faq#how-to-find-your-customerglu-api-key "mention")
{% endhint %}
{% endtab %}

{% tab title="iOS" %}
Open the  Info.plist file path - ios/app\_name/Info.plist Add the following key to the `Info.plist` fil&#x65;**:**

```xml
<key>CUSTOMERGLU_API_KEY</key>
<string>YOUR_API_KEY</string>
```

{% hint style="info" %}
[#how-to-find-your-customerglu-api-key](https://docs.customerglu.com/schema/faq#how-to-find-your-customerglu-api-key "mention")
{% endhint %}
{% endtab %}
{% endtabs %}

### **2. Install Dependencies for Sandbox App**

Run the following command in the terminal to install dependencies&#x20;

```
flutter pub get
```

### 3. Launch the Emulator and build the App <a href="#id-3.-launch-the-emulator-and-build-the-app" id="id-3.-launch-the-emulator-and-build-the-app"></a>

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

<div align="left"><figure><img src="https://1004846827-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0ahLW2WavtwcwNbSR9%2Fuploads%2FYBaLz2qdWwsuxvmibTUY%2FScreenshot%202024-08-14%20at%204.01.57%E2%80%AFPM.png?alt=media&#x26;token=0c700067-0693-446c-8bfd-c991afed5044" alt="" width="339"><figcaption></figcaption></figure> <figure><img src="https://1004846827-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0ahLW2WavtwcwNbSR9%2Fuploads%2FX1B4iNNVjqhaZVmStueO%2FScreenshot%202024-08-14%20at%204.02.49%E2%80%AFPM.png?alt=media&#x26;token=5d3505f3-539e-4a6d-9a71-d389a99b4adb" alt="" width="334"><figcaption></figcaption></figure></div>

&#x20;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.

{% hint style="info" %}
For using segmentation for the users please look the [#updateuser-attributes](https://docs.customerglu.com/sdk/mobile-sdks#updateuser-attributes "mention")&#x20;
{% endhint %}

{% hint style="info" %}
We recommend using the `registerDevice()` call at the start of each session.
{% endhint %}

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

{% embed url="<https://youtu.be/esJG6kjzdfM>" %}

### 2. Copy the Campaign ID

After launching the campaign from dashboard copy the `campaignId` of that campaign&#x20;

<figure><img src="https://1004846827-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0ahLW2WavtwcwNbSR9%2Fuploads%2FW1tQ0v3vWFhcEAhdNAhY%2FScreenshot%202024-08-05%20at%209.14.03%E2%80%AFPM.png?alt=media&#x26;token=690bbf76-6c09-4ae7-92a9-2f32642715a7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1004846827-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0ahLW2WavtwcwNbSR9%2Fuploads%2FgbUGN3r28hUU6bd5Zof0%2FScreenshot%202024-08-14%20at%204.02.49%E2%80%AFPM.png?alt=media&#x26;token=69e2554a-2eb5-4b30-958e-4d3a136c32df" alt="" width="167"><figcaption></figcaption></figure>

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

{% embed url="<https://youtu.be/reaLR61xjgo>" %}

### 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

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

```

{% hint style="info" %}
We can use setCurrentClassName`("ScreenName") in the app's router code or screen initialisation code to enable Dynamic Nudges`
{% endhint %}

### 6. Testing the Dynamic Nudge

* Relaunch the Emulator&#x20;
* In the HomeScreen you are able to see the Floating nudge

<figure><img src="https://1004846827-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0ahLW2WavtwcwNbSR9%2Fuploads%2FfdjXUYRML3ScUDjuVTWw%2FScreenshot%202024-08-14%20at%204.27.59%E2%80%AFPM.png?alt=media&#x26;token=7abb2611-525a-4192-93c8-78a73aa98e68" alt="" width="210"><figcaption></figcaption></figure>

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

{% hint style="info" %}
For more Entry Points please refer [#entry-points](https://docs.customerglu.com/sdk/mobile-sdks#entry-points "mention")
{% endhint %}

## 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**

<figure><img src="https://1004846827-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0ahLW2WavtwcwNbSR9%2Fuploads%2FIVP0BwkK1mim09fgzvwx%2FScreenshot%202024-08-14%20at%206.23.53%E2%80%AFPM.png?alt=media&#x26;token=d375ee20-7fdb-4a00-b92b-998d75f3ef07" alt=""><figcaption></figcaption></figure>

### Handling Navigation on Button Tap&#x20;

1. **Observe Deeplink Events**&#x20;

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

<figure><img src="https://1004846827-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0ahLW2WavtwcwNbSR9%2Fuploads%2FTF4e6TVvZJstM5gHizNX%2FScreenshot%202024-08-14%20at%206.28.18%E2%80%AFPM.png?alt=media&#x26;token=a61d010b-39b8-42d7-a3df-c01016d40930" alt=""><figcaption></figcaption></figure>

2. **Edit \`main.dart\`**

   Locate[^1] the `initState` function and add the event listener:

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

```

3. **Capture Analytics Events**

   For Capture Analytics add another listener for analytics

```javascript
 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](https://docs.customerglu.com/sdk/mobile-sdks#pre-requisites) for full reference installation in your app and for advanced use cases.

## Additional References

* [Analytics Event Schema](https://docs.customerglu.com/schema/analytics-schema-v4)
* [Third Party Integration](https://docs.customerglu.com/third-party-integrations)
* [User Segmentations](https://docs.customerglu.com/miscellaneous-topics/user-segmentation)
* [Reward Webhooks](https://docs.customerglu.com/miscellaneous-topics/configuring-webhooks/rewards-webhook)

[^1]: