Skip to main content

​
Inline Embed

The simplest way to embed a form using data attributes: 
<div data-orbit-form="your-form-slug" data-orbit-team="your-team-id"></div>
<script src="https://orbitforms.ai/embed.js"></script>
Or use the JavaScript API for more control: 
<div id="orbit-form"></div>
<script src="https://orbitforms.ai/embed.js"></script>
<script>
  OrbitForms.inline('your-form-slug', '#orbit-form', { team: 'your-team-id' });
</script>
Open the form in a modal overlay. There are two approaches depending on your needs.

​
Option 1: Auto-generated trigger button

The embed script creates a styled button for you: 
<div 
  data-orbit-form="your-form-slug"
  data-orbit-team="your-team-id"
  data-orbit-embed="popup"
  data-orbit-button-text="Open Form"
  data-orbit-size="medium"
></div>
<script src="https://orbitforms.ai/embed.js"></script>
Use the JavaScript API to open a popup from any button or element on your page. This is the recommended approach for website builders like Webflow, WordPress, Squarespace, etc.
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.
<script src="https://orbitforms.ai/embed.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var popup = OrbitForms.popup('your-form-slug', {
      team: 'your-team-id',
      size: 'medium'
    });

    document.querySelectorAll('.orbit-popup-trigger').forEach(function(btn) {
      btn.addEventListener('click', function(e) {
        e.preventDefault();
        popup.open();
      });
    });
  });
</script>
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 popup automatically fits the form content and never overflows the viewport. On mobile, it goes full-screen. You can control the max width:
SizeWidthBest for
small440pxShort forms (1-3 fields)
medium540pxStandard forms (4-8 fields)
large700pxLong forms, multi-step flows

​
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 side of the screen, triggered by your own buttons: 
<script src="https://orbitforms.ai/embed.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var slider = OrbitForms.slider('your-form-slug', {
      team: 'your-team-id',
      position: 'right'
    });

    document.querySelectorAll('.orbit-slider-trigger').forEach(function(btn) {
      btn.addEventListener('click', function(e) {
        e.preventDefault();
        slider.open();
      });
    });
  });
</script>
Add the class orbit-slider-trigger to any button that should open the slider. Set position to 'left' or 'right' to control which side it slides in from.

​
Scheduling Popup

Open a scheduling page in a popup modal using the same pattern: 
<script src="https://orbitforms.ai/embed.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var scheduler = OrbitSchedule.popup('your-schedule-slug', {
      team: 'your-team-id',
      size: 'large'
    });

    document.querySelectorAll('.orbit-schedule-trigger').forEach(function(btn) {
      btn.addEventListener('click', function(e) {
        e.preventDefault();
        scheduler.open();
      });
    });
  });
</script>
Add the class orbit-schedule-trigger to any button that should open the scheduling popup.

​
Scheduling Slider

Slide a scheduling page in from the side: 
<script src="https://orbitforms.ai/embed.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var slider = OrbitSchedule.slider('your-schedule-slug', {
      team: 'your-team-id',
      position: 'right'
    });

    document.querySelectorAll('.orbit-schedule-slider-trigger').forEach(function(btn) {
      btn.addEventListener('click', function(e) {
        e.preventDefault();
        slider.open();
      });
    });
  });
</script>
Add the class orbit-schedule-slider-trigger to any button that should open the scheduling slider.

​
JavaScript API

All embed types are available via the OrbitForms and OrbitSchedule globals: 
// Inline — render inside a target element
OrbitForms.inline('form-slug', '#container', { team: 'your-team-id' });

// Popup — centered modal
var popup = OrbitForms.popup('form-slug', { team: 'your-team-id', size: 'medium' });
popup.open();

// Slider — slides in from the side
var slider = OrbitForms.slider('form-slug', { team: 'your-team-id', position: 'right' });
slider.open();

// Sidetab — persistent tab on the edge of the screen
var sidetab = OrbitForms.sidetab('form-slug', { team: 'your-team-id', position: 'right' });

// Popover — floating button with popover form
var popover = OrbitForms.popover('form-slug', { team: 'your-team-id' });

// Scheduling — popup or slider
var scheduler = OrbitSchedule.popup('schedule-slug', { team: 'your-team-id', size: 'large' });
scheduler.open();

​
Options

OptionDescription
teamTeam ID — first 8 characters of your team UUID (required)
sizePopup size: small, medium, large
positionSlider/sidetab position: left, right
typeForm type: standard, flow
buttonTextText on the auto-generated trigger button
buttonColorBackground color of the trigger button
buttonTextColorText color of the trigger button
openOnLoadOpen the modal automatically on page load
keepSessionKeep form state when closing and reopening
autoCloseAuto-close delay in ms after form submission
hiddenFieldsObject of field values to pre-fill

​
Instance Methods

Every popup, slider, sidetab, and popover call returns an instance with these methods:
MethodDescription
open()Open the modal
close()Close the modal
toggle()Toggle open/close
refresh()Reload the form
unmount()Remove the embed entirely

​
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

AttributeDescription
data-orbit-formForm slug (required)
data-orbit-teamTeam ID (required)
data-orbit-embedEmbed type: standard, popup, slider, sidetab, popover
data-orbit-typeForm type: standard, flow
data-orbit-button-textButton text for interactive embeds
data-orbit-button-colorButton background color
data-orbit-sizePopup size: small, medium, large
data-orbit-positionSlider/sidetab position: left, right
data-orbit-heightExplicit height for inline embeds

​
Events

Listen for form events using CustomEvents: 
document.addEventListener('orbitFormLoaded', function(e) {
  console.log('Form loaded:', e.detail.slug);
});

document.addEventListener('orbitFormSubmitted', function(e) {
  console.log('Form submitted:', e.detail);
  // e.detail contains: { slug, formId, embedId }
});

document.addEventListener('orbitFormError', function(e) {
  console.error('Form error:', e.detail.message);
});

document.addEventListener('orbitFormResize', function(e) {
  console.log('Form resized to:', e.detail.height);
});

document.addEventListener('orbitPopupClosed', function(e) {
  console.log('Popup closed:', e.detail);
  // e.detail contains: { slug, type } where type is popup/slider/sidetab/popover
});

​
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