Socket
Socket
Sign inDemoInstall

react-native-crisp-chat-sdk

Package Overview
Dependencies
1
Maintainers
3
Versions
28
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-crisp-chat-sdk


Version published
Weekly downloads
797
decreased by-0.99%
Maintainers
3
Created
Weekly downloads
 

Changelog

Source

v0.14.1

Readme

Source

react-native-crisp-chat-sdk

React-Native bridge for Crisp chat iOS and Android SDK's

Crisp screenshot

Features

  • iOS & Android Support
  • Typescript Support
  • Expo support with custom dev client

Installation

Install the library using either yarn or npm like so:

yarn add react-native-crisp-chat-sdk
npm install --save react-native-crisp-chat-sdk

Expo support

This package is not available in the Expo Go app. Learn how you can use it with custom dev clients.

iOS Installation

If you're using React Native versions > 60.0, it's relatively straightforward.

cd ios && pod install

For versions below 0.60.0, use rnpm links

iOS

Update your Info.plist

To enable your users to take and upload photos to the chat as well as download photos to their photo library, add the Privacy - Camera Usage Description (NSCameraUsageDescription) and Privacy - Photo Library Additions Usage Description (NSPhotoLibraryAddUsageDescription) to your app's Info.plist.

Requirements

⚠️ Adding Camera and Photo permissions is mandatory, NSCameraUsageDescription and NSPhotoLibraryUsageDescription in Info.plist, to inform your users that you need to access to the Camera and Photo Library. You also have to enable "iCloud Documents" capability

Get your website ID

Your website ID can be found in the Crisp App URL:

Crisp Website ID is an UUID like e30a04ee-f81c-4935-b8d8-5fa55831b1c0

Usage

You can view the example project for more usage.

import CrispChat, {
  configure,
  setUserEmail,
  setUserNickname,
  setUserPhone,
  resetSession,
} from 'react-native-crisp-chat-sdk';

// ...
export default function App() {
  // You must set your website ID before calling <CrispChat />
  configure("YOUR_WEBSITE_ID");

  // this should be user ID that way app will load previous user chats
  setUserTokenId('abcd12345');

  // Set user's info
  setUserEmail('test@test.com');
  setUserNickname('John Smith');
  setUserPhone('+614430231224');

  // Call session reset when user loggs out
  resetSession();

  return <CrispChat />;
}

Language management

Explicitly setting alternative languages from React is not currently supported. Nevertheless, the underlying SDK is able to select automatically the locale matching the one of device. The locale detection works out-of-the-box on Android. However, for the locale of the device to be detected on iOS apps, it has to be declared and setup in xcode as a supported language.

Here is a suggested method for adding languages support to your app in Xcode 13:

Start by adding support for your particular language in your project info (<yourProject> > Info > Localizations > +). To make it active, you also need to create at least one dummy StringFile (File > New > File...) with a localized version matching the language you wish to add support to. After this step, if the locale of the device matches the language you set up, it will be exposed by the app and chosen by the Crisp SDK. Note that alternative methods may exist, but have not been tested regarding the locale detection of the Crisp SDK.

For iOS apps, debugging the preferred language exposed by your app can be achieved by adding the following line in your AppDelegate.m file : NSLog(@"localeIdentifier: %@", [[NSLocale currentLocale] localeIdentifier]);

If for example, localeIdentifier: en_FR or localeIdentifier: en_US appears in your Xcode logs, then Crisp will be displayed in english. If localeIdentifier: fr_FR appears in your Xcode logs, it will be displayed in french.

Availables APIs:

  • CrispChatSDK.show()
  • CrispChatSDK.setTokenId('userID/GUID')
  • CrispChatSDK.pushSessionEvent(name: "Signup", color: CrispSessionEventColors.blue)
  • CrispChatSDK.setUserEmail('test@test.com')
  • CrispChatSDK.setUserNickname('John Doe')
  • CrispChatSDK.setUserPhone('003370123456789')
  • CrispChatSDK.setUserAvatar('https://pbs.twimg.com/profile_images/782474226020200448/zDo-gAo0_400x400.jpg')
  • CrispChatSDK.setSessionSegment('segment')
  • CrispChatSDK.setSessionString('key', 'value')
  • CrispChatSDK.setSessionBool('key', 'value')
  • CrispChatSDK.setSessionInt('key', 'value')
  • CrispChatSDK.resetSession()
  • CrispChatSDK.configure('YOUR_WEBSITE_ID')

Contributing

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

License

MIT

Keywords

FAQs

Last updated on 14 May 2024

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

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc