Freshchat React Native SDK Integration Steps

# React Native requirements
pod 'React', :path => '../node_modules/react-native', :subspecs => 
[
'Core',
'CxxBridge', # Include this for RN >= 0.47
'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
'RCTText',
'RCTNetwork',
'RCTWebSocket', 
# Needed for debugging
'RCTAnimation', 
# Needed for FlatList and animations running on native UI thread
# Add any other subspecs you want to use in your project
]
# Explicitly include Yoga if you are using RN >= 0.42.0
pod 'yoga', :path => '../node_modules/react-
native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-
native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-
podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-
podspecs/Folly.podspec'

Migrating an existing Freshchat integration to Freshchat SDK 2.0.0+

• Unlink React native Freshchat SDK from your react project using the following command. 

react-native unlink react-native-freshchat-sdk

• Remove the following line from Podfile inside your iOS project. pod 'FreshchatSDK', :path=> '../node_modules/react-native-freshchat-sdk/ios/FreshchatSDK.podspec'
• Refer above tabular column and choose steps as per your requirement.

1.2. Android Setup

Add maven { url "https://jitpack.io" } to your project level build.gradle file.

allprojects
{
    repositories
{
        .....
        maven { url "https://jitpack.io"
}
    }
}

react-native link react-native-freshchat-sdk

import { Freshchat, FreshchatConfig } from 'react-native-freshchat-sdk';
var freshchatConfig = new FreshchatConfig(APP_ID, APP_KEY);
freshchatConfig.domain = "YOUR-DOMAIN";
Freshchat.init(freshchatConfig);

var freshchatConfig = new FreshchatConfig(APP_ID, APP_KEY);
freshchatConfig.domain = "YOUR-DOMAIN";
freshchatConfig.teamMemberInfoVisible = true;
freshchatConfig.cameraCaptureEnabled = true;
freshchatConfig.gallerySelectionEnabled = true;
freshchatConfig.responseExpectationEnabled = true;
freshchatConfig.showNotificationBanner = true; //iOS only
freshchatConfig.notificationSoundEnabled = true; //iOS only
freshchatConfig.themeName = "CustomTheme.plist"; //iOS only
freshchatConfig.stringsBundle = "FCCustomLocalizable"; //iOS only
Freshchat.init(freshchatConfig);

import { FreshchatUser } from 'react-native-freshchat-sdk';
var freshchatUser = new FreshchatUser();
freshchatUser.firstName = "John";
freshchatUser.lastName = "Doe";
freshchatUser.email = "[email protected]";
freshchatUser.phoneCountryCode = "+91";
freshchatUser.phone = "1234234123";
Freshchat.setUser(freshchatUser, (error) =>
{
    console.log(error)
⁦})

/var userPropertiesJson = 
{
    "user_type": "Paid",
    "plan": "Gold"
}
Freshchat.setUserProperties(userPropertiesJson, (error) => 
{
    console.log(error);
});

Freshchat.resetUser();

Note: Restore Id for a user is typically generated only when user has sent a message.
Notifications are supported in only one mobile device at any point in time and is currently the last restored device or device with last updated push token

Freshchat.identifyUser("EXTERNAL_ID", null, (error) => 
{
    console.log(error);
});

Freshchat.getUser((user) => 
{
            var restoreId = user.restoreId;
            console.log("restoreId: " + restoreId);
        })

Freshchat.identifyUser("EXTERNAL_ID", "RESTORE_ID", (error) =>
{
    console.log(error);
});

Freshchat.addEventListener(
Freshchat.EVENT_USER_RESTORE_ID_GENERATED,
    () => 
{
        console.log("onRestoreIdUpdated triggered");
        Freshchat.getUser((user) =>
{
            var restoreId = user.restoreId;
            var externalId = user.externalId;
            console.log("externalId: " + externalId);
            console.log("restoreId: " + restoreId);
        })
    }
);

Freshchat.getFreshchatUserId((data) => 
{
        console.log(data);
        });

Note: Only Topics with visibility set to "Visible to all users" will be displayed when using showConversations() API

Freshchat.showConversations();

import { ConversationOptions } from 'react-native-freshchat-sdk';
var conversationOptions = new ConversationOptions();
conversationOptions.tags = ["premium"];
conversationOptions.filteredViewTitle = "Premium Support";
Freshchat.showConversations(conversationOptions);

Note: If no matching Topic is found, the user will be redirected to the default Topic. 
Topics which are normally not visible when using showConversations() API, will also be displayed when tagged and the specific tag is passed to filterByTags API of ConversationOptions instance passed to showConversations() API.

Freshchat.getUnreadCountAsync((data) => 
{
    console.log(data);
});

Freshchat.addEventListener(
Freshchat.EVENT_UNREAD_MESSAGE_COUNT_CHANGED,
    () => 
{
        console.log("onUnreadMessageCountChanged triggered");
        Freshchat.getUnreadCountAsync((data) => 
{
            var count = data.count;
            var status = data.status;
if (status) 
{
                console.log("Message count: " + count);
            } else 
{
                console.log("getUnreadCountAsync unsuccessful");
            }
        });
    }
);

const getUnreadCountAsyncForTags = () => 
{
    Freshchat.getUnreadCountAsync(
{
            tags: ["new", "test"]
        },
        (data) => 
{
            console.log(data);
        });
};

Freshchat.showFAQs();

import { FaqOptions } from 'react-native-freshchat-sdk';
var faqOptions = new FaqOptions();
faqOptions.tags = ["premium"];
faqOptions.filteredViewTitle = "Tags";
faqOptions.filterType = FaqOptions.FilterType.ARTICLE;
Freshchat.showFAQs(faqOptions);

Note: When there is no match on the filter applied, it will display all the FAQ categories by default.

import { FaqOptions } from 'react-native-freshchat-sdk';
var faqOptions = new FaqOptions();
faqOptions.tags = ["premium"];
faqOptions.filteredViewTitle = "Tags";
faqOptions.filterType = FaqOptions.FilterType.CATEGORY;
Freshchat.showFAQs(faqOptions);

Note: FAQs also inherit the tags from the parent FAQ category.

import { FaqOptions } from 'react-native-freshchat-sdk';
var faqOptions = new FaqOptions();
faqOptions.tags = ["premium"];
faqOptions.filteredViewTitle = "Tags";
faqOptions.filterType = FaqOptions.FilterType.ARTICLE;
Freshchat.showFAQs(faqOptions);

The default behaviour for "Contact Us" from within FAQ flow is same as invoking showConversations() i.e it will display all Topics that are marked "Visible to all users", except when filtering of Topics is enabled by passing tags to filterContactUsByTags API.

import { FaqOptions } from 'react-native-freshchat-sdk';
var faqOptions = new FaqOptions();
faqOptions.tags = ["payment_failure"];
faqOptions.filteredViewTitle = "Payments";
faqOptions.filterType = FaqOptions.FilterType.ARTICLE;
faqOptions.showFaqCategoriesAsGrid = true;
faqOptions.showContactUsOnFaqScreens = true;
faqOptions.showContactUsOnFaqNotHelpful = true;
faqOptions.contactusFilterTags = ["payments"];
Freshchat.showFAQs(faqOptions);

5. Send message API

The app can send a message on behalf of the user using the sendMessage() API. 

Note: This API would silently send a message and not launch the Freshchat SDK UI

Freshchat.isFreshchatNotification(notification, (freshchatNotification) => 
{
    if (freshchatNotification) 
{
        Freshchat.handlePushNotification(notification);
    } else 
{
        // handle your app notification
    }
})

var freshchatNotificationConfig = new FreshchatNotificationConfig();
freshchatNotificationConfig.priority =
FreshchatNotificationConfig.NotificationPriority.PRIORITY_HIGH;
freshchatNotificationConfig.notificationSoundEnabled = true;
freshchatNotificationConfig.largeIcon = "notif"; // Drawable name
freshchatNotificationConfig.smallIcon = "notif"; // Drawable name
Freshchat.setNotificationConfig(freshchatNotificationConfig);

6.3 Push Notification Checklist

We have identified some potential areas where problem happens. So we consolidated those into checklists, check if you have done everything.

iOS

1. Make sure you have uploaded correct push certificate in Freschat portal.
2. Make sure that you are checking in development or production environment and upload the respective certificate in Freschat portal.
3. Don’t check in iOS simulator, since it did not have push notification capability. Check in real device.
4. Push notification capability should be enabled in your Xcode project.
5. Make sure you gave permission to push notification for your application. If not go to Admin -> under your application, enable push notification.
6. Confirm you are passing on device token to the Freshchat using the following method,

   Freshchat.setPushRegistrationToken(device.pushToken);

   
   

7. Under Appdelegate class make sure you have either UNUserNotificationCenter delegate methods or [UIApplicationDelegate application:didReceiveRemoteNotification:fetchCompletionHandler:] is implemented. And if UNUserNotificationCenter framework is being used, make sure delegate has been set for that.
   
8. Add respective react bridging codes on the push notification delegate methods.
9. Refer the codes here for plugin implementation, confirm you have implemented all the recommendations.
10. If you have Notification extension in your app, make sure its not blocking the notification.
    

Android

1. Make sure you have added correct FCM key of your application in Freshchat portal
2. Don’t check in emulator, which don’t have google play service enabled. Check in real device.
3. Confirm you are passing on device token to the Freshchat using the following method,

   Freshchat.setPushRegistrationToken(device.pushToken);

4. Make sure you are receiving notification from FCM.
5. Refer the codes here for plugin implementation, confirm you have implemented all the recommendations

If the problem persists, try the following URL,

https://<<your-freshchat-account-domain-here>>/app/api/notif_debug?convId=CONV_ID where,

CONV_ID is the conversation id of the conversation for which you did not receive notification. CONV_ID is the last numeric part of the url when you open the conversation in the browser. 

Ensure that you are logged in as Admin while opening this url. It will give you the reason behind the push notification failure.

7. Other Notes

For Localisation, UI customisation, RTL support and more refer our platform specific documentation for Android and iOS.