1.1.0 • Published 2 years ago
@vbankng/react-native-zendesk v1.1.0
@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
- 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
- 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});
- 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",
});
- 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
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.