How to Integrate Customerly with Flutter

This setup allows you to leverage Customerly’s support features in a Flutter app, making it easier for users to reach out and interact through Customerly’s chat interface.

Luca Micheli
Written by Luca MicheliLast update 13 days ago

Customerly currently doesn’t have a native Flutter SDK, so the integration requires using platform-specific SDKs for iOS and Android. This tutorial will walk you through the steps to add Customerly to your Flutter app by configuring each platform individually and bridging them with Flutter’s platform channels.

Step 1: Add Customerly SDK to Your Flutter Project

Since Customerly only provides SDKs for Android and iOS, we’ll integrate it natively for each platform. This will involve configuring your Flutter app’s Android and iOS folders separately and then using Flutter’s platform channels to interact with them.

Step 2: Setting Up Customerly on Android

1. Add Customerly to Your build.gradle Files

In your Android project, go to android/app/build.gradle and add Customerly SDK dependency.

dependencies {
    implementation 'io.customerly:customerly:3.1.1' // replace with the latest version
}

2. Initialize Customerly in MainActivity

In your MainActivity.kt file (or MainActivity.java if you’re using Java), initialize Customerly in the onCreate method. Replace YOUR_CUSTOMERLY_APP_ID with your actual Customerly app ID.

import io.customerly.Customerly
class MainActivity: FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        Customerly.configure(application, "YOUR_CUSTOMERLY_APP_ID")
    }
}

3. Create a Method Channel in MainActivity

We’ll use Flutter’s platform channels to trigger actions on the native side. Define a method channel to handle actions like opening the chat.

import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
class MainActivity : FlutterActivity() {
    private val CHANNEL = "customerly"
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            if (call.method == "openChat") {
                Customerly.openSupport(this)
                result.success(null)
            } else {
                result.notImplemented()
            }
        }
    }
}

Step 3: Setting Up Customerly on iOS

1. Install Customerly SDK with CocoaPods

Open the ios directory in your Flutter project, then add the Customerly SDK to your Podfile:

pod 'CustomerlySDK'

Run pod install to install the SDK.

2. Initialize Customerly in AppDelegate.swift

In AppDelegate.swift, configure Customerly in the didFinishLaunchingWithOptions method. Replace "YOUR_CUSTOMERLY_APP_ID" with your actual project ID.

import CustomerlySDK
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        Customerly.sharedInstance.configure(appId: "YOUR_CUSTOMERLY_APP_ID")
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

3. Create a Method Channel in AppDelegate.swift

Just as with Android, we’ll use a method channel to handle Customerly actions from Flutter.

import CustomerlySDK
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        Customerly.sharedInstance.configure(appId: "YOUR_CUSTOMERLY_APP_ID")
        let controller = window?.rootViewController as! FlutterViewController
        let customerlyChannel = FlutterMethodChannel(name: "customerly", binaryMessenger: controller.binaryMessenger)
        customerlyChannel.setMethodCallHandler { (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
            if call.method == "openChat" {
                Customerly.sharedInstance?.openSupport(from: controller)
                result(nil)
            } else {
                result(FlutterMethodNotImplemented)
            }
        }
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

Step 4: Call Customerly from Flutter

With the platform channels set up, you can now trigger Customerly’s functionality from Flutter code.

1. Create a Dart Service for Customerly

In your Flutter code, create a service to open the Customerly chat using the method channel.

import 'package:flutter/services.dart';
class CustomerlyService {
  static const MethodChannel _channel = MethodChannel('customerly');
  static Future<void> openChat() async {
    try {
      await _channel.invokeMethod('openChat');
    } on PlatformException catch (e) {
      print("Failed to open Customerly chat: ${e.message}");
    }
  }
}

2. Use the Customerly Service in Your Flutter App

Now, you can call CustomerlyService.openChat() anywhere in your Flutter app to open the Customerly chat. For example, if you want to add a button to open the chat:

import 'package:flutter/material.dart';
import 'customerly_service.dart';
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Customerly Integration"),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              CustomerlyService.openChat();
            },
            child: Text("Open Customerly Chat"),
          ),
        ),
      ),
    );
  }
}

Did this answer your question?