Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-zendesk-chat

Package Overview
Dependencies
Maintainers
4
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-zendesk-chat

React Native Wrapper around Zopim Zendesk Chat

  • 0.4.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
593
decreased by-11.89%
Maintainers
4
Weekly downloads
 
Created
Source

react-native-zendesk-chat

Simple module that supports displaying Zendesk Chat within a React Native Application.

This library assumes you're familiar with Zendesk's Official Documentation: iOS and Android.

VERSIONS

  • For Zendesk Chat v2 use version >= 0.4.0 (this requires RN 0.59 or later!)
  • For RN version >= 0.59 use version >= 0.3.0 (Zendesk Chat v1)
  • For RN version < 0.59 use version <= 0.2.2 (Zendesk Chat v1)

Known Issues

Getting Started

With npm:

npm install react-native-zendesk-chat --save

or with yarn:

yarn add react-native-zendesk-chat

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`

If you're on older react-native versions, please see the Advanced Setup section below

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 "react-native-zendesk-chat";

// Once in your application:
ZendeskChat.init("YOUR_ZENDESK_ACCOUNT_KEY");
  1. Show the Chat UI
// On button press, when you want to show chat:
ZendeskChat.startChat({
	name: user.full_name,
	email: user.email,
	phone: user.mobile_phone,
	tags: ["tag1", "tag2"],
	department: "Your department",
	// The behaviorFlags are optional, and each default to 'true' if omitted
	behaviorFlags: {
		showAgentAvailability: true,
		showChatTranscriptPrompt: true,
		showPreChatForm: true,
		showOfflineForm: true,
	},
	// The preChatFormOptions are optional & each defaults to "optional" if omitted
	preChatFormOptions: {
		name: !user.full_name ? "required" : "optional",
		email: "optional",
		phone: "optional",
		department: "required",
	},
	localizedDismissButtonTitle: "Dismiss",
});

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

Migrating

From react-native-zendesk-chat <= 0.3.0

To migrate from previous versions of the library, you should probably remove all integration steps you applied, and start over from the Quick Start.

The JS API calls are very similar, with mostly additive changes.

Advanced Setup

Advanced users, or users running on older versions of react-native may want to initialize things in native.

iOS: Manually Setting up with Cocoapods

If you're on iOS < 0.60, you may need to manually install the cocoapod:

Add a reference to your Podfile:

pod 'RNZendeskChat', :git => 'https://github.com/taskrabbit/react-native-zendesk-chat.git'

then run pod install: (cd ios; pod install)

or manually:

In Xcode, drag and drop node_modules/react-native-zendesk-chat/RNZendeskChat.m and node_modules/react-native-zendesk-chat/RNZendeskChat.h into your project.

iOS: Configure ZDCChat in AppDelegate.m:
#import <ZDCChat/ZDCChat.h>

// ...

// Inside the appropriate appDidFinishLaunching method
[ZDCChat initializeWithAccountKey:@"YOUR_ZENDESK_ACCOUNT_KEY"];

// And access other interesting APIs
Android: Manual Setup & Configuration

If you're on react-native < 0.60, you should be able to call react-native link.

If this doesn't work, then you may need to do a complete manual install as follows:

  1. Open up android/app/main/java/[...]/MainApplication.java
  • Add import com.taskrabbit.zendesk.*; to the imports at the top of the file
  • Add new RNZendeskChatPackage(this) to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
include ':react-native-zendesk-chat'
project(':react-native-zendesk-chat').projectDir = new File(rootProject.projectDir,	'../node_modules/react-native-zendesk-chat/android')
  1. Insert the following lines inside the dependencies block in android/app/build.gradle:

For RN >= 0.60:

dependencies {
	//
  api group: 'com.zendesk', name: 'chat', version: '2.2.0'
  api group: 'com.zendesk', name: 'messaging', version: '4.3.1'

For RN < 0.60:

compile project(':react-native-zendesk-chat')
  1. Configure Chat in android/app/main/java/[...]/MainActivity.java
// Note: there is a JS method to do this -- prefer doing that! -- This is for advanced users only.

// Call this once in your Activity's bootup lifecycle
Chat.INSTANCE.init(mReactContext, key);

Contributing

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

License

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

Keywords

FAQs

Package last updated on 09 Jul 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc