How to embed chat in your React Native app

Helpcrunch chat component for hybrid applications
Written by Konstantine
Updated 4 days ago


Installation

To install the component, use the package managers yarn or npm:

yarn add rn-helpcrunch
yarn add [email protected]
npm install --save rn-helpcrunch
npm install --save [email protected]

For iOS, you need to take a few additional steps.

Add the line to the file ios/Podfile, immediately after require 'json':

pod 'react-native-webview', :path => '../node_modules/react-native-webview'

After which execute the following commands:

cd ios
rm Podfile.lock
pod install


Configuration

1. Create a widget in Settings→Website Widgets (or open an existing one).

2. Copy 'organizationId' and 'appId'

3. Paste 'organizationId' and 'appId' into the code of the widget component.

import { useRef } from 'react';
import { HelpCrunchWidget, HCWRef } from 'rn-helpcrunch';

// ...
export default function App() {
  const widgetRef = useRef<HCWRef|null>(null);

  const onMessage = (event: any) => { ... }
  const onCustomerMessage = (event: object) => { ... }
  const onAgentMessage = (event: object) => { ... }

  return (
      <HelpCrunchWidget
        organization="@organizationId"     // copy from HelpCrunch settings
        appId="@appId"      // copy from HelpCrunch settings
        onMessage={onMessage}
        onCustomerMessage={onCustomerMessage}
        onAgentMessage={onAgentMessage}
        ref={widgetRef}
      ></HelpCrunchWidget>
  );
}


How to create a customer

To create a user, perform user authentication, and update user information, there are designated methods available:

  • hcwInit - Initialize the HelpCrunch widget in your app. All methods (добявить якорь)  that were called before this method, will run after it finishes the initialization. There's a similar init method in the JS API.
  • hcwUserAuth - Authorize customers and assign them unique user IDs. It's similar to the userAuth method in the JS API.
  • hcwUpdateUser - It is similar to the updateUser function in the JS API, which is utilized to add or modify the existing customer details like name, email, phone number, and company. Additionally, it can create a new user if there isn't one already initialized for the current visitor.
  • hcwUpdateUserData - This method is useful when user's custom attributes change and you want to see these changes in the HelpCrunch user profile instantly. A similar method updateUserData is available in the JS API.
Example:
To authenticate a user, you need to create an object of type 'user' and call the hcwUserAuth(user) function.
import { hcwUserAuth } from 'rn-helpcrunch';
...
  const user = {
    user_id: '123654789'    // generate unique user ID
  };

  useEffect(() => {
    hcwUserAuth(user);
  }, [depts])
...
Note: The application into which the widget is embedded is responsible for all actions with the user (creation, storage, authorization, etc.).


Available methods of the component

The methods provided below are equivalent to those found in the JS API. For further information, please refer to the JS API documentation.

hcwToggleWidget();  - toggles widget (show/hide) based on the previous state 
hcwHideWidget();
hcwShowWidget();
hcwInit(data, signature);
hcwUpdateUser(user, signature);
hcwUserAuth(user, signature);
hcwUpdateUserData(userCustomData, signature);
hcwTrackEvent(eventName, signature);
hcwSetLocalization(phraseListName, signature);
hcwSendProactiveChatAutoMessage(autoMessageId, signature);
hcwSendUserMessage(messageText, signature);
hcwTypeUserMessage(messageText, signature);
hcwLogout();
hcwMuteNotificationSound(isMute, signature);
hcwSetOperatingHours(operatingHours, signature);
hcwOpenKBArticle(articleData, signature);
hcwSetMediaCSS(mediaClassesData, signature);

If you aren't utilizing a security signature, there's no need to pass the signature string through these methods. The signature serves as an additional layer of security that you can choose to create and send if desired. In most situations, generating unique user IDs is sufficient.
Did this answer your question?