# Embed JavaScript API

> Create and control embeds from your own code: open popups on any event, react to submits.

Source: https://docs.formclick.io/html-forms/embed-javascript-api

Every embed mode is also available as a function on `window.Formclick`, for when you want to open a form from your own code.

```js
// Inline, inside an element
Formclick.inline('https://formclick.io/f/your-form', { container: '#form', height: 640, autoResize: true });

// Popup opened from your own code
const popup = Formclick.popup('https://formclick.io/f/your-form', {
  size: 'medium',          // small | medium | large
  openOn: 'click',         // click | load | exit
  trigger: '#cta',         // element that opens it on click
  closeOnSubmit: true,     // close 2.5s after a successful submit
  onSubmit: () => gtag('event', 'form_submit'),
});
document.querySelector('#pricing-cta').addEventListener('click', () => popup.open());

// Floating button, slide-in panel, full page, button
Formclick.floatingButton('https://formclick.io/f/your-form', { label: 'Feedback', position: 'bottom-left', color: '#645cec' });
Formclick.slider('https://formclick.io/f/your-form', { side: 'right', width: 420 });
Formclick.fullPage('https://formclick.io/f/your-form', { container: '#app' });
Formclick.button('https://formclick.io/f/your-form', { container: '#cta-slot', text: 'Get a quote', opens: 'popup' });
```

## Methods

| Method | Options |
| --- | --- |
| `Formclick.inline(url, opts)` | `container`, `height`, `autoResize`, `onReady`, `onSubmit` |
| `Formclick.popup(url, opts)` | `size`, `openOn`, `delay`, `oncePerVisitor`, `trigger`, `closeOnSubmit`, `onSubmit` |
| `Formclick.floatingButton(url, opts)` | `label`, `position`, `color` |
| `Formclick.slider(url, opts)` | `side`, `width`, `color` |
| `Formclick.fullPage(url, opts)` | `container` |
| `Formclick.button(url, opts)` | `container`, `text`, `opens` (`popup` or `new-tab`), `color` |
| `Formclick.scan(root?)` | Set up any new `data-fc-embed` elements, e.g. after rendering HTML. |

Popup, button, floating and slide-in embeds return `{ open(), close(), destroy() }` (floating buttons also have `toggle()`). Inline and full-page embeds return `{ iframe, destroy() }`.