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.
<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, andcomet_token forwarding.
Popup Modal
Open the form in a modal overlay when a button is clicked. There are two approaches.Option 1: Native dialog + iframe (recommended)
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.<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 loadsembed.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.Popup sizes (script embed only)
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
Webflow
Webflow
- In Webflow, select each button that should open the popup
- In the Styles panel, add a class called
orbit-popup-trigger - Go to Project Settings → Custom Code → Footer Code
- Paste the embed script code from Step 1 above
- Publish your site (custom code does not run in the Webflow Designer or preview mode)
WordPress
WordPress
- Add the class
orbit-popup-triggerto your button block (under “Additional CSS class(es)” in the block settings) - Add the embed script to your theme’s footer, or use a plugin like “Insert Headers and Footers”
- Save and preview
Squarespace
Squarespace
- Add the class
orbit-popup-triggerto your button via the button’s settings - Go to Settings → Advanced → Code Injection → Footer
- Paste the embed script code
- Save
Custom HTML / React / Next.js
Custom HTML / React / Next.js
- Add
class="orbit-popup-trigger"to any button or clickable element - 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.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 theOrbitForms.slider() JavaScript API:
Scheduling Popup
Open a scheduling page in a popup modal. Use the native dialog + iframe option for maximum reliability.Script-based scheduling popup
Use the script embed if you need theOrbitSchedule.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 theOrbitSchedule.slider() JavaScript API:
JavaScript API
All embed types are available via theOrbitForms 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