Nanometers Per Millisecond

    rn-zendesk-chat-api

    0.24.0 • Public • Published

    rn-zendesk-chat-api

    Wrapper around Zendesk Chat API SDK for mobile Android and iOS

    Getting started

    $ npm install rn-zendesk-chat --save

    Mostly automatic installation

    $ react-native link rn-zendesk-chat-api

    or if you prefer:

    $ yarn add global rn-zendesk-chat-api

    then you need to link the package:

    $ react-native link rn-zendesk-chat-api

    Receiving notifications

    In order to receive chat notifications you have to follow the Zendesk Chat documentation steps. Just do the configuration stuff.
    iOS
    Android

    Extra configuration for iOS

    For notifications to work on iOS, you need to add some piece of code to your AppDelegate.m

    First, import ZendeskChat.h:

    #import "ZendeskChat.h"

    And add the following code in specific methods:

    - (void) application:(UIApplication*)app didRegisterForRemoteNotificationsWithDeviceToken:(NSData*)tokenData {
      [ZendeskChat savePushToken:tokenData];
      [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:tokenData];
    }
     
    - (void) application:(UIApplication*)application didReceiveRemoteNotification:(NSDictionary*)userInfo {
      [ZendeskChat didReceiveRemoteNotification:userInfo];
    }

    Registering token to receive notifications

    Zendesk uses some observers to know if the app is in foreground or background, and if you don't put those specific checks to enable and disable the token, you may get some problems when sending files to the chat:
    So you need to add the following code to handle those problems:

    AppState.addEventListener('change', this.handleAppStateChange);
        this.appstate = AppState.addListener('appStateDidChange', (status: {}) => {
          if (status.app_state.match('inactive|background') && !this.props.pickerShowing) {
            ZendeskChat.registerFCMToken(ZENDESK_APP_KEY);
          }
          if (status.app_state.match('active') && this.props.route === 'Chat') {
            ZendeskChat.registerFCMToken(null);
          }
        });

    Everytime you enter in your Chat screen do:

      ZendeskChat.registerFCMToken(null);

    And everytime your Chat screens unmounts:

      ZendeskChat.registerFCMToken(ZENDESK_APP_KEY);
    • When you set token value to null you are disabling the notifications

    Platform specifics

    Follow these steps for specific platforms

    On Android:

    You call the method to set token first (note that in this specific moment, you only set token for android):

    componentWillMount() {
        if (Platform.OS === 'android') {
          ZendeskChat.registerFCMToken(ZENDESK_APP_KEY);
        }
    }

    Show notifications in foreground (Android):

    This is only required for Android.
    In order to show notifications when your app is in foreground, you need to listen for the following methods:

      ZendeskChat.onNotificationReceived(this.onChatNotificationReceived);
     
    onChatNotificationReceived = ({ title, text }) => {
      \\ Just show the notification if you aren't in Chat screen
      if (title && this.props.route !== 'Chat') {
          ZendeskChat.showChatNotification(text, title);
        }
    };

    If you want to do something when notification is opened:

    ZendeskChat.onNotificationOpened(this.onNotificationOpened);
     
    onNotificationOpened = ({ title, text }) => {
      // Do your stuff
      };

    On iOS:

    On iOS you only will register the token when the app is ONLINE. This is because Zendesk uses some observers that may override some behaviours of some libs (e.g.: react-native-keyboard-manager), and can crash your app. So, wait for chat to be ONLINE and then register for iOS:

    ZendeskChat.isOnline((chatStatus) => {
            if (chatStatus === 'ONLINE') {
              if (Platform.OS === 'ios') {
                ZendeskChat.registerFCMToken(ZENDESK_APP_KEY);
              }
            }
          });

    Usage

    Import:

    import ZendeskChatApi from 'rn-zendesk-chat-api';

    Start a chat session:

    const userInfo = {
      name: 'Witalo Benicio',
      email: 'contato@witalobenicio.com',
      phone: '+558899999999',
      note: 'This visitor is very nice',
    };
     
    //Currently supporting just department and tag as config values
    const chatConfig = {
      department: 'My Department',
      tags: ['Tag1', 'Tag2'],
    };
     
    // This is a promise, but just to know that you called succesfully. In order to start sending messages, you need to wait until status === 'CONNECTED'
    ZendeskChatApi.startChat("YOUR_ACCOUNT_KEY", userInfo, chatConfig);

    End a chat session:

    ZendeskChatApi.endChat();

    Start listening to connection updates:

    const connectionUpdate = ({ status }) => {
      if (status === ZendeskChatAPI.connectionTypes.CONNECTED) {
        // You can send messages now
      }
    };
     
    ZendeskChatApi.addConnectionObserver(connectionUpdate);

    Stop listening to connection updates:

    //Remember to do this
    ZendeskChatApi.deleteChatConnectionObserver();

    Start listening to chat updates:

    const chatUpdate = (entries) => {
      //entries is an Array, so you can handle every message to show in your FlatList e.g.
      //Every entry has a type, which at the moment can be found at:
      ZendeskChatAPI.chatLogTypes.VISITOR_ATTACHMENT; //This is a file sent by the user
      ZendeskChatAPI.chatLogTypes.VISITOR_MESSAGE; //This is a message sent by the user
      ZendeskChatAPI.chatLogTypes.AGENT_ATTACHMENT; //This is a file sent by an agent
      ZendeskChatAPI.chatLogTypes.AGENT_MESSAGE; //This is a message sent by an agent
    };
     
    ZendeskChatApi.addChatLogObserver(chatUpdate);

    Stop listening to chat updates:

    //Remember to do this
    ZendeskChatApi.deleteChatLogObserver();

    Start listening to timeout event:

    const onTimeoutReceived = ({ timeout }) => {
    };
     
    ZendeskChatApi.addChatTimeoutObserver(onTimeoutReceived);

    Stop listening to timeout event:

    //Remember to do this
    ZendeskChatApi.deleteChatTimeoutObserver();

    Get a list of live chat messages:

    ZendeskChatApi.getChatLog()
      .then(entries => {
        // Do your stuff
      });

    Send a message:

    ZendeskChatApi.sendMessage("My message goes here");

    Send a file:

    // You need to ensure that you will only send files with supported extensions
    // This is defined on your Zendesk Chat Dashboard
    ZendeskChatApi.sendFile("path/to/myFile");

    Next planned steps

    • Listening to file uploads (error handling)
    • Handle messages errors

    Install

    npm i rn-zendesk-chat-api

    DownloadsWeekly Downloads

    22

    Version

    0.24.0

    License

    MIT

    Unpacked Size

    46.5 MB

    Total Files

    222

    Last publish

    Collaborators

    • witalobenicio