How to Configure and Integrate Mobile Chat SDK in Flutter App

Integrating the BoldDesk Chat SDK into your Flutter application enables you to provide a seamless and engaging chat experience for your users. With this SDK, customers can connect with support agents in real time, ensuring faster responses and improved satisfaction.

This guide offers clear, step-by-step instructions to configure and integrate the BoldDesk Chat SDK into your Flutter application, including installation and push notification setup. By completing this integration, you’ll enable your users to:

• Engage in real-time conversations with your support agents.
• Share files, screenshots, or documents directly within the chat for faster issue resolution.
• Enjoy a fully branded, customizable chat interface that aligns with your app’s design.
• Receive instant notifications for new chat messages, ensuring they never miss an update.

Whether you’re launching a new app or enhancing an existing one, the BoldDesk Chat SDK ensures a seamless, professional support experience—right inside your mobile application.

SDK Installation

Add SDK dependency

Add the following to your pubspec.yaml file:

dependencies: 
  bd_chat_sdk: {latest-version}

Then install the SDK using the flutter pub get command in the terminal. You can find the latest package version here Flutter Package

Import SDK

In your main.dart or the file where you want to use the SDK:

import 'package:bd_chat_sdk/bd_chat_sdk.dart';

Add the following permissions in Info.plist

<key>NSCameraUsageDescription</key>
<key>NSMicrophoneUsageDescription</key>
<key>NSPhotoLibraryUsageDescription</key>

Add the following permissions in AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <!-- To download or upload attachment via SDK -->
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" /> <!-- To receive push notification in your app -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera.any" />

<!-- Required to open camera and securely capture image via SDK -->
<provider
     android:name="androidx.core.content.FileProvider"
     android:authorities="${applicationId}.fileprovider"
     android:exported="false"
     android:grantUriPermissions="true">
     <meta-data
         android:name="android.support.FILE_PROVIDER_PATHS"
         android:resource="@xml/file_paths" />
     </provider>
 
<!-- Define cache directories path for camera image storage -->
<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <cache-path name="images" path="." />
</paths>

Configuration Methods

InitializeSDK

Initialize once in your application class or before using SDK features.

BoldDeskChatSDK.initialize(
    appKey: "Your AppKey", // Use Android and iOS key based on platform
    brandUrl: "yourdomain.bolddesk.com",
    culture: "en-US"
)

Show Chat

Launches the BoldDesk chat interface inside your app, allowing users to start or continue conversations with support agents.

BoldDeskChatSDK.showChat()

Close Chat

Closes the active chat window and returns the user to the app interface.

BoldDeskChatSDK.closeChat()

Prefilling User Fields

You can pre-fill user details before initializing the chat. This improves the user experience by eliminating the need for manual entry.

BoldDeskChatSDK.setPrefillFields(
         name = "John Do",
         email = "[email protected]",
         phoneNumber = "1234567890",
         chatFields = {}
        )

User Verification with JWT

Live Chat enables user verification using JSON Web Tokens (JWT). Through JWT-based verification, users are identified as either verified or not verified within the configured live chat. To learn more, see How to Verify Users Conversation In Live Chat.

BoldDeskChatSDK.setUserToken("your_token_here")

Clear Session

Resets the current chat session, removing user-specific data and cached information.

BoldDeskChatSDK.clearSession()

UI Customization

Apply Theme

You can dynamically apply themes for appbar and buttons

BoldDeskChatSDK.applyTheme(
    appBarColor = "#1976D2",     
    accentColor = "#FFC107",
    backgroundColor = "#1976D2", 
    stickyButtonColor = "#FFC107" 
)

Theme Modes

Font Customization

The SDK supports custom fonts defined in your main application

Include Font Files

• Add the .ttf font file to your project
• Add font name in your pubspec.yaml file

fonts: 
  - family: CustomFont 
    fonts: 
      - asset: assets/fonts/CustomFont-Regular.ttf 

Register Fonts in Code

// for Android
BoldDeskChatSDK.applyCustomFontFamilyInAndroid()

// for iOS
BoldDeskChatSDK.applyCustomFontFamilyIniOS()

Fallback

If no custom font is set, SDK will use your app theme’s default typeface.

Push Notification Integration

The SDK supports push notifications using Firebase Cloud Messaging (FCM) to alert users about incoming chat messages.

Add Firebase to Your Project

• Go to Firebase Console Add Firebase to your Flutter project
• Add a new iOS and Android app and register it with your Bundle Identifier
• Download the generated GoogleService file
• Add the file to your project
• Add Firebase dependencies in your pubspec.yaml file

firebase_core: ^4.2.0
firebase_messaging: ^16.0.3

Register push notifications

To register push notifications, include the following code snippet where you need to register the token after initializing Firebase in your project

await FirebaseMessaging.instance.getToken();
BoldDeskChatSDK.enablePushNotification(fcmToken) // register token to SDK 

Handling push notifications

To handle push notifications, include the following code snippet in the FirebaseMessaging listener.

 // for Android
 FirebaseMessaging.onMessage.listen((message) async {
      if (Platform.isAndroid) {
        if(await BoldDeskChatSDK.isFromChatSDK(message.data)) {
            BoldDeskChatSDK.handleAndroidNotification(message.data, "Your logo");
        }
    }
});

// for iOS
 if (Platform.isIOS) {
      FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) async {
           if(await BoldDeskChatSDK.isFromChatSDK(message.data)) {
             BoldDeskChatSDK.handleiOSNotification(message.data);
           }
      });
    }

Error Logging

Enable debug logging during development to view detailed SDK logs in Logcat.

 BoldDeskChatSDK.enableLogging()

API Reference

Limitation

Single SDK Instance:

Only one instance of the Chat SDK can run at a time. Initializing multiple instances simultaneously is not supported and may lead to unexpected behavior.

Sample App

A sample application is provided along with the SDK package to help you understand the integration flow and available features.
You can use this app to explore the SDK behavior before integrating it into your own project Flutter Sample.

Frequently Asked Questions (FAQ)

Q1: What is the BoldDesk Mobile Chat SDK for Flutter?
BoldDesk Chat SDK enables seamless integration of live chat widget functionality into your applications. With this SDK, you can embed BoldDesk’s chat widget features across platforms, delivering a smooth, customizable, and engaging customer support experience.

Q2: How do I install the SDK in my Flutter project?
You need to:

• Add the SDK dependency in your pubspec.yaml file:
  dependencies:
  bd_chat_sdk: ^1.0.0
• Run flutter pub get in your terminal.

Q3: What permissions should I add for iOS and Android?

• iOS (Info.plist):
  • NSCameraUsageDescription
  • NSMicrophoneUsageDescription
  • NSPhotoLibraryUsageDescription
• Android (AndroidManifest.xml):
  • INTERNET
  • ACCESS_NETWORK_STATE
  • READ_EXTERNAL_STORAGE (for attachments)
  • POST_NOTIFICATIONS (for push notifications)

Q4: How do I initialize the SDK?
Call:

BoldDeskChatSDK.initialize(
    appKey = "Your_AppKey",
    brandUrl = "yourdomain.bolddesk.com",
    culture = "en-US"
)

Initialize during app startup (e.g., in main.dart).

Q5: How do I enable push notifications?
Integrate Firebase Cloud Messaging (FCM):

• Add Firebase dependencies in your Podfile.
• Register your app in Firebase Console.
• Forward the FCM token to SDK using:

BoldDeskChatSDK.enablePushNotification(fcmToken)

Q6: How do I clear current conversation in the SDK?

• To clear the current conversation data in the chat SDK.

BoldDeskChatSDK.clearSession()

Q7: Does the SDK support multiple instances or languages?
No, only one SDK instance can run at a time.