> ## Documentation Index
> Fetch the complete documentation index at: https://docs.onlyform.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed with embed.js

> Install full-page, popup, slider, popover, and side-tab form widgets.

`embed.js` renders interactive widget types and injects the required widget styles. Standard in-page embeds use a direct [iframe](/widgets/iframe) instead.

## Common setup

Every JavaScript widget requires:

1. A single configuration object at `window.onlyform`.
2. A mount element with `id="app"`.
3. The module script loaded after the configuration and mount element.

```html theme={null}
<div id="app"></div>

<script>
  window.onlyform = {
    id: 'FORM_ID',
    type: 'fullPage',
    hideHeaders: false,
  }
</script>
<script type="module" src="https://oy.fm/embed.js"></script>
```

<Warning>
  The current loader uses one global configuration and one `#app` mount. Install one `embed.js` widget per page. If your application already uses `id="app"`, use a standard iframe to avoid a mount-point conflict.
</Warning>

## Full page

Use `fullPage` when the form should fill the browser viewport:

```html theme={null}
<div id="app"></div>
<script>
  window.onlyform = {
    id: 'FORM_ID',
    hideHeaders: false,
    type: 'fullPage',
  }
</script>
<script type="module" src="https://oy.fm/embed.js"></script>
```

## Popup

A popup needs a trigger button. The button's `data-embed-id` must match the configured form ID.

```html theme={null}
<button
  type="button"
  data-button="onlyform"
  data-embed-id="FORM_ID"
  style="background: #3969D9; color: #fff; border: 0; border-radius: 10px; padding: 12px 20px;"
>
  Contact us
</button>

<div id="app"></div>
<script>
  window.onlyform = {
    id: 'FORM_ID',
    hideHeaders: false,
    type: 'popup',
    popupSize: 'large',
  }
</script>
<script type="module" src="https://oy.fm/embed.js"></script>
```

`popupSize` accepts `small`, `medium`, or `large`.

## Slider

The slider also uses a matching trigger button and can enter from either side:

```html theme={null}
<button
  type="button"
  data-button="onlyform"
  data-embed-id="FORM_ID"
  style="background: #3969D9; color: #fff; border: 0; border-radius: 10px; padding: 12px 20px;"
>
  Give feedback
</button>

<div id="app"></div>
<script>
  window.onlyform = {
    id: 'FORM_ID',
    hideHeaders: false,
    type: 'slider',
    position: 'right',
  }
</script>
<script type="module" src="https://oy.fm/embed.js"></script>
```

`position` accepts `left` or `right`.

## Popover

The popover supplies its own floating launcher:

```html theme={null}
<div id="app"></div>
<script>
  window.onlyform = {
    id: 'FORM_ID',
    hideHeaders: false,
    type: 'popover',
    buttonColor: '#3969D9',
    greetingMessage: 'Hey 👋 How can we help?',
    notificationDot: true,
  }
</script>
<script type="module" src="https://oy.fm/embed.js"></script>
```

Omit `greetingMessage` to show only the launcher.

## Side tab

The side-tab widget supplies a persistent launcher and sliding panel:

```html theme={null}
<div id="app"></div>
<script>
  window.onlyform = {
    id: 'FORM_ID',
    hideHeaders: false,
    type: 'sideTab',
    buttonText: 'Contact us',
    buttonColor: '#3969D9',
  }
</script>
<script type="module" src="https://oy.fm/embed.js"></script>
```

See [Widget options](/widgets/options) for the complete configuration matrix and [Custom domains](/widgets/custom-domains) before changing widget hostnames.