Install the package

Install the SDK using npm

npm install bolddesk_support_sdk

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">
     <external-path name="downloads" path="Download/" />
    <cache-path name="images" path="." />
</paths>

SDK Initialization

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

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

Authentication

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", 
    (success) => {
          BoldDeskSupportSDK.logout(context)
      })
}
else
    BoldDeskSupportSDK.logout(context)

Clear All Data

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

Mode Description Code snippet
Light Forces light mode BoldDeskSupportSDK.setPreferredTheme(“light”)
Dark Forces dark mode BoldDeskSupportSDK.setPreferredTheme(“dark”)
System Default Follow system theme BoldDeskSupportSDK.setPreferredTheme(“system”)

You can display your brand logo in SDK headers.

BoldDeskSDKHome.SetHeaderLogo("Your brand logo URL")

Custom Header Content

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 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
BoldDeskSupportSDK.applyCustomFontFamilyInAndroid()

//for iOS
BoldDeskSupportSDK.applyCustomFontFamilyIniOS()

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

Handling push notifications

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

 messaging().onMessage(async remoteMessage => {
 if !BoldDeskSupportSDK.isLoggedIn() // check user logged-in or token expired
    {
        // Call login API to authenticate user.
        BoldDeskSupportSDK.loginWithJWTToken(jwtToken = "Your JWT token", 
        (success) => {
              if (Platform.OS === 'android') {
                // Icon should be Drawable source
                BoldDeskSupportSDK.showNotification(remoteMessage.data, "Your app logo");
              }
            if (Platform.OS === 'ios') {
                BoldDeskSupportSDK.handleNotification(remoteMessage.data);
              }
          })
    }
    else
       BoldDeskSupportSDK.handleNotification(remoteMessage.data); // for iOS
   }

Error Logging

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

 BoldDeskSupportSDK.setLoggingEnabled()

API Reference

API Description
BoldDeskSupportSDK.initialize(“Your AppID”, “Your brand URL”) Initializes the SDK
BoldDeskSupportSDK.LoginWithJWTToken(“Your JWT token”) Authenticates user with JWT
BoldDeskSupportSDK.clearAllLocalData() Clears all SDK data and cache
BoldDeskSupportSDK.applyTheme(primaryColor, accentColor) Applies brand colors
BoldDeskSupportSDK.setPreferredTheme(“light” or “dark”) Sets light/dark/system theme
BoldDeskSDKHome.SetHeaderLogo(url) Sets custom logo
BoldDeskSDKHome.set(…) Configures section headers and descriptions
BoldDeskSupportSDK.applyCustomFontFamily(…) Apply custom font to match your app
BoldDeskSupportSDK.showHome() To open home dashboard page
BoldDeskSupportSDK.showSubmitTicket() To open create ticket page
BoldDeskSupportSDK.showKB() To open knowledge base page
BoldDeskSupportSDK.showNotification() or BoldDeskSupportSDK.handleNotification() To send registered device token to SDK app for 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