@kweekatel/kwikly-widget-react-native NPM

Kwikly Widget React Native SDK

Overview

The Kwikly Widget React Native SDK provides a wrapper around the live chat widget for Kwikly by Kweekatel, enabling developers to integrate live chat functionality seamlessly into their React Native applications.

Prerequisites

Ensure that Firebase Cloud Messaging (FCM) is correctly set up if using push notifications.

Installation

To install the package in your React Native project:

npm install @kweekatel/kwikly-widget-react-native --save
# OR
yarn add @kweekatel/kwikly-widget-react-native

Android Setup

Open android/build.gradle and ensure the module is included:

buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.4.2' // Add this
    }
}

Open android/app/build.gradle and add Firebase Messaging dependency:

 dependencies {
     implementation(platform("com.google.firebase:firebase-bom:33.8.0"))
     implementation 'com.google.firebase:firebase-messaging'
 }

 apply plugin: 'com.google.gms.google-services' // Add this

Place google-services.json in android/app directory.

In android/app/MainActivity, get firebase the token

import android.util.Log
import android.os.Bundle
import com.google.firebase.FirebaseApp
import com.google.firebase.messaging.FirebaseMessaging
import android.os.Build
import com.kwiklywidgetreactnative.KwiklyModule

class MainActivity : ReactActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        FirebaseApp.initializeApp(this)
        getFCMToken()

        // Request notification permission for Android 13+
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) { 
            requestPermissions(arrayOf(android.Manifest.permission.POST_NOTIFICATIONS), 1)
        }
    }

    private fun getFCMToken() {
        FirebaseMessaging.getInstance().token
            .addOnCompleteListener { task ->
                if (task.isSuccessful) {
                    val token = task.result
                    Log.d("AppMainActivity", "FCM Token: $token")
                    
                    KwiklyModule.sendTokenToKwikly(applicationContext, token)
                } else {
                    Log.e("AppMainActivity", "Failed to get FCM token", task.exception)
                }
            }
    }
}
```

Create KwiklyFirebaseMessagingService.kt inside your app directory(com.example.app) with below content: Remember to replace package com.example.app; with your app package name

package com.example.app

import com.google.firebase.messaging.FirebaseMessagingService
import com.google.firebase.messaging.RemoteMessage
import com.kwiklywidgetreactnative.KwiklyModule

class KwiklyFirebaseMessagingService : FirebaseMessagingService() {
    override fun onMessageReceived(remoteMessage: RemoteMessage) {
        super.onMessageReceived(remoteMessage)

        if (KwiklyModule.isKwiklyPush(remoteMessage)) {
            KwiklyModule.handlePushMessage(this, remoteMessage)
        } else {
            // Handle non-Kwikly notifications (if needed)
        }
    }
}

Ensure you add these to you Manifest file

 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
     <!-- Required Permissions -->
     <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
     <uses-permission android:name="android.permission.WAKE_LOCK" />
     <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />
     
     <application
         android:name=".MainApplication"
         ...>
         
         <!-- Firebase Messaging Service -->
         <service
             android:name=".KwiklyFirebaseMessagingService"
             android:exported="false">
             <intent-filter>
                 <action android:name="com.google.firebase.MESSAGING_EVENT" />
             </intent-filter>
         </service>
         
     </application>
 </manifest>

Upload your Firebase private key (JSON file) to the Kwikly Client portal.

If you're using React Native v0.60 or above, the library will be linked automatically without any steps being taken.

Manual linking

Open android/settings.gradle and ensure the module is included:

include ':kwikly-widget-react-native'
project(':kwikly-widget-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/@kweekatel/kwikly-widget-react-native/android')

Open android/app/build.gradle and add the dependency:

dependencies {
    implementation project(':kwikly-widget-react-native')
}

Ensure your MainApplication.java includes the package:

import com.kwiklywidgetreactnative.KwiklyWidgetReactNativeViewPackage;  // Add this

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new KwiklyWidgetReactNativeViewPackage()  // Add this
    );
}

Rebuild the Android project:
```
yarn android
```

iOS Setup

cd ios
pod install
cd ..

If you're using React Native v0.60 or above, the library will be linked automatically without any steps being taken.

Usage

Opening the Chat Widget

You can open the chat widget using the showConversations method from the KwiklyModule native module for both iOS and Android.

Example (React Native JavaScript/TypeScript)

import { NativeModules, Button, View } from 'react-native';

const { KwiklyModule } = NativeModules;

function App() {
  const openKwiklyChat = () => {
    KwiklyModule.showConversations(
      '1744912446839527000640482', // Your Kwikly Widget ID
      'user123',                  // User ID
      'John Doe',                 // User Name
      'john@example.com',         // User Email
      '1234567890'                // User Phone
    );
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Open Chat" onPress={openKwiklyChat} />
    </View>
  );
}

export default App;