Embed the JavaScript API
Use the embed.js SDK to open hosted forms in popups or sliders, initialize embed elements, and respond to form callbacks.
Load the SDK
Add the SDK script to your page. It defines the global window.MakeForm and initializes itself when the DOM is ready, or immediately if the DOM is already ready.
<script src="https://www.makeform.ai/widgets/embed.js"></script>Loading the script twice rescans for new elements without reinitializing the SDK. In a single-page app, you can call loadEmbeds() after a route change to initialize inline iframes that have data-makeform-src and no src.
Methods
| Method | Purpose |
|---|---|
MakeForm.loadEmbeds() | Initialize eligible inline iframes |
MakeForm.loadPopups() | Bind popup trigger elements |
MakeForm.loadSliders() | Bind slider trigger elements |
MakeForm.loadAutoOpen() | Process automatic-trigger configs and markers |
MakeForm.registerAutoOpen(config) | Register one automatic-trigger config |
MakeForm.openPopup(formId, options) | Open a popup |
MakeForm.closePopup() | Close the popup |
MakeForm.openSlider(formId, options) | Open a slider |
MakeForm.closeSlider() | Close the slider |
By default, openPopup(formId) and openSlider(formId) open the form’s /e/ page. Set type: "form" to open its /f/ page.
Open a popup
This example opens a centered popup when a visitor clicks a button. The hidden field value is added to the form URL, and onSubmit receives the form ID and answers object.
<script src="https://www.makeform.ai/widgets/embed.js"></script>
<button id="open-form">Open form</button>
<script>
document.getElementById("open-form").addEventListener("click", () => {
window.MakeForm.openPopup("FORM_ID", {
position: "center",
overlay: true,
hiddenFields: { utm_source: "pricing" },
onSubmit: ({ formId, data }) => console.log(formId, data),
});
});
</script>Use openSlider(formId, options) to open a slider with the same options. Errors thrown inside callbacks are caught and do not break the SDK.
Options
These options apply to openPopup and openSlider.
| Option | Type | Description |
|---|---|---|
type | "embed" or "form" | Opens the /e/ or /f/ page. |
embedUrl | string | A prebuilt form URL. Its origin is trusted for messages. |
hiddenFields | object | Adds hidden-field values to the URL as query parameters. |
width | number | Width from 360 to 800. |
position | string | For a popup, center or bottom-right. For a slider, left or right. |
overlay | boolean | Whether to show an overlay. |
initialBgColor | string | Initial modal colour. |
autoCloseMs | number | Time after submit before closing, from 0 to 30000 milliseconds. |
dispatchEvents | boolean | Whether to dispatch window events. |
onOpen | function | Called with { formId }. |
onReady | function | Called with { formId }. |
onSubmit | function | Called with { formId, data }, where data is the answers object keyed by field name. |
onClose | function | Called with { formId }. |
The SDK has no npm package or React or Next.js component for hosted-form embeds. Load embed.js and call window.MakeForm.* from your app.