open-index/open-npm huggingface dataset:
npm package: @interopio/widget
Description: The [`@interopio/widget`](https://www.npmjs.com/package/@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 qui
Latest version: 3.3.0

# @interopio/widget

## Overview

The [`@interopio/widget`](https://www.npmjs.com/package/@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:

```cmd
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](https://docs.interop.io/browser/capabilities/widget/index.html).*

Using the `@interopio/widget` library in the Main app of an **io.Connect Browser** project:

```javascript
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:

```javascript
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);
```