A react-native wrapper for Zendesk Unified SDK

This library is based and originally forked by https://github.com/Saranshmalik/react-native-zendesk/ and then modified to be developed as an integrated react-native module.

yarn add @pagopa/io-react-native-zendesk

2. Pod Install:

   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.

You need to add this in your root build.gradle under allProjects -> repositories file of the project. maven { url 'https://zendesk.jfrog.io/zendesk/repo' }

In your code add:

Step 1. import RNZendeskChat from 'react-native-zendesk'

Place this code at the root of your application to initialize Zendesk SDK.

For all supported SDKs

RNZendeskChat.init({
	key: <chatAccountKey>,
	appId: <appId>,
	url: <zendeskUrl>,
	clientId: <zendeskClientId>,
})

If you just want ChatSDK use this instead: RNZendeskChat.initChat('<chatAccountKey>')

Step 2. Set user identifier

• If your chat just runs behind a login you can pass in name and email whenever user logins if not, pass a JWT Token to identify the user on chat

	RNZendeskChat.setUserIdentity({
		name: <name>,
		email: <email>,
	})

• If you want to start chat without any user details you can use a JWT token.

	RNZendeskChat.setUserIdentity({
		token: <JWT TOKEN>
	})

Step 3. Show the UI based on what SDK you want to use

** To use chat sdk without answer bot, please add chatOnly: true in this method

	ZendeskChat.startChat({
		name: user.full_name,
		email: user.email,
		phone: user.mobile_phone,
		tags: ['tag1', 'tag2'],
		department: "Your department"
	});

To initiate and display help center use the following method:

RNZendesk.showHelpCenter({
	withChat: true // add this if you want to use chat instead of ticket creation
	disableTicketCreation: true // add this if you want to just show help center and not add ticket creation
})

You can use either of these options withChat or disableTicketCreation, both can't be used together.

NOTE: Zendesk support with chat enabled is currently buggy, I am trying to resolve that issue. At present you can show help center with normal ticket creation. Working on currently adding more config options here and add customising properties.

For styling in android create a theme in your android folder with the following properties

<style  name="ZendeskTheme"  parent="Theme.MaterialComponents.Light">

<item  name="colorPrimary">@color/primary</item>

<item  name="colorPrimaryDark">@color/primary</item>

<item  name="colorAccent">@color/primary</item>

</style>

And then add following to your project's AndroidManifest.xml file (use only the SDKs you use)

      <activity android:name="zendesk.support.guide.HelpCenterActivity"
            android:theme="@style/ZendeskTheme" />

        <activity android:name="zendesk.support.guide.ViewArticleActivity"
            android:theme="@style/ZendeskTheme" />

        <activity android:name="zendesk.support.request.RequestActivity"
            android:theme="@style/ZendeskTheme" />

        <activity android:name="zendesk.support.requestlist.RequestListActivity"
            android:theme="@style/ZendeskTheme" />
        <activity android:name="zendesk.messaging.MessagingActivity"
            android:theme="@style/ZendeskTheme" />

For iOS only added a new function which can be used as below. This would set the primary color for the chat and other sdks

	RNZendesk.setPrimaryColor(<hex color string>)

For push notifications added a method to register token in Zendesk, all other handling and stuff needs to be done on the app itself. To register your token with Zendesk call

	RNZendesk.setNotificationToken(<your token>)

See the contributing guide to learn how to contribute to the repository and the development workflow.

MIT

Made with create-react-native-library