Widget

Overview

The new @interopio/widget library allows you to use the io.Connect widget in your io.Connect Browser apps. The widget is a floating UI element that provides the user with a Channel Selector UI for the current window and an easy way to return an extracted window back in the Workspace from which it was extracted. The widget has a compact mode and settings for its position within the window:

Installation

To use the widget in your Main app or in your Browser Client apps, install the library in your project:

npm install @interopio/widget

For JavaScript and Angular apps, import the IOBrowserWidget() factory function directly from the library. For React apps, import the IOBrowserWidget() factory function from "@interopio/widget/react", which will import only the library bundle without React in it:

// For JavaScript and Angular apps.
import IOBrowserWidget from "@interopio/widget";

// For React apps.
import IOBrowserWidget from "@interopio/widget/react";

⚠️ Note that the entry point for the "@interopio/widget/react" bundle is declared using the "exports" field which is supported in Node.js 12+. If you are using TypeScript in your React apps and encounter an error, go to the tsconfig.json file of your project and set the "module" and "moduleResolution" properties to a higher Node.js version.

For the widget to be displayed properly, you must also import the necessary styles from the library:

import "@interopio/widget/styles";

Initialization

To initialize the widget, include the IOBrowserWidget() factory function in the libraries array of the configuration object for initializing the @interopio/browser library. You can pass optional configuration for the widget by using the widget property of the library configuration object.

The widget object has the following properties:

Property	Type	Description
`channelSelector`	`object`	Settings for the Channel Selector UI.
`displayInWorkspace`	`boolean`	If `true`, the widget will be visible in the app even if the app is currently in a Workspace. Defaults to `false`. Available since io.Connect Browser 3.4.
`mode`	`"compact" \| "default"`	Mode for displaying the widget. Defaults to `"default"`.
`position`	`"top" \| "bottom" \| "left" \| "right"`	Initial position for the widget within the window. Defaults to `"bottom"`.

The channelSelector object has the following properties:

Property	Type	Description
`enable`	`boolean`	If `true` (default), will enable the Channel Selector UI in the widget.
`type`	`"directional" \| "default"`	Type of the Channel Selector UI. Defaults to `"default"`.

Main App

Using the widget in a Main app:

import IOBrowserPlatform from "@interopio/browser-platform"
import IOBrowserWidget from "@interopio/widget";
// Import the widget styles in order for the widget to be displayed properly.
import "@interopio/widget/styles";

const config = {
    licenseKey: "my-license-key",
    // Configuration for the internal initialization of the `@interopio/browser` library.
    browser: {
        libraries: [IOBrowserWidget],
        // Optional configuration for the widget.
        widget: {
            channelSelector: {
                enable: true,
                type: "directional"
            }
        }
    }
};

const { io } = await IOBrowserPlatform(config);

Browser Clients

Using the widget in a Browser Client app:

import IOBrowser from "@interopio/browser"
import IOBrowserWidget from "@interopio/widget";
// Import the widget styles in order for the widget to be displayed properly.
import "@interopio/widget/styles";

const config = {
    libraries: [IOBrowserWidget],
    // Optional configuration for the widget.
    widget: {
        channelSelector: {
            enable: true,
            type: "directional"
        }
    }
};

const io = await IOBrowser(config);