@glance-networks/agent-plugin
v1.3.0
Published
Glance Networks Agent Plugin
Downloads
125
Readme
Glance Networks, Inc.
Overview
The Glance NPM package is a react-based plugin that allows developers to create agent-side integrations into Glance. This package provides an interface that allows agents to join Glance Cobrowse, Mobile SDK, and Mobile Camera Share sessions in third-party platforms.
High-Level Overview
- Complete prerequisites
- Set up authentication to Glance
- Install the package and host it in a web application
- Enable Presence
- Enable Reporting
License
See License file and https://ww2.glance.net/terms/ for Glance terms of service.
V.1.3.0 (LATEST) - November 6, 2023
Enhancements
- Adds ability to authenticate via SAML
- Adds ability refresh loginkey after it expires
- Adds user interface enhancements:
- Improved user interface styling and error messages
- Updated interface with new Glance logo
- Adds the ability to end sessions from the agent interface
Improvements and Fixes
- Improved Readme documentation
- URL-Encoded credentials
Prerequisites
You must have a Glance Admin account, and have access to your Glance API KEY.
You will need to setup an authentication URL. See Authentication section below.
Provision Glance Users - Each agent/app user has a Glance Account with a PUID set. Please see https://help.glance.net/account-management/manage_users/ for help managing users/puids.
A website tagged with Glance cobrowse or use the Glance cobrowse injector on a website.
Authentication
Glance uses a form of authentication for external applications we call LoginKey https://help.glance.net/integrations/login-key/integration_loginkey/. LoginKey's are temporary keys (think JWT) that allows access to Glance services from external platforms and are included in the request body when making a POST request. A requirement of using this package is to provide a URL that can be called to retrieve a loginkey for use by a user.
Definitions:
Glance Group - This a numerical value assigned by Glance for your enterprise or BU.
PUID - Partner userid, this is a unique value per user, shared between Glance and a remote system. This value must be unique per user within a Glance group. This is often the user's SID or SSO account ID.
Glance API Key - This can be found in your Glance admin section, it is secret and should NOT be used in any client-side code! https://help.glance.net/integrations/saml/public-key-update/#changing-your-api-key
When using this plugin, authentication is fully up to your system/scenario. Glance has provided some example code to get you started https://help.glance.net/integrations/login-key/integration_samples/ , yours can be written in any language you like, but upon successful authentication of the requesting user, your auth url should return a valid loginkey to be used with this component. A simple example of this is to wrap the code below in a simple "is the requesting user logged in" logic check, if true, return the loginkey, if not send 403 etc. You can verify your LoginKey result using the validator on this page https://help.glance.net/integrations/login-key/login_check//
You will need to setup a service such as a node express POST request to generate a Glance loginkey. The loginkey will give your agent access to the AgentJoin page for Cobrowse.
Example Node Express.js POST Request:
const express = require('express');
const app = express();
app.post('/loginkey', cors(corsOptions), (request, response) => {
try {
const version = 1;
const expires = (Math.round((new Date()).valueOf() / 1000)) + parseInt(environmentVariables.GLANCE_EXPIRATION, 10);
const keystring = environmentVariables.GLANCE_GROUP_ID + request.query.partneruserid + version + expires;
const CryptoJS = require('crypto-js');
const hmac = CryptoJS.HmacSHA256(keystring, environmentVariables.GLANCE_API_KEY);
const hmacb64 = hmac.toString(CryptoJS.enc.Base64);
const loginkey = "$" + version + "$" + expires + "$" + hmacb64.substr(0, 43).replace(/\+/g, '-').replace(/\//g, '_');
response.json({
'loginKey': loginkey,
'groupId': environmentVariables.GLANCE_GROUP_ID,
'expiration': expires
});
} catch(error) {
// handle error
}
});
In the above example we have made
GLANCE_GROUP_ID
>GLANCE_EXPIRATION
andGLANCE_API_KEY
environment variables.
Install
npm i @glance-networks/agent-plugin
Usage
import { Glance } from '@glance-networks/agent-plugin';
<Glance
groupid={GLANCE_GROUPID}
authurl={URL_TO_LOGINKEY}
puid={GLANCE_PUID}
openlocation={'tab' | 'window' | 'iframe' }
iframeid={IFRAME_ID}
gicon={true}
presence={true | false}
glancebaseurl={'beta' | 'production'}
visitorid={VISITOR_ID}
debugmode={true | false}
custominvoke={{
func: "customFunctionName",
args: {
dataParameter: "dataValue"
}
}}
presession
/>
Props
| Prop | Type | Description |
|-------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| groupid | integer | Required. Enter your Glance Group ID (unique ID assigned to your company by Glance). |
| authurl | string | Required. Enter the URL to your login key service. |
| puid | string | Required. Identifies the Glance user. |
| openlocation | string | tab
(default) opens agent viewer in new tab.window
opens agent viewer in new browser window. iframe
opens agent viewer in an iframe. |
| iframeid | string | Optional. The id of the iframe used when openlocation
is set to iframe
. If no id is given, a new iframe
is created. |
| gicon | boolean | Required. In order to show the Glance logo next to the Join
button, set this to true
. If gicon
is not set, or it is set to false
(default), then the logo will not appear. |
| presence | boolean | Optional. Determines if presence is enabled. If undefined, presence is set to off. false
(default) pressence is off, true
presence is on. |
| glancebaseurl | string | Optional. Used if testing early release features on the glance beta platform. production
(default) or beta
|
| visitorid | string | Required when pressence is set to true
. Unique identifier that is used to lookup the visitor and change the state of the Join button. |
| debugmode | boolean | Optional. true
turns on console logs to assist in debugging. false
(default) turns off console logs. |
| custominvoke | object | Optional. A Presence Agent can invoke Javascript functions defined on the Visitor's web page by providing an object that defines the following parameters: func
name of the function, args
function arguments. See below for more detail and an example. |
| presessionfunc | function | Optional. In case you need to do some work before a signaling the visitor to accept terms, you can pass a javascript function to this property. See below for more detail and an example. |
| openwindow | function | Optional. Use this to support the ability to open a Glance Cobrowse session in a new window or tab when the buttons are iframed in an Agent Desktop. |
| authheaders | Object | Optional. If using authmethod=loginkey you can further customize your loginkey endpoint by passing headers to your function (e.g. Authorization header). |
| authbody | function | Optional. If using authmethod=loginkey you can optionally pass data to your function via the POST request body. |
| authmethod | string | Optional. Default = loginkey. loginkey OR saml (requires you have set up SAML with Glance).|
| reportingCallback | function | Optional. Specify a function that will be called at the end of each cobrowse session to return session data. |
| mobileCameraShare | boolean | Optional. true enables a Mobile Camera Share button called Video (SMS), which allows agents to send an SMS message to the visitor to share their camera stream to troubleshoot physical devices. To conduct Mobile Camera Share sessions, you must already have this feature enabled in your account by Glance Customer Service .false (default) disables this button from the interface. |
Example reportingCallback
function
reportingCallback={(data) => console.log(data)}
Example reportingCallback
response
{
"sessionStart": <number>,
"sessionEnd": <number>,
"duration": <number>,
"sessionKey": <string>
};
Example openwindow
const exampleOpenWindowCallback = (url: string): void => {
// Opens a new window when a Glance Cobrowse session starts.
window.open(url, 'Glance', 'width=800,height=800');
};
Example authheaders
and authbody
authheaders={{
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
'Authorization': 'Bearer <token>',
}}
authbody={
new URLSearchParams({
Token: <token>,
})
}
Presence
In order to allow for agent initiated sessions, Glance has created its Presence services framework. This service allows agents to "signal" visitor browsers to do things like start sessions, execute custom code, and so on. Each visitor is unqiuely identified within a Glance groupID using a unique vistor_id value. Visitors are "present" when they are actively focused on a browser tab that has Glance Cobrowse enabled and active or when focused inside a mobile app (Android/iOS SDK). An agent can click on the Join button when a visitor is present to initiate a session request to that user. This concept is usually invoked when an agent in the app/crm is contextually "looking" at a record such as an account/contact/lead etc. for that visitor and wants to cobrowse with that user.
Definitions:
VisitorID - This is a unique value for the web visitor. This can be up to 62 digits in length, generally a hashed customer UUID format. This value is shared between the web property and the agent CRM for a given user.
Join Button - This is the UI component the Agent interacts with. It has a few states such as visitor present and not present. The button will be Blue when a visitor is not present currently, this allows teh agent to use the code methods to cnnect with a visitor/guest.
The VISITOR_ID should be set dynamically as a prop to the React component based on a known value that is attached to a customer profile. Following React lifecycle methods, the UI state will update when a new value appears as the VISITOR_ID. You can set this property dynamically when an agent is viewing a record such as a case or contact record that is specific to a customer or action they are working on. The visitor side (browser) publishes a visitor_id, the agent side subscribes to that same string in order to determine if the user is available. More detail can be found here https://help.glance.net/glance-cobrowse/glance-cobrowse-customizing/presence/presence_visitor/
Custom Presence-Invokable Functions
Visitor's Page:
GLANCE_COBROWSE.Custom = {
customFunctionName: function (params) {
// Do custom things on visitor's page.
}
}
Agent's Glance Component:
<Glance
custominvoke={{
func: "customFunctionName",
args: {
dataParameter: "dataValue"
}
}}
/>
Pre Session Function
Agent's Glance Component:
<Glance
presessionfunc={functionName}
/>
You can pass a reference to a function into this prop if you want to handle some work prior to signaling the visitor's page to show terms. For example, if you need to fetch some user information from a database or generate a custom key to set on the visitor's session.
Changelog
V.1.3.0 - November 6, 2023
Enhancements
- Adds ability to authenticate via SAML
- Adds ability refresh loginkey after it expires
- Adds user interface enhancements:
- Improved user interface styling and error messages
- Updated interface with new Glance logo
- Adds the ability to end sessions from the agent interface
Improvements and Fixes
- Improved Readme documentation
- URL-Encoded credentials
v1.2.0 - June 9, 2023
- Adds Mobile Camera Share functionality, see Properties table for enabling this feature.
- Improves event handling
v1.1.8 - May 15, 2023
- Adds ability to dynamically set a visitor id via the visitorid prop.
v1.1.7 - May 9, 2023
- Fixes a bug when using the authmethod and authurl props.
- Fixes a bug when displaying presence state.
v1.1.6 - May 4, 2023
- Removes joinSession from presenceStartSession to allow for using a custom openViewer method, and to provide a custom callback for opening a tab/window.
- Adds a behavior file to create the desired OnDetect behavior from presence events.
- Modifies GCommon add eventlisteners method to only allow a single event to be added of each type.
- Adds a state variable check in the presence behavior file to only listen for the presenceStartSession when no session has started.
v1.1.5 - April 21, 2023
- Added a reporting prop to specify a callback for reporting cobrowse data at the end of each session.
v1.1.4 - April 10, 2023
- Fixes package to remain in root directory
v1.1.3 - April 7, 2023
- Improves the Agent's presence experience by switching between states based on the visitorConnect event.
- Adds optional
authheaders
andauthbody
props to further customize the loginkey authmetod service.
v1.1.2 - April 3, 2023
- Adds additional customization with a new prop
openwindow
to support the ability to open a Glance Cobrowse session in a new window or tab when the buttons are iframed in an Agent Desktop.
v1.1.1 - March 31, 2023
- Bug fix - prop
glancebaseurl
was not optional.- Bug fix - changelog link in readme.md was broken.
v1.1.0 - March 30, 2023
- Updated Presence and Browser Agent Api scripts.
- Improved the performance of the presence 1-Click Connect experience.
- Refactor to use latest version of React 18.2.0.
- Refactoring to separate components.
- Minor bug fixes to improve the Cobrowse experience.
v1.0.15 - March 17, 2023
- Fixed a bug that prevented agents from entering a key into the join field.