Skip to main content

Chat

If needed, your app users can chat with you to provide you more details about their reported bugs, crashes or feedback. You will be able to fix issues faster and make your customers happier.

Enable​

Once your app user is registered with Shake, the chat feature is enabled automatically. Each ticket they send you will be a separate conversation.

This feature is tightly integrated with and follows the lifecycle of your User registration, which means that calling Shake.unregisterUser also disconnects the current app user from chat and they won't receive any new messages until registered again.

Notifications​

Shake can notify your app users about new messages sent from the Shake dashboard.

Both remote and local notifications are supported, but are mutually exclusive.

Android notifications​

Set up Firebase SDK​

Shake uses Firebase for sending push notifications to your Android app.

If you didn't add Firebase to your project yet, follow the official documentation for adding Firebase into the project.

You'll also have to set up Firebase Cloud Messaging in your app.

Forwarding device token to the Shake​

To target the specific Android device, Shake needs the device Firebase token.

Forward Firebase token to the Shake by calling Shake.setPushNotificationsToken method on the app start like shown below:

index.js
import Shake from '@shakebugs/react-native-shake';


const setShakePushNotificationsToken = async () => {
    if (Platform.OS === 'android') {
        const fcmToken = await messaging().getToken();
        Shake.setPushNotificationsToken(fcmToken);
    }
};


setShakePushNotificationsToken();


Shake.start('app-api-key');


AppRegistry.registerComponent(appName, () => App);

Presenting notifications to the app users​

Shake sends Firebase data push notifications to the device which are not presented by default.

In order to present data notifications to the app users you'll have to use onMessage and setBackgroundMessageHandler callbacks and call Shake.showChatNotification like shown below:

index.js
import Shake from '@shakebugs/react-native-shake';
import messaging from '@react-native-firebase/messaging';


const presentShakePushNotifications = async () => {
    if (Platform.OS === 'android') {
        // Showing chat notifications when app in the background
        messaging().setBackgroundMessageHandler(async remoteMessage => {
            await Shake.start('app-api-key'); // Start Shake with your key
            Shake.showChatNotification(remoteMessage.data);
        });
        // Showing chat notifications when app in the foreground
        messaging().onMessage(async remoteMessage => {
            Shake.showChatNotification(remoteMessage.data);
        });
    }
};




presentShakePushNotifications();


Shake.start('app-api-key');


AppRegistry.registerComponent(appName, () => App);
note

Don't forget to request notifications permission or notifications won't be shown

Customizing notification title and icon​

If you want to change chat notification title or icon, you can do it by adding metadata in the manifest file inside the application element:

AndroidManifest.xml
<meta-data
  android:name="com.shakebugs.chat_notification_icon"
  android:resource="@drawable/ic_notification" />
<meta-data
  android:name="com.shakebugs.chat_notification_title"
  android:resource="@string/app_name" />

Set up Service Account credentials on the Shake dashboard​

The last thing you'll have to do is to upload Firebase Cloud Messaging Service Account credentials to the Shake Dashboard.

Navigate to the Project Settings → Service accounts → Generate new private key → Generate key on the Firebase and upload Service Account credentials to the Workspace Administration → App settings on the Shake dashboard.

Local notifications​

If for some reason, you don't want to configure remote notifications for your app, Shake can still schedule them locally.

To enable these, you still need to request the user permission, but there is no need for additional steps or code.

note

Important thing to note is that local notifications are not shown when app is in the background.

Shake uses Shake.setPushNotificationsToken function to determine if the app is configured to receive remote notifications. If that method is called in your app, Shake will disable local notifications and assume that you want to enable remote ones.

iOS notifications​

Creating a Push Notifications certificate​

Shake supports iOS Remote notifications but your application needs the APS Environment Entitlement enabled.

After enabling this app Capability, Shake needs your certificate to establish a certificate based connection with APNS. Follow the Apple docs and generate a new Push Notifications certificate in the Member Center.

Once the certificate is generated and downloaded to your local machine, double click on the certificate to import it to the KeychainAccess application. If done correctly, the Certificate+PrivateKey combination will be present in your KeychainAccess application under the Certificates tab.

Export the Certificate+PrivateKey combination as a .p12 file and upload the file to Shake Dashboard.

Registering iOS application for remote notifications​

To target the specific iOS device, Shake needs the device APNS token.

Call the native registerForRemoteNotifications method during the application launch, to always obtain a fresh copy of the device APNS token and forward it to Shake.

AppDelegate.swift
class AppDelegate: UIResponder, UIApplicationDelegate {


    override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    
        UIApplication.shared.registerForRemoteNotifications()
    
        /// Rest of the application and Shake setup
    
        return true
    }
    
    override func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
        Shake.didRegisterForRemoteNotifications(withDeviceToken: deviceToken)
    }
}

Presenting iOS notifications​

To handle foreground notifications, application needs to set itself as the UNUserNotificationCenterDelegate , and implement the didReceiveResponse, willPresentNotification methods.

To remain customizable and minimally intrusive to an existing notification logic of your app, Shake requires some additional setup.

Use Shake.report(center: UNUserNotificationCenter ...) methods to delegate notification presentation logic to Shake.

Shake.isShakeNotification method can be used to perform an early check for Shake originated notifications and delegate processing so that Shake internally calls Apple completion handlers.

AppDelegate.swift
class AppDelegate: UIResponder, UIApplicationDelegate, UNUserNotificationCenterDelegate {


    override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        UNUserNotificationCenter.current().delegate = self


        Shake.start(apiKey: "app-api-key")
            
        return true
    }


    override func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
        if Shake.isShakeNotification(response.notification) {
            Shake.report(center, didReceive: response, withCompletionHandler: completionHandler)
            return;
        }


        completionHandler()
    }


    override func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
        if Shake.isShakeNotification(notification) {
            Shake.report(center, willPresent: notification, withCompletionHandler: completionHandler)
            return;
        }


        completionHandler([.badge, .sound, .alert])
    }
}
AppDelegate.h
Not needed for Swift

With the setup like above, notifications that originate from Shake are handled by Shake, and all other notifications are handled by your app.

This keeps Shake isolated and configurable, but we do recommend using the above snippets because Shake will internally determine if notification should be presented, and also perform expected actions when notifications are tapped.

note

Don't forget to request notifications permission or notifications won't be shown

Local notifications​

If for some reason, you don't want to configure remote notifications for your app, Shake can still schedule them locally.

To enable these, you still need to request the user permission, but there is no need to generate any additional certificates or register the iOS application for remote notifications with registerForRemoteNotifications method.

note

Important thing to note is that local notifications are not shown when app is in the background.

Shake uses isRegisteredForRemoteNotifications property to determine if the app is configured to receive remote notifications. If that method returns true, Shake will disable local notifications and assume that you want to enable remote ones.

Requesting Notifications permissions​

To show any kind of notifications to your user, you must request a permission.

Requesting a notifications permission triggers a native alert dialog and can be displayed to a user only once.

Make sure to find a proper place and time to ask for this permission, because if the user doesn't grant permission via the alert dialog, all notifications are disabled and must be enabled manually in the Settings app.

App.js
import {PermissionsAndroid, Platform} from 'react-native';
import PushNotificationIOS from '@react-native-community/push-notification-ios';


const requestNotificationsPermission = () => {
    if (Platform.OS === 'android') {
        PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS);
    } else {
        PushNotificationIOS.requestPermissions();
    }
};

Unread messages​

If you want to show number of unread chat messages somewhere in your app, you can set the unread messages listener. The listener is called immediately when set and on each change in the number of unread messages for a registered app user:

index.js
Shake.setUnreadMessagesListener(count => {
    // Update number in your text element
});

To remove the unread messages listener, use Shake.setUnreadMessagesListener(null).