Flutter is an open-source UI software development kit created by Google. It enabled you to develop apps for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase. The WebEngage Flutter Mobile SDK supports all the latest OS versions of Android and iOS.

🚧

Sample Application

Check this out for the sample main.dart.

Here's how you can integrate the WebEngage SDK with your Flutter apps:

1. Installation

Step 1: Add the webengage_flutter plugin in your pubspec.yaml file.

dependencies:
webengage_flutter: 1.0.3

🚧

Flutter version support

WebEngage Plugin 1.0.3 and above supports Flutter 2.2 (null-safety).
Use 1.0.2, if your application does not support Flutter null-safety.

Step 2: Run flutter packages get to install the SDK.

2. Android Initialization

Step 1: Initialize WebEngage in main.dart in initState();

WebEngagePlugin _webEngagePlugin = new WebEngagePlugin();

Step 2: Add your custom Application class to your android project.

public class MainApplication extends FlutterApplication {
    @Override
    public void onCreate() {
        super.onCreate();
       
    }
}

Add the entry in the application tag for your Application class in the AndroidManifest.class

<application
        android:name=".MainApplication"
.....

Step 3: Initialize WebEngage Android SDK in your 'MainApplication' class.

import com.webengage.sdk.android.WebEngageActivityLifeCycleCallbacks;
import io.flutter.app.FlutterApplication;
import com.webengage.webengage_plugin.WebengageInitializer;
import com.webengage.sdk.android.WebEngageConfig;
import com.webengage.sdk.android.WebEngage;
import com.webengage.sdk.android.WebEngageActivityLifeCycleCallbacks;
import com.webengage.sdk.android.LocationTrackingStrategy;

public class MainApplication extends FlutterApplication {
    @Override
    public void onCreate() {
        super.onCreate();
         WebEngageConfig webEngageConfig = new WebEngageConfig.Builder()
                .setWebEngageKey("YOUR_LICENCSE_CODE")
                .setAutoGCMRegistrationFlag(false)
                .setLocationTrackingStrategy(LocationTrackingStrategy.ACCURACY_BEST)
                .setDebugMode(true) // only in development mode
                .build();
        WebengageInitializer.initialize(this, webEngageConfig);
    }
}

Step 4: Add meta-data under in the AndroidManifest.xml file

🚧

IMPORTANT: Identifying Your Data Center

  • If your WebEngage dashboard URL starts with dashboard.webengage.com, then it means you're using our Global Data Center. (All data is stored here by default).

    • If you have specifically asked for your data to be stored in our India Data Center in your contract with WebEngage, then your dashboard url will start with dashboard.in.webengage.com.

Thus, depending on your data centre, add the appropriate meta-data under the application tag of your AndroidManifest.xml file:

Data Centre

Meta Data Tag

Global (US)

<meta-data android:name="com.webengage.sdk.android.environment" android:value="us" />

India

<meta-data android:name="com.webengage.sdk.android.environment" android:value="in" />

Step 5: Disable automatic backup inside the application tag in your AndroidManifest.xml file.

<application
        ...
        android:allowBackup="false"
        ....
                >

If your application needs allowBackup to be set as true, then follow the steps below:

a. Create backup rules inside res/xml folder (res/xml/my_backup_rules.xml)

<?xml version="1.0" encoding="utf-8"?>
    <full-backup-content>
        <exclude domain="sharedpref" path="webengage_prefs.txt.xml" />
        <exclude domain="sharedpref" path="webengage_volatile_prefs.txt.xml" />
        <exclude domain="database" path="event_data.db" />
        <exclude domain="database" path="http_data.db" />
        <exclude domain="database" path="user_data.db" />
        <exclude domain="file" path="we_http_cache" />

b. Add backup file inside application tag in your AndroidManifest.xml

<application
        ...
        android:allowBackup="true"
         android:fullBackupContent="@xml/my_backup_rules">

For Attribution data follow the steps here

3. iOS Initialization

Step 1: Add WebEngage configurations <your-project>/ios/<YourApp>/Info.plist file.

<dict>
    <key>WEGLicenseCode</key>
    <string>YOUR-WEBENGAGE-LICENSE-CODE</string>
    <key>WEGLogLevel</key>
    <string>VERBOSE</string>
</dict>

Step 2: Initialize WebEngage iOS SDK.

  • Import the WebEngage header in your AppDelegate file
#import <WebEngage/WebEngage.h>
import WebEngage
import webengage_flutter
  • In your didFinishLaunchingWithOptions: method notifies the WebEngage Flutter SDK of the application
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary * launchOptions {
    ...
  
    [[WebEngage sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions];
    
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end
WebEngage.sharedInstance().application(application, didFinishLaunchingWithOptions: launchOptions)
  • Configuring Info.plist
    Add the following property according to the data centre you are using.

WEGEnvironment

String

DEFAULT / IN

Mandatory

  • At WebEngage, you can choose to host all your data at two data centers, US or India. By default, your data is stored in our US (or Global) Data Center. However, you can choose to host it at our India Data Center by specifying the same in your contractual agreement.

For Global/ Default/ US Data Center:

  • If your WebEngage dashboard URL starts with dashboard.webengage.com, then it means you're using our Global Data Center.

  • Specify DEFAULT as the value for WEGEnvironment.

For India Data Center:

  • If your WebEngage dashboard URL starts with dashboard.in.webengage.com, then it means you're using our India Data Center.

  • Specify IN as the value for WEGEnvironment.

👍

Congratulations!

You have successfully integrated WebEngage with your Flutter apps and are sending user session data to WebEngage. Please note that it may take up to a few minutes for data to reflect on your dashboard.

Please feel free to drop in a few lines at [email protected] in case you have any further queries. We're always just an email away!


So, what's next?

We recommend that you implement the following integrations with your app before releasing it with WebEngage for the first time:

Did this page help you?