Widget

Available since io.Connect Browser 3.3

The @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:

The widget enables all Browser Clients opened as floating windows or ejected from a Workspace to provide a Channel Selector UI to the user. Based on configuration, the widget can also be displayed while the Browser Client is inside a Workspace.

Available since io.Connect Browser 3.5

To use the io.Connect widget in your io.Connect Browser project, you must:

• configure the Main app: provide URLs pointing to the locations of the widget bundle and styles, any default settings to be passed to client apps, or origins to block from using the widget;
• enable using the widget in your Browser Client apps;

Main App

To configure the widget in the Main app, use the widget property in the configuration object for initializing the Main app.

The following example demonstrates configuring the widget in the Main app:

import IOBrowserPlatform from "@interopio/browser-platform"

const config = {
    licenseKey: "my-license-key",
    widget: {
        // It's required to specify the locations of the widget bundle and styles.
        sources: {
            bundle: "https://my-widget/widget-bundle.js",
            styles: ["https://my-widget/styles.css", "https://example.com/custom-styles.css"]
        },
        // Default widget settings that will be used if the Browser Client doesn't provide any.
        defaultConfig: {
            position: "top",
            channels: {
                selector: {
                    enable: true,
                    type: "directional"
                }
            }
        },
        // Origins of Browser Clients to block from using the widget.
        blockList: ["https://example.com/*", "https://another-example.com/*"]
    }
};

const { io } = await IOBrowserPlatform(config);

The widget object has the following properties:

The sources object has the following properties:

Default Widget Settings

To provide default settings for the widget, use the defaultConfig property of the widget object. These default settings will be applied by the Main app if the Browser Client that has requested usage of the widget hasn't provided any widget settings.

The defaultConfig object has the following properties:

The channels object has the following properties:

The selector object has the following properties:

Browser Clients

To enable the widget for a Browser Client app, use the widget property of the optional configuration object for initializing the @interopio/browser library.

The following example demonstrates configuring the widget in a Browser Client app:

import IOBrowser from "@interopio/browser";

const options = {
    widget: {
        // Enabling the widget for the current Browser Client app.
        // It's required to specify this to be able to use the widget.
        enable: true,
        // Overriding the default widget settings from the Main app.
        position: "top",
        channels: {
            selector: {
                enable: true,
                type: "default"
            }
        }
    }
};

const io = await IOBrowser(options);

The widget object has the following properties:

The channels object has the following properties:

The selector object has the following properties: