nativescript-glia

ns plugin add nativescript-glia

Usage

iOS Permissions

You must add the following permissions to your Info.plist for your app, typically located under App_Resources/iOS directory for your app. Change the string to whatever you like for the specific permission.

	<key>NSPhotoLibraryAddUsageDescription</key>
	<string>Need photo library access for adding images</string>

	<key>NSMicrophoneUsageDescription</key>
	<string>Need microphone access for uploading videos</string>

	<key>NSCameraUsageDescription</key>
	<string>Need camera access for uploading images</string>

Android Permission

Automatically added by the plugin so you don't have to configure yourself.

	<!-- 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.
	-->
	<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

Android App Config

You will need to extend the android Application in order to use Glia. You can find NativeScript Docs Here.

Create a file called application.android.ts in the root of your app project. Copy the following contents.

• You will need to rename the JavaProxy file name as well as the Glia site Id, ApiKey, ApiSecret values with your Glia keys. The JavaProxy file name you will need to copy over to the AndroidManifest.xml of your app, located under AppResources/Android/ and replace the <application android:name="YOUR_JAVA_PROXY_NAME"> with your file name. So in this example it would be:

	<application
		android:name="org.myApp.GliaDemoApp"
		android:allowBackup="true"
		android:icon="@drawable/icon"
		android:label="@string/app_name"
		android:theme="@style/AppTheme">

// the `JavaProxy` decorator specifies the package and the name for the native *.JAVA file generated.
@NativeClass()
@JavaProxy('org.myApp.GliaDemoApp')
class Application extends android.app.Application {
  public onCreate(): void {
    super.onCreate();

    // At this point modules have already been initialized

    // Enter custom initialization code here

    com.glia.widgets.GliaWidgets.onAppCreate(this);

    com.glia.widgets.GliaWidgets.init(
      new com.glia.widgets.GliaWidgetsConfig.Builder()
        .setSiteApiKey(new com.glia.androidsdk.SiteApiKey('SITE_APIKEY_ID', 'SITE_APIKEY_SECRET'))
        .setSiteId('SITE_ID')
        .setRegion('us')
        .setContext(this.getApplicationContext())
        .build()
    );
  }

  public attachBaseContext(baseContext: android.content.Context) {
    super.attachBaseContext(baseContext);
    // This code enables MultiDex support for the application (if needed)
    // androidx.multidex.MultiDex.install(this);
  }
}

Lastly, when extending the Android Application with NativeScript we need to ensure the file is handled correctly when bundling with Webpack. With NativeScript 7+ you will need to use the chainWebpack approach like so:

const webpack = require('@nativescript/webpack');

module.exports = (env) => {
  webpack.init(env);

  webpack.chainWebpack((config) => {
    if (webpack.Utils.platform.getPlatformName() === 'android') {
      // make sure the path to the applicatioon.android.(js|ts)
      // is relative to the webpack.config.js
      // you may need to use `./app/application.android if
      // your app source is located inside the ./app folder.
      config.entry('application').add('./application.android');
    }
  });

  return webpack.resolveConfig();
};

With NativeScript versions prior to 7, docs can be found here. Essentially you need to do the following in your webpack.config.js file:

 entry: {
        bundle: entryPath,
        application: "./application.android",
    },

API

• Glia.configure(config: GliaConfiguration) - Configures the Glia instance. _ Must be called prior to other methods _
• Glia.listQueues() : Returns array of queues.
• Glia.start(config: StartConfiguration) - Starts the engagement for the given options.

Example

import { EngagementKind, Environment, Glia, IGliaQueue, StartConfiguration } from 'nativescript-glia';

export SomeClass {
	constructor() {

	}

	// Configure the Glia instance before calling any other methods
	public configureGlia() {
		Glia.configure({
      		siteId: "YOUR_SITE_ID",
      		region: 'us',
      		authorizingMethod: {
        		siteApiKey: {
          			id: "YOUR_SITE_APIKEY_ID",
          			secret: "YOUR_SITE_APIKEY_SECRET",
        		},
      		},
    	}).then(() => {
        	console.log('*** Glia Configured ***');
      	}).catch((err) => {
        	console.log('Glia Configure Error', err);
		});
	}

	public getMyQueues() {
    	try {
    		const queues = await Glia.listQueues();
		  	// iterate your queues here if you need to find a specific queue capable of video/audio/chat or something else.
			// queues can be inspected with the following approach
			const name = (queues[0] as IGliaQueue).name;
    	    const status = (queues[0] as IGliaQueue).state.status;
    	    const media = (queues[0] as IGliaQueue).state.media;
    	} catch (error) {
    		console.log(error);
    	}
	}

	public startChatGlia() {
    	try {
    	  const startOpts: StartConfiguration = {
    	    companyName: 'YOUR COMPANY NAME',
    	    engagementKind: EngagementKind.Chat,
    	    configuration: {
    	      authorizationMethod: {
    	        siteApiKey: { id: 'YOUR_SITE_APIKEY_ID', secret: 'YOUR_SITE_APIKEY_SECRET' },
    	      },
    	      environment: Environment.USA,
    	      siteId: 'YOUR_SITE_ID',
    	    },
    	    queueID: 'YOUR_QUEUE_ID',
    	    visitorContext: {
    	      type: 'page',
    	      url: 'YOUR_SITE_URL',
    	    },
    	  };
    	  await Glia.start(startOpts);
    	} catch (error) {
    	  console.log(error);
    	}
	}
}

License

Apache License Version 2.0