Inspace-widget-test NPM

InSpace Widget

This package is designed to provide synchronous communication between the associated users. The widget component is built and exported as a web-component so it is framework/library agnostic

Installation

If you use npm npm install inspace-widget

If you use yarn yarn add inspace-widget

Usage

First you need to import the default export of the package and define it as a custom element.

// importing the Widget
import Widget from 'inspace-widget';

// defining the custom element
// there is an issue with the vendor we use to transform React component to the webcomponent, 
// so we need to cast the type to any to avoid TS errors
customElements.define('inspace-widget', Widget as any);

To be able to use custom elements in Angular, you need to add a CUSTOM_ELEMENTS_SCHEMA to your module

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

Now you can use the inspace-widget as an ordinary HTML element

// app.component.ts
export class AppComponent {
    accessToken = 'users-access-token';
    ...
}


<!-- app.component.html -->
...
<inspace-widget token="{{accessToken}}"></inspace-widget>
...

Available props

Prop	Info	Description
token	Required	Authenticated user's access token which should be fetched from InSpace backend
session	Required	Authenticated user's session id which will be used to group user's actions under the session
profile-picture	Required	Authenticated user's profile picture (which was fetched from Google Workspace)
event-identifier	Optional	This is the scheduled event identifier which will be passed to the main app by the URL from where it should be passed to the widget
instructors	Optional	A JSON.stringified array of instructor objects. The instructor objects should be provided in an array format, and each object should have the following properties: id (string), and className (string). The array of instructor objects should then be converted to a JSON.stringified format before being passed
assistants	Optional	A JSON.stringified array of assistant objects. The assistant objects should be provided in an array format, and each object should have the id (string) property. The array of assistant objects should then be converted to a JSON.stringified format before being passed
environment	Optional	The current environment where the widget is used
bubble-image-url	Optional	Image Url for bubble. If provided will be used instead of chat icon