react-native-critzr

react-native-critzr

React Native wrapper for Critzr

Getting started

npm install react-native-critzr

Additional installation steps

Android

This module does not require any extra step after rebuilding your app.

iOS

1. Add the Critizr SDK by adding the following line to your Podfile.

pod "Critizr-ios", :git => "https://github.com/critizr/critizr-ios-pod.git", :tag => "1.2.8"

1. Then install it

pod install

1. Fill in the Critizr API Key in the info.plist file before calling methods on the Critizr SDK:

<key>CritizrAPIKey</key>
<string>Critizr API Key</string>

1. Fill in the Critizr environment in the info.plist file before calling methods on the Critizr SDK (don't forget to replace it with your own):

<key>CritizrEnvironement</key>
<string>PreProduction</string>

or

<key>CritizrEnvironement</key>
<string>Production</string>

Usage

Importing the library:

import Critzr from 'react-native-critzr';

Initiliaze (Only works on Android):

Critzr.init({
  apiKey: 'my-secret-api-key',
  languageCode: 'en',
});

Manage language:

const language = await Critzr.getLanguage();

Critzr.setLanguage('fr');

Set user for current instance:

Critzr.setUser({
  firstname: 'Michael',
  lastname: 'Scott',
  email: '[e-mail]',
  phone: '0123456789',
  crmId: '123ABC',
});

Open feedback display:

// you don't have to give any parameter
Critzr.openFeedbackDisplay();

// show a targeted place
Critzr.openFeedbackDisplay({ placeId: 'your-place-id' });

//
// show a targeted place with different modes
//

Critzr.openFeedbackDisplay({
  placeId: 'your-place-id',
  mode: Critzr.FEEDBACK_MODES.START_WITH_FEEDBACK, // default
});

Critzr.openFeedbackDisplay({
  placeId: 'your-place-id',
  mode: Critzr.FEEDBACK_MODES.START_WITH_QUIZ,
});

Critzr.openFeedbackDisplay({
  placeId: 'your-place-id',
  mode: Critzr.FEEDBACK_MODES.ONLY_QUIZ,
});

Open store display:

Critzr.openStoreDisplay('your-place-id');

Get ratings using event listener:

useEffect(() => {
  const listener = Critzr.addEventListener(Critzr.EVENTS.RATING_RESULT, (e) => {
    if (e?.customerRelationship) {
      setResult(
        `Customer Relationship: ${e.customerRelationship}, Satisfaction: ${e.satisfaction}`
      );
    } else {
      setResult('Event Rating Error!');
    }
  });

  return () => listener.remove();
}, []);

You can perceive whether the user gives feedback (Only works on Android):

useEffect(() => {
  const listener = Critzr.addEventListener(Critzr.EVENTS.FEEDBACK_SENT, (_) => {
    console.log('User given a feedback!');
  });

  return () => listener.remove();
}, []);

Contributing

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

License

MIT