react-native-verloop-sdk v1.0.72-rc14

react-native-verloop-sdk

Getting started

$ npm install react-native-verloop-sdk --save

If you are using proguard in android add the following

-keepattributes *Annotation*
-keepclassmembers class ** {
    @org.greenrobot.eventbus.Subscribe <methods>;
}
-keep enum org.greenrobot.eventbus.ThreadMode { *; }

Installation

iOS - Cocoapods

1. After adding the dependency react-native-verloop-sdk in package.json and running npm install, go to ios subdirectory and run pod install. You should find two dependencies getting installed, RNVerloopSDK and VerloopSDKiOS. You should be good to go.

Android - Manual

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import com.reactlibrary.VerloopSdkPackage; to the imports at the top of the file
• Add new VerloopSdkPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-verloop-sdk'
   project(':react-native-verloop-sdk').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-verloop-sdk/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-verloop-sdk')

Usage

import {Component} from 'react';
import { NativeEventEmitter, NativeModules } from 'react-native';
import VerloopSdk from 'react-native-verloop-sdk';

export default class VerloopLiveChat extends Component {


    async componentDidMount() {
        const clientId = "hello"; // it is same as https://<YOUR CLIENT ID>.verloop.io
        const userId = "raghav"; // it is the unique userID to identify all the chats for this user

        // VerloopSdk.createAnonymousUserConfig(clientId);
        //or
        VerloopSdk.createUserConfig(clientId, userId);

        const eventEmitter = new NativeEventEmitter(VerloopSdk);
        this.eventListener = eventEmitter.addListener('veloop_button_clicked', (event) => {
           console.log(event.title);
           console.log(event.type);
           console.log(event.payload);
        });
        this.eventListener = eventEmitter.addListener('veloop_url_clicked', (event) => {
           console.log(event.url);
        });

        //optional
        VerloopSdk.putCustomField(key, value);
        //optional
        VerloopSdk.putCustomFieldWithScope("test", "value", "USER");
        //optional
        VerloopSdk.putCustomFieldWithScope("test2", "value2", "ROOM");
        //optional
        VerloopSdk.setRecipeId(recipeId);
        //optional
        VerloopSdk.setUserEmail(email);
        //optional
        VerloopSdk.setUserPhone(phoneNumber);
        //optional
        VerloopSdk.setUserName(name);

        VerloopSdk.showChat();
        // VerloopSdk.hideChat();
    }

    render() {
        return null;
    }
    componentWillUnmount() {
        this.eventListener.remove(); //Removes the listener
    }
}

Steps to enable notification:

Create your application on firebase console. (https://console.firebase.google.com)

Download google-services.json and GoogleService-Info.plist for android and iOS respectively.\ Make sure your google-services.json and GoogleService-Info.plist are placed in correct folders.\ google-services.json is placed inside /android/app\ GoogleService-Info.plist is placed inside /ios

Android

Configure gradle files. https://firebase.google.com/docs/cloud-messaging/android/client#set-up-firebase-and-the-fcm-sdk

Add dependency: implementation 'com.google.firebase:firebase-messaging:20.0.1'

Edit MainApplication.java:

import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;                       
import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
   new MainReactPackage(),
   new RNFirebasePackage(),
   new RNFirebaseMessagingPackage(),
   new RNFirebaseNotificationsPackage()
  );                               
}

Add these lines in settings.gradle

include ':react-native-firebase'                       
project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')

In app build gradle, add dependency:

dependencies {
   compile(project(':react-native-firebase')) {   
       transitive = false
   }
   // ... other dependencies listed
}

Install firebase as a dependency\ npm install --save react-native-firebase

React Native Code

import React, {Component} from 'react';
import VerloopSdk from 'react-native-verloop-sdk';
import firebase from 'react-native-firebase';
import { AsyncStorage } from 'react-native';

export default class VerloopLiveChat extends Component {

    async componentDidMount() {
        const token = await checkPermissionAndGetToken();
        if(token != null){
          await VerloopSdk.setFcmToken(token);
        }
          
        await VerloopSdk.createAnonymousUserConfig('hello.stage');
        VerloopSdk.showChat();
    }
   
    async checkPermissionAndGetToken() {
      const enabled = await firebase.messaging().hasPermission();
      if (enabled) {
          return this.getToken();
      } else {
          const permissionGranted = this.requestPermission();
          if(permissionGranted){
            return this.getToken();
          }
      }
      return null;
    }
    
    async getToken() {
      let fcmToken = await AsyncStorage.getItem('fcmToken');
      if (!fcmToken) {
          fcmToken = await firebase.messaging().getToken();
          if (fcmToken) {
              // user has a device token
              await AsyncStorage.setItem('fcmToken', fcmToken);
          }
      }
      return fcmToken;
    }

    async requestPermission() {
      try {
          await firebase.messaging().requestPermission();
          return true;
      } catch (error) {
          // User has rejected permissions
          console.log('permission rejected');
      }
      return false;
    }

    render() {
        return null;
    }
}