Live Chat

This guide is a high level overview of the Airship Live Chat feature for React Native.

Installation

In order to use Airship Live Chat, please contact your account manager or Airship Support. They will provision your account and provide the chat URLs for the config.

Live Chat requires adding the urbanairship-chat-react-native module to your project.

Using Yarn

yarn add urbanairship-chat-react-native

Using NPM

npm install urbanairship-chat-react-native --save

Configure the URLs

For Android you have to configure the chatUrl and chatSocketUrl in the airshipconfig.properties file.

  chatUrl = <CHAT_URL>
  chatSocketUrl = <CHAT_SOCKET_URL>

And for iOS you have to configure the chatURL and chatWebSocketURL in the UAConfig options.

  <?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
  <plist version="1.0">
  <dict>
    ...
    <key>chatURL</key>
    <string>CHAT_URL</string>
    <key>chatWebSocketURL</key>
    <string>CHAT_WEB_SOCKET_URL</string>
    ...
  </dict>

Displaying chat

The AirshipChat module provides an activity that can be displayed by calling openChat on the Chat instance:

import { AirshipChat } from 'urbanairship-chat-react-native'
AirshipChat.openChat();

Build your own UI

You can use your own UI in your app, by retrieving the messages with getMessages:

AirshipChat.getMessages().then((data) => {
    console.log('Chat messages: ', data)
});

To listen when messages are updated, add a ConversationListener to be notified when the list is updated:

AirshipChat.addConversationListener( (body) => {
        console.log("Conversation updated, messages count : " + body);
});

To send a new message, call sendMessage.

AirshipChat.sendMessage("Some message");

If you provide your own UI, you need to override the openChat event to navigate to your custom UI :

AirshipChat.addChatOpenListener( (body) => {
        //Navigate to custom UI
        console.log("Chat opened : " + body);
});

To make sure that the default Chat UI is not used, you have to set the useCustomChatUI to true :

AirshipChat.setUseCustomChatUI(true);