Skip to main content

Iframe Embed

Recommended for inline forms — Pure HTML, no third-party script. Renders even when ad blockers, corporate firewalls, or strict CSPs would block scripts.
The small <script> does two things: auto-resizes the iframe to match the form’s content height, and forwards mouse-wheel events from inside the iframe so the host page keeps scrolling when the cursor is over a short form. Trade-offs: fixed height (no auto-resize), and no popup / slider / sidetab modes. Use the script embed below if you need those.

Script Embed (Inline)

The script embed is required for popup, slider, sidetab, and auto-resize. For inline use it adds pre-fill, event callbacks, and comet_token forwarding.
Or use the JavaScript API for more control:
Open the form in a modal overlay when a button is clicked. There are two approaches.
Uses the native browser <dialog> element with inline JavaScript. No third-party script, so it can’t be blocked by ad blockers or strict CSPs. Universal browser support since 2022.
The native <dialog> element handles the backdrop dimming, escape-to-close, focus trap, and ARIA roles automatically. Add the generated trigger class to as many buttons as you want — they’ll all open the same form. Use a unique class per form if you have multiple popup embeds on the same page. Adjust the width and height inline styles on the <dialog> to fit your form.

Option 2: Script embed

Use the embed script if you want auto-resize, event callbacks, or slider/sidetab/popover modes. This loads embed.js from orbitforms.ai, which can be blocked by aggressive ad blockers or corporate firewalls — use Option 1 above for maximum reliability.

Auto-generated trigger button

The embed script creates a styled button for you:

Trigger from your own buttons

Use the JavaScript API to open a popup from any button or element on your page:
1

Add the embed script

Add the script tag and popup setup code to your site’s footer or a custom code block. This only needs to appear once on the page.
2

Add the class to your buttons

Add the CSS class orbit-popup-trigger to every button that should open the popup. You can have as many buttons as you want across the page — they’ll all trigger the same popup.
3

Publish your site

Publish or deploy your site. The popup will only work on the live/published site — most website builders don’t execute custom JavaScript in their preview or designer mode.
Why use a class instead of an ID? HTML IDs must be unique — only one element per page can have a given ID. If you have multiple “Get Started” buttons, document.getElementById only finds the first one. Using a class with querySelectorAll attaches the popup trigger to every matching button.
Important: OrbitForms.popup() does not open the popup immediately. It creates an instance and returns an object with open(), close(), and toggle() methods. You must call .open() to show the popup.
The script-based popup automatically fits the form content and never overflows the viewport. On mobile, it goes full-screen. You can control the max width:

Platform-specific setup

  1. In Webflow, select each button that should open the popup
  2. In the Styles panel, add a class called orbit-popup-trigger
  3. Go to Project Settings → Custom Code → Footer Code
  4. Paste the embed script code from Step 1 above
  5. Publish your site (custom code does not run in the Webflow Designer or preview mode)
  1. Add the class orbit-popup-trigger to your button block (under “Additional CSS class(es)” in the block settings)
  2. Add the embed script to your theme’s footer, or use a plugin like “Insert Headers and Footers”
  3. Save and preview
  1. Add the class orbit-popup-trigger to your button via the button’s settings
  2. Go to Settings → Advanced → Code Injection → Footer
  3. Paste the embed script code
  4. Save
  1. Add class="orbit-popup-trigger" to any button or clickable element
  2. Include the embed script before </body> or in your layout component

Slider

Slide the form in from the right edge of the screen. Use the native dialog + iframe option for maximum reliability.
To slide in from the left, swap right:0;left:auto to left:0;right:auto and change the transform to translateX(-100%).

Script-based slider

Use the script embed if you need the OrbitForms.slider() JavaScript API:

Scheduling Popup

Open a scheduling page in a popup modal. Use the native dialog + iframe option for maximum reliability.
Add the generated trigger class to any button that should open the scheduling popup.

Script-based scheduling popup

Use the script embed if you need the OrbitSchedule.popup() JavaScript API:

Scheduling Slider

Slide a scheduling page in from the right edge of the screen. Use the native dialog + iframe option for maximum reliability.

Script-based scheduling slider

Use the script embed if you need the OrbitSchedule.slider() JavaScript API:

JavaScript API

All embed types are available via the OrbitForms and OrbitSchedule globals:

Options

Instance Methods

Every popup, slider, sidetab, and popover call returns an instance with these methods:

Closing behavior

Popups can be closed in multiple ways:
  • Clicking the X button in the top-right corner
  • Clicking the overlay (dark area outside the popup)
  • Pressing the Escape key
  • Calling popup.close() programmatically

Data Attributes

Events

Listen for form events using CustomEvents:

Embed Types

Inline (standard)

Embed directly in page content

Popup

Centered modal overlay

Slider

Slides in from the side

Sidetab

Floating tab that expands to form

Popover

Anchored popover near trigger