Nuvidio-widget-js NPM

NuVidio Widget JS

Library to use NuVidio Widget in JS applications

Installation

npm i nuvidio-widget-js

Usage

Import NuVidio Widget Scripts

The first thing you must do is import the widget scripts. This import guarantee that the script will be available when you set a department. The import is done through the method importScripts:

import NuVidioWidget from 'nuvidio-widget-js';

// ...

NuVidioWidget.importScripts();

// ...

Set Department

To use the NuVidio Widget in your application you must have the unique identifier to the department created in your company account. With the identifier you can use the method setDepartment as follow:

import NuVidioWidget from 'nuvidio-widget-js';

// ...

NuVidioWidget.setDepartment('identifier', options);

// ...

You can set some options for the widget as well. This options allows you to change some configurations of the widget. (Type NuVidioWidgetOptions)

In case NuVidio Widget is already added to the page the previous configuration will be overlapped.

Remove NuVidio Widget

Is possible to remove the widget at any time by using the removeWidget method:

import NuVidioWidget from 'nuvidio-widget-js';

// ...

NuVidioWidget.removeWidget();

// ...

Using a custom button

The widget popup can be opened by your own custom button. To use this functionality your button must contain the id or class nuvidio-widget-button. E.g.:

<button id="nuvidio-widget-button" class="any-class-you-want">Widget</button>
<button class="nuvidio-widget-button any-class-you-want">Widget</button>

The model using id is more reliable but can be applied to only 1 button, while a class name can be used in multiple buttons.

API

NuVidioWidgetOptions

Property	Type	Required	Default	Description
fabButton	`boolean`	❌	false	This options hides the left-bottom fab button used to open the video popup.
fabButtonContent	`string`	❌	Falar agora	Define the text inside the left-bottom fab button.
open	`boolean`	❌	false	If this option is set to true, the widget will open when `setDepartment` is called.
errorMessage	`string`	❌	default message	Set the default message showed to the user when occurs some error in the widget.
clientData	`object`	❌	-	This object is used to pass client's data to the widget. (Type `clientData`)

clientData

Property	Type	Required	Default	Description
name	`string`	❌	-	Client name.
email	`string`	❌	-	Client email (the email field can be filled with another value as cell phone for exemple).
pushToQueue	`boolean`	❌	false	This option defines if the client data will be sent to the queue without client confirmation. If true the client will be pushed to the queue automatically. (name and email fields must be filled)