@trabian/glia-bridge

glia-bridge

npm module for the React Native bridge for Glia Widgets

React Native interface to the glia widgets project

Changelog

0.2.3 - Updating README

0.2.2 - Explicitly set Swift version to 5.3, disable arm64 build for iOS.

0.2.1 - Upgrade ios-sdk-widgets to version 0.6, SalemoveSDK to v0.32. Fixed iOS build issues, setting Swift version for iOS.

0.1.7 - Upgraded glia to sdk version 0.22.1, android widgets 1.6.7, and removed need for apiToken.

0.1.6 - (not released) Upgraded glia to sdk version 0.22, android widgets 1.6.5, and ...

0.1.5 - Added iOS functionality.

0.1.4 - Updated to use the latest glia android widgets and android sdk.

0.1.3 - Initial package working with android. iOS functionality pending.

Known Issues

launchAudioCall() and launchVideoCall() currently have issues connecting on Anddroid.

ScreenSharing currently requires a deeper integration into Android and is not supported.

updateVisitorInfo() currently doesn't work on iOS.

Installation

npm i @trabian/glia-bridge

Usage

React Native API Description

The library works by directly opening a chat or call window when a launch command is received.

launchChat(
    String companyName,
    String contextURL,
    String queueId
)

launchAudioCall(
    String companyName,
    String contextURL,
    String queueId
)

launchVideoCall(
    String companyName,
    String contextURL,
    String queueId
)

updateVisitorInfo(
    String name,
    String email,
    String note,
    String phone,
    ReadableMap customAttributes
)

configure(
    String siteKeyId,
    String siteKeySecret,
    String siteId,
    String queueId,
    String contextUrl
)

Integrating the Android Module

Modifications to android/build.gradle

Change the minSdkVersion to at least 24 to work with Glia.

buildscript {
    ext {
        ...
        minSdkVersion = 24
        ...

If there are issues finding older version of libraries then add jcenter() as a repository source.

allprojects {
    repositories {
        mavenCentral()
        mavenLocal()
        jcenter()
        ...
    }
}

Modifications to android/app/build.gradle

Add the following to the dependencies section.

implementation 'com.glia:android-sdk:0.22.1'
implementation 'com.glia:android-widgets:1.6.7'
implementation 'com.google.code.gson:gson:2.8.8'

android-widgets package information

android-sdk package information

Modifications to AndroidManifest.xml

The glia library requires the following permissions:

<!-- Internet access  -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Access to network state to know when visitor reconnects to the Internet -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<!-- Permission to draw on top of other apps, used for annotations during screen
sharing. Visitor must also explicitly grant this permission to the app through a
permission management screen during the screen sharing session.
tools:overrideLibrary="com.glia.widgets"
-->
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

<uses-sdk android:minSdkVersion="24"/>

Modifications to MainApplication.java

In android/app/src/main/java/com/<project>/MainApplication.java add these imports.

import com.glia.widgets.GliaWidgets;
import com.gliabridge.GliaBridgePackage;

Modify the onCreate() function in MainApplication.java to include the following after the super.onCreate();

super.onCreate();
GliaWidgets.onAppCreate(this);

This is where the siteKeyId, siteKeySecret and siteID are set for android. This is a major difference between the iOS and android implementations. The iOS implementation requires these parameters to be passed with each call to the library, but the android implementation just requires them to be set once.

Modifications to styles.xml

The Glia widgets require MaterialComponents compatible themes. Add the following line to styles.xml.

<style name="Application.Glia.Activity.Style" parent="Theme.MaterialComponents.DayNight.NoActionBar">
</style>

This is also where the Glia theme can be customized.

Integrating the iOS Module

Install the Glia iOS Widgets SDK

The iOS Widgets SDK should be added to the project using CocoaPods.

Modify your Podfile to integrate the SDK:

# Podfile
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/salemove/glia-ios-podspecs.git'

use_frameworks!

platform :ios, '12.0'

target 'YOUR_TARGET_NAME' do
    config = use_native_modules!

    use_modular_headers!

    use_react_native!(:path => config["reactNativePath"])

    pod 'glia-bridge', :path => '../..'

    pod 'SalemoveSDK'
    use_frameworks!
end

NOTE: The SalemoveSDK Pod (Glia's SDK) has a dependency of another Glia Pod, glia-webrtc. This Pod will be downloaded in conjunction and is not explicitly named in the Podfile. However, the glia-webrtc Pod does require git-lfs so you should ensure that this extension is installed on your machine prior to running the initial pod install in order for this Pod to download.

Configuring Glia on iOS

The iOS Widgets SDK requires a few modifications to the AppDelegate.h and AppDelegate.m files.

In your AppDelegate.h file, add the following import:

#import <SalemoveSDK/SalemoveSDK.h>

Also add this property:

@property (nonatomic, strong) SalemoveAppDelegate *appDelegate;

In your AppDelegate.m file add the following import:

#import <SalemoveSDK/SalemoveSDK.h>

Initializing the Glia instance requires a few lines of code in your AppDelegate.m file:

@synthesize appDelegate;

- (instancetype)init
{
  self = [super init];
  if (self) {
    self.appDelegate = [SalemoveAppDelegate new];
  }
  return self;
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [appDelegate application:application didFinishLaunchingWithOptions:launchOptions];
...
...
- (void)applicationDidBecomeActive:(UIApplication *)application {
  [appDelegate applicationDidBecomeActive:application];
}

Your AppDelegate.m file might look something like this:

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

#import <SalemoveSDK/SalemoveSDK.h>

@implementation AppDelegate
@synthesize appDelegate;

- (instancetype)init
{
  self = [super init];
  if (self) {
    self.appDelegate = [SalemoveAppDelegate new];
  }
  return self;
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [appDelegate application:application didFinishLaunchingWithOptions:launchOptions];

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"YourModuleName"
                                            initialProperties:nil];

  if (@available(iOS 13.0, *)) {
      rootView.backgroundColor = [UIColor systemBackgroundColor];
  } else {
      rootView.backgroundColor = [UIColor whiteColor];
  }

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

- (void)applicationDidBecomeActive:(UIApplication *)application {
  [appDelegate applicationDidBecomeActive:application];
}
@end

Integrating with a React JS file

Load GliaBridge by adding the following to your React javascript.

import GliaBridge from '@trabian/glia-bridge';

When the siteKeyId, siteKeySecret, and siteId are available, use them to initialize the Glia widgets.

GliaBridge.configure(siteKeyId, siteKeySecret, siteId, queueId, contextUrl);

Link the GliaBridge module to a React component by responding to the onPress event.

const onChatPress = () => {
   GliaBridge.launchChat(
      companyName,
      contextURL,
      queueId
    );
};

To update the visitor information in Glia use updateVisitorInfo(). Any custom attributes can be added as key value pairs to the customAttributes field. In this example an account number and routing number are provided.

const name = 'Test User';
const email = '[e-mail]';
const phone = '[phone]';
const note = 'New User';
const customAttributes = {
  account: '1234567890',
  routing: '1234567',
};
GliaBridge.updateVisitorInfo(name, email, note, phone, customAttributes);

License

MIT