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 |