Install the package

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.

Required Permissions

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>

SDK Initialization

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.

Property Description
Email Pre-fills the user’s email. If provided, visitors don’t need to enter it manually. The conversation is created using this email once the visitor sends their first message.
Name Pre-fills the user’s name. Requires an email to be set.
Phone Number Pre-fills the user’s phone number. Requires an email to be set.
Chat Fields The fields configuration block allows you to prefill Custom Chat Fields using their Field API Names. 
BoldDeskChatSDK.setPrefillFields(
         name = "John Do",
         email = "user@example.com",
         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

Mode Description Code snippet
Light Forces light mode BoldDeskChatSDK.setPreferredTheme(‘light’)
Dark Forces dark mode BoldDeskChatSDK.setPreferredTheme(‘dark’)
System Default Follow system theme BoldDeskChatSDK.setPreferredTheme(‘system’)

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()

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

API Description
BoldDeskChatSDK.configure(“Your AppKey”, “Your brand URL”, “en-US”) Initializes the SDK
BoldDeskChatSDK.showChat() To open chat widget window
BoldDeskChatSDK.closeChat() To close chat widget window
BoldDeskChatSDK.setPreferredTheme(mode) Sets light/dark/system theme
BoldDeskChatSDK.applyCustomFontFamily(…) Apply custom font to match your app
BoldDeskChatSDK.setFCMRegistrationToken(fcmToken: token) To send registered device token to SDK app for receiving push notifications
BoldDeskChatSDK.disablePushNotification() To stop receiving push notifications

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