react-native-zendesk-chat

Wrapper around Zendesk Chat API SDK for mobile Android and iOS

Getting started

$ npm install react-native-zendesk-chat --save

Mostly automatic installation

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

or if you prefer:

$ yarn add global react-native-zendesk-chat-api

then you need to link the package:

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

Usage

###Import:

import ZendeskChatApi from 'react-native-zendesk-chat-api';

###Start a chat session:

const userInfo = {
  name: 'Witalo Benicio',
  email: '[email protected]',
  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
• Set tags to the chat
• Set a department when starting a chat