@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: "[email protected]",
      phoneNumber: "1234567890",
    });

4. Show the Chat UI

// On button press, when you want to show chat:
ZendeskChat.startChat({
      name: "user.full_name",
      email: "[email protected]",
      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.