Embed Script

Add Orbit AI forms to any website with our lightweight embed script. No build tools required.

Inline Embed

The simplest way to embed a form using data attributes:

HTML

<!-- Declarative HTML approach -->
<div data-orbit-form="your-form-slug"></div>
<script src="https://orbitforms.ai/embed.js" async></script>

Or use the JavaScript API for more control:

HTML

<!-- JavaScript approach -->
<div id="orbit-form"></div>
<script src="https://orbitforms.ai/embed.js"></script>
<script>
  OrbitForms.inline('your-form-slug', '#orbit-form');
</script>

Popup Modal

Open the form in a modal overlay:

HTML

<!-- Popup with data attributes -->
<div 
  data-orbit-form="your-form-slug" 
  data-orbit-embed="popup"
  data-orbit-button-text="Open Form"
  data-orbit-size="medium"
></div>

<!-- Or with JavaScript -->
<button id="open-form">Open Form</button>
<script>
  const popup = OrbitForms.popup('your-form-slug', { size: 'medium' });
  document.getElementById('open-form').onclick = popup.open;
</script>

Data Attributes

Attribute	Description
data-orbit-form	Form slug (required)
data-orbit-embed	Embed type: standard, popup, slider, sidetab, popover
data-orbit-button-text	Button text for interactive embeds
data-orbit-button-color	Button background color
data-orbit-size	Popup size: small, medium, large
data-orbit-position	Slider/sidetab position: left, right
data-orbit-height	Explicit height for inline embeds

Events

Listen for form events using CustomEvents:

JavaScript

// Listen for form events
document.addEventListener('orbitFormLoaded', (e) => {
  console.log('Form loaded:', e.detail.slug);
});

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

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

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

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

Next: Best Practices