How to Configure and Integrate SDK in Your Flutter app

Integrating the BoldDesk Mobile Support SDK into your Flutter application allows you to deliver a seamless in-app support experience across both Android and iOS platforms. With this SDK, you can embed a help center that enables users to access Knowledge Base articles, submit support tickets, and receive real-time notifications—all without leaving your app.

This guide will walk you through the steps to install, configure, and customize the BoldDesk SDK for Flutter, including:

• Adding the SDK dependency in your pubspec.yaml file.
• Initializing the SDK and authenticating users with JWT.
• Displaying modules such as Knowledge Base, Submit Ticket, and Dashboard.
• Customizing the UI with themes, fonts, and branding elements.
• Setting up push notifications using Firebase Cloud Messaging (FCM).
• Enabling error logging and reviewing available APIs.

By following this guide, you’ll ensure a consistent, branded support experience for your Flutter users while maintaining secure authentication and real-time communication.

SDK Installation

Add SDK dependency

Add the following to your pubspec.yaml file:

dependencies: 
  bd_support_sdk: {latest-version}

Then install the SDK using flutter pub get command in 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_support_sdk/bolddesk_support_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" />

Initialization and Authentication

Initialize SDK

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

BoldDeskSupportSDK.initialize(
    appId = "YOUR_APP_ID",
    brandURL = "yourdomain.bolddesk.com"
)

Authenticate User with JWT

Learn more on How to Authenticate Users in BoldDesk Mobile SDK.

Use this method to authenticate SDK in your app after your backend generates a JWT token for the logged-in user

BoldDeskSupportSDK.loginWithJWTToken("JWT_TOKEN")

Logout

To unauthenticate a user, call the logout API. This will remove the user’s authentication and clear their session from the SDK.

if (!BoldDeskSupportSDK.isLoggedIn()) // check user logged-in or token expired
{
    // Call login API to authenticate user.
    BoldDeskSupportSDK.loginWithJWTToken(jwtToken = "Your JWT token",
    { 
        onSuccess: (message) {
             BoldDeskSupportSDK.logout(context)
         },
    })
}
else
    BoldDeskSupportSDK.logout(context)

Reset SDK

Use this to clear all user data and cached content

BoldDeskSupportSDK.clearAllLocalData()

Display Modules

The SDK provides independent and combined modules to integrate specific features into your app.

Knowledge Base (KB)

Displays articles, categories, and search functionality.

BoldDeskSupportSDK.showKB()

Submit Ticket Page

Opens a form for creating new support tickets.

BoldDeskSupportSDK.showSubmitTicket()

Dashboard (Home)

Displays a combined dashboard view with KB and Ticket options.

BoldDeskSupportSDK.showHome()

UI Customization

Apply Theme

You can dynamically apply themes for appbar and buttons

BoldDeskSupportSDK.applyTheme(
    primaryColor = "#1976D2",     // App primary color
    accentColor = "#FFC107"       // Buttons
)

Theme Modes

Set Custom Header Logo

You can display your brand logo in SDK headers.

BoldDeskSDKHome.setHeaderLogo("Your brand logo URL")

Custom Header Titles & Descriptions

You can modify section headers and description texts for:

• Home Dashboard
• Knowledge Base
• Submit Ticket

BoldDeskSDKHome.set(
    header = "Welcome to BoldDesk Help Center",
    description = "How can we help? We're here for you!",
    kbTitle = "Knowledge Base",
    kbDescription = "Explore help articles and FAQs.",
    ticketTitle = "Submit Ticket",
    ticketDescription = "Need assistance? Create a ticket below."
)

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

BDPortalConfiguration.customFontName = "Inter" or "Roboto" //font name

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 ticket updates and responses.

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 token after initializing Firebase in your project

await FirebaseMessaging.instance.getToken();
BoldDeskSupportSDK.setFCMRegistrationToken(fcmToken) // register token to SDK 

Handling push notifications

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

 // for Android
 FirebaseMessaging.onMessage.listen((message) async {
      if (Platform.isAndroid) {
      if (!BoldDeskSupportSDK.isLoggedIn()) //check user logged-in or token expired
        {
            //Call login API to authenticate user.
            BoldDeskSupportSDK.loginWithJWTToken(jwtToken = "Your JWT token",
            { 
                onSuccess: (message) {
                     // Icon should be Drawable source
                    BoldDeskSupportSDK.handleAndroidNotification(message.data, "Your app logo URL");
                 },
            })
        }
        else
            BoldDeskSupportSDK.handleAndroidNotification(message.data, "Your app logo URL");
      }
    });
    
// for iOS
 if (Platform.isIOS) {
      FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
        BoldDeskSupportSDK.handleIOSNotification(message.data);
      });
    }

Error Logging

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

 BoldDeskSupportSDK.setLoggingEnabled()

API Reference

Limitation

Single SDK Instance:

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

Language Support:

The current version of the SDK supports only the en-US language. Additional language support will be added in future releases.

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 Support SDK for Flutter?
The BoldDesk Mobile Support SDK allows you to embed a help center in your Flutter app, enabling users to access Knowledge Base articles, submit tickets, and receive real-time notifications without leaving the app.

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_support_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:

BoldDeskSupportSDK.initialize(
    appId = "YOUR_APP_ID",
    brandURL = "yourdomain.bolddesk.com"
)

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

Q5: How do I authenticate users?
Authentication uses JWT tokens generated by your backend. After login, call:

BoldDeskSupportSDK.LoginWithJWTToken("JWT_TOKEN")

Learn more about authentication flow in the related guide.

Q6: How do I log out or reset the SDK?

• To log out:

BoldDeskSupportSDK.logout(context)

• To clear all cached data:

BoldDeskSupportSDK.clearAllLocalData()

Q7: What modules can I display in my app?
You can show:

• Knowledge Base: BoldDeskSupportSDK.showKB()
• Submit Ticket Page: BoldDeskSupportSDK.showSubmitTicket()
• Dashboard (Home): BoldDeskSupportSDK.showHome()

Q8: Can I customize the SDK UI?
Yes, you can:

• Apply themes using applyTheme().
• Set light/dark/system theme modes.
• Add custom header logos and modify section titles.
• Apply custom fonts defined in your Flutter project.

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

• Add Firebase dependencies in pubspec.yaml:
  firebase_core: ^4.2.0
  firebase_messaging: ^16.0.3
• Register your app in Firebase Console.
• Forward the FCM token to SDK using:

BoldDeskSupportSDK.setFCMRegistrationToken(fcmToken)

Handle notifications using:

BoldDeskSupportSDK.handleAndroidNotification() or BoldDeskSupportSDK.handleIOSNotification()

Q10: Does the SDK support multiple instances or languages?

• Multiple instances: No, only one SDK instance can run at a time.
• Languages: Currently supports only en-US. More languages will be added in future releases.