@vbankng/react-native-zendesk

Getting started

$ npm install @vbankng/react-native-zendesk --save

Mostly automatic installation

$ react-native link @vbankng/react-native-zendesk

QuickStart & Usage

1. Setup Native Dependencies
   iOS If you're on react-native >= 0.60 and you have Cocoapods setup, then you just need to:

$ yarn install # and see if there are any errors
$ (cd ios; pod install) # and see if there are any errors
 # -- you may need to do `pod install --repo-update`

Android If you're on react-native >= 0.60, Android should autodetect this dependency. If you're on 0.59, you may need to call react-native link

2. Call the JS Initializer:

import ZendeskChat from "@vbankng/react-native-zendesk";

// Once in your application:
 ZendeskChat.init({accountKey: 'YOUR_ZENDESK_ACCOUNT_KEY', themeColor: '#1a0dab', isPreChatFormEnabled: false});

3. If the user info is already available else skip this step

// On button press, when you want to show chat:
ZendeskChat.setVisitorInfo({
      department: "Enquiry",
      name: "fullname",
      email: "[e-mail]",
      phoneNumber: "1234567890",
    });

4. Show the Chat UI

// On button press, when you want to show chat:
ZendeskChat.startChat({
      name: "user.full_name",
      email: "[e-mail]",
      phone: "1234567890",
      tags: ["tag1", "tag2"],
      department: "Your department",
      isPreChatFormEnabled: false,
      isAgentAvailabilityEnabled: false,
    });

Properties

Prop	Description	Default
isPreChatFormEnabled	if the chat should start with a pre chat form.	true
isAgentAvailabilityEnabled	If an agent is available to handle this request.	None

Styling

Changing the UI Styling is mostly achieved through native techniques.

On Android, this is the official documentation -- and an example might be adding these 3 lines to your app theme

While on iOS, the options are more minimal -- check the official doc page

Customizing chat interface

By default, the chat interface uses a pink theme color, you can change this by overridding the themeColor in your res -> colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="themeColor">#158CC5</color>
</resources>

Contributing

• Pull Requests are encouraged!
• Be respectful!
• The trunk branch of this repo is called main

License

React Native V Zendesk Chat is MIT licensed, as found in the LICENSE file.