1.1.0 • Published 2 years ago

@vbankng/react-native-zendesk v1.1.0

Weekly downloads
2
License
MIT
Repository
github
Last release
2 years ago

@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

  1. 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});
  1. 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: "name@domain.com",
      phoneNumber: "1234567890",
    });
  1. Show the Chat UI
// On button press, when you want to show chat:
ZendeskChat.startChat({
      name: "user.full_name",
      email: "name@domain.com",
      phone: "1234567890",
      tags: ["tag1", "tag2"],
      department: "Your department",
      isPreChatFormEnabled: false,
      isAgentAvailabilityEnabled: false,
    });

Properties

PropDescriptionDefault
isPreChatFormEnabledif the chat should start with a pre chat form.true
isAgentAvailabilityEnabledIf 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.

1.1.0

2 years ago

1.0.1

4 years ago

1.0.0

4 years ago