Embed with embed.js

embed.js renders interactive widget types and injects the required widget styles. Standard in-page embeds use a direct iframe instead.

Common setup

Every JavaScript widget requires:

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

<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>

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.

Full page

Use fullPage when the form should fill the browser viewport:

<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>

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

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

<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. The popover supplies its own floating launcher:

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

<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 for the complete configuration matrix and Custom domains before changing widget hostnames.

Get started

Reference

Common setup

Full page

Slider

Popover

Side tab

​Common setup

​Full page

​Popup

​Slider

​Popover

​Side tab

Common setup

Full page

Popup

Slider

Popover

Side tab