@interopio/widget

Overview

The @interopio/widget library provides a floating io.Connect widget used in io.Connect Browser apps. The io.Connect widget offers out-of-the-box implementation of a Channel Selector and a way to quickly return floating windows to their original Workspaces.

Installation

To install the library, execute the following command:

npm install @interopio/widget

Usage

In an io.Connect Browser project, the widget is configured and initialized in the Main app, which then provides the widget to all Browser Client apps that have enabled its usage.

ℹ️ For more details on using the @interopio/widget library, see the io.Connect Browser official documentation.

Using the @interopio/widget library in the Main app of an io.Connect Browser project:

import IOBrowserPlatform from "@interopio/browser-platform"

const config = {
    licenseKey: "my-license-key",
    // Settings for the io.Connect widget.
    widget: {
        sources: {
            // It's required to specify the locations of the bundle and styles for the widget.
            bundle: "https://my-widget/widget-bundle.js",
            styles: ["https://my-widget/styles.css", "https://example.com/custom-styles.css"]
            // It's required to specify the locations of the fonts when using the default widget.
            fonts: ["https://my-widget/fonts.css"]
        },
        // Default widget settings that will be used if the Browser Client doesn't provide any.
        defaultConfig: {
            position: "top-center",
            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);

Enabling the widget in a Browser Client app of an io.Connect Browser project:

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-center",
        channels: {
            selector: {
                enable: true,
                type: "default"
            }
        }
    }
};

const io = await IOBrowser(options);