Configure and Integrate Mobile Chat SDK in React Native App

Integrating the BoldDesk Chat SDK into your React Native 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 React Native 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

Install the SDK using npm

npm install bolddesk_chat_sdk

After installation, run

npx pod-install

This ensures the iOS native dependencies are linked. You can find the latest package version here React Native Package.

Import SDK

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

import BoldDeskChatSDK from 'bolddesk_chat_sdk'

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

Configure SDK

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

BoldDeskChatSDK.configure(
        appKey: "Your AppKey", //Use android and iOS key based on platform
        brandURL: "Your brand URL", 
        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(context)

Close Chat

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

BoldDeskChatSDK.closeChat(context)

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 on 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 your custom font files in your project under

./assets/fonts/

• Link the assets in react-native.config.js

module.exports = {
  assets: ['./assets/fonts'],
  };

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 chat incoming messages.

Add Firebase to Your Project

• Go to Firebase Console Add Firebase to your 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 package.json

"@react-native-firebase/app": "^23.4.1",
"@react-native-firebase/messaging": "^23.4.1",

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 messaging().getToken();
BoldDeskChatSDK.setFCMRegistrationToken(fcmToken) // register token to SDK 

Handling Push Notifications

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

//for android
if(await BoldDeskChatSDK.isFromChatSDK(message.data)) {
      BoldDeskChatSDK.handleAndroidNotification(message.data, "Your logo")
 }

//for iOS
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 React Sample

Frequently Asked Questions (FAQ)

Q1: What is the BoldDesk Mobile Chat SDK for React Native?
BoldDesk Chat SDK, enabling 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 React Native project?
You need to:

• Install the SDK using npm:
  npm install bolddesk_chat_sdk
• Run:
  npx pod-install
  This ensures iOS native dependencies are linked.

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.configure(
    appKey: "Your AppKey",
    brandURl: "yourdomain.bolddesk.com"
    culture: "en_US"
)

Initialize early in your app, typically in your main component or startup script.

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

• Add Firebase dependencies in package.json:
  “@react-native-firebase/app”: “^23.4.1”,
  “@react-native-firebase/messaging”: “^23.4.1”
• Register your app in Firebase Console.
• Forward the FCM token to SDK using:

BoldDeskChatSDK.setFCMRegistrationToken(fcmToken)

Handle notifications using:

BoldDeskChatSDK.handleAndroidNotification() and BoldDeskChatSDK.handleiOSNotification() //handle based on platform

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.