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

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

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

2. 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

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

4. 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)
                   }
               }
       }
   }

5. 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)
           }
       }
   } 

6. 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>

7. 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

1. 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')

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

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

3. 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
       );
   }

4. 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
      '[email protected]',         // User Email
      '1234567890'                // User Phone
    );
  };

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

export default App;

Logging Out

To clear user data, call the logout() function.

KwiklyModule.logout();

License

This project is licensed under the MIT License.