# \&widget

General Option! / Director Option! ([`&director`](/advanced-settings/director-parameters/director.md), [`&push`](/advanced-settings/setup-parameters/push.md), [`&room`](/advanced-settings/setup-parameters/room.md), [`&view`](/advanced-settings/mixer-scene-parameters/view.md), [`&scene`](/advanced-settings/mixer-scene-parameters/scene.md))

## Options

Example: `&widget=https%3A%2F%2Fwww.youtube.com%2Flive_chat%3Fis_popout%3D1%26v%3DORBwkXsUNEs`

<table><thead><tr><th width="208">Value</th><th>Description</th></tr></thead><tbody><tr><td>(URLComponent-encoded URL value)</td><td>load a side-bar with that page as an IFRAME embed</td></tr></tbody></table>

## Details

`&widget` lets you pass a URLComponent-encoded URL value. It will load a side-bar with that page as an IFrame embed, with support for YouTube/Twitch specifically added.

This was designed for Twitch / YouTube / [Social Stream chat](/steves-helper-apps/social-stream-ninja.md), but could in theory work with any CORS-friendly site, such as a third-party web tool.

The director of a room also has the option to enable/disable the widget function for everyone in the room via the room settings menu.

You can encode the URL here:\
<https://www.urlencoder.org/>

### Changing the width of the widget sidebar

**\&widgetwidth** can be used to set the width of the widget sidebar, as a percentile value.

* eg: `&widgetwidth=30`
* the max width is 50%, with the default already at 25%

### Considerations

* not all domains allow themselves to be embedded into VDO.Ninja
* you cannot use \&css or \&js in conjunction with \&widget, for security purposes

<figure><img src="/files/gqboVOR0zZc0DZ1YwS64" alt=""><figcaption></figcaption></figure>

If the director uses `&widget`, it will auto sync that with all guests as they connect. I'll try to find ways to make it easier to resize/minimize in the future.

{% hint style="warning" %}
Widgets and IFrames will fail to load if inserting custom CSS into VDO.Ninja using \&css or \&base64css. This is done for user security in mind.
{% endhint %}

## Related

{% content-ref url="/pages/-MZHfMuNDNQ1dyvvTJX5" %}
[\&chatbutton](/advanced-settings/buttons-and-control-bar-parameters/chatbutton.md)
{% endcontent-ref %}

{% content-ref url="/pages/2pGU9TxBaXEy72kvDG33" %}
[Social Stream Ninja](/steves-helper-apps/social-stream-ninja.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.vdo.ninja/advanced-settings/settings-parameters/and-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.