npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@pagopa/io-react-native-zendesk

v0.3.29

Published

A react-native wrapper for Zendesk Unified SDK

Downloads

3,749

Readme

@pagopa/io-react-native-zendesk

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.

Installation

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

iOS

  1. 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.

Android

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' }

Usage

In your code add:

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

Initialisation

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

Chat SDK

** 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"
	});

| Props | Description | | ---------- | --------------------------------------------------------------------- | | name | Name of the user | | email | Email of the user | | phone | Phone number of the user | | tags | Some specific tags you want to associate with the chat | | department | Any department you want to associate chat with | | chatOnly | If you just want to start the ChatSDK and not answer or support SDKs. | | botName | The botname you want to show on your chat | | color | Primary color (hex code) for chat bubbles only on iOS |

Help Center (with and Without Chat SDK)

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.

Customising Looks

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>)

Push notifications

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>)

Contributing

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

License

MIT


Made with create-react-native-library