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
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.
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])
...
Available methods of the component
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);