Orbit's embedding system lets you place any major feature directly on your existing website — events, courses, resources, member directory, announcements, and membership pages. Visitors interact with your Orbit content without leaving your site.
For a non-technical overview of all sharing options (email, social, embedding, direct links), see Sharing & Promotion.
Quick Start
Add two lines of code to any page on your website:
<script src="https://your-portal.com/embed.js" async></script>
<div data-portal-embed="events"></div>
That's it. The embed script automatically creates a responsive iframe, adjusts its height to match the content, and inherits your portal's theme.
Embeddable Content
| Content | Embed Path | What It Shows |
|---|---|---|
| Event list | events |
Browsable, filterable list of all events |
| Individual event | events/my-event-slug |
Full event page with details and registration |
| Course list | courses |
Browsable list of all courses |
| Individual course | courses/my-course-slug |
Course detail page with enrollment |
| Resource library | resources |
Searchable resource library with filtering |
| Individual resource | resources/my-resource-slug |
Resource detail page |
| Member directory | directory |
Searchable directory with card, list, and map views |
| Individual profile | directory/{id} |
Member profile page |
| Announcements | announcements |
Announcement list or individual announcements |
| Membership | membership |
Membership sign-up and level comparison pages |
How It Works
The embed script (embed.js) is a small JavaScript file hosted on your portal. When loaded, it:
- Finds embed placeholders — scans the page for elements with
data-portal-embedattributes - Creates iframes — replaces each placeholder with a responsive iframe pointing to the corresponding Orbit page (with
?embed=1appended) - Auto-resizes — listens for height change messages from the iframe and adjusts the iframe size to eliminate scrollbars
- Applies theming — the embedded content uses your portal's configured theme and branding
- Supports dynamic content — filtering, pagination, and HTMX interactions all work within the embedded view
- Watches for new placeholders — uses a MutationObserver to detect dynamically added placeholders, making it compatible with single-page applications
Theme Control
By default, embedded content uses your portal's light and dark themes, switching automatically based on the visitor's OS preference. Override this with the data-portal-theme attribute:
<!-- Force light theme -->
<div data-portal-embed="events" data-portal-theme="light"></div>
<!-- Force dark theme -->
<div data-portal-embed="events" data-portal-theme="dark"></div>
<!-- No theme (plain, unstyled) -->
<div data-portal-embed="events" data-portal-theme="none"></div>
This is useful when your website handles its own light/dark mode and you want the embedded content to match a specific appearance.
Manual Iframe
If you prefer manual control over the iframe, you can skip the embed script and use a standard iframe:
<iframe src="https://your-portal.com/events/?embed=1"
width="100%" height="800" frameborder="0"></iframe>
Note: with this approach, you are responsible for sizing the iframe. Auto-resize requires the embed script.
Platform Compatibility
Embedding works with any website that supports HTML or iframes:
- WordPress — use a Custom HTML block in the block editor
- Squarespace — use a Code Block or Embed Block
- Wix — use the HTML Embed widget
- Webflow — use an Embed element
- Custom HTML — paste the code into any HTML page
- React / Vue / Angular — add the script tag to your layout and use the
data-portal-embeddiv in your components
No plugins, server configuration, or API keys are required.
WordPress Integration
Hosted WordPress (Higher Tier Plans)
Organizations on higher tier plans can get a hosted WordPress site managed from the Orbit admin portal. This includes:
- WordPress admin access — log in to your WordPress dashboard directly from Orbit
- Site health monitoring — automated uptime and response time checks every 10 minutes
- Daily screenshots — an automated screenshot of your homepage, visible from the admin dashboard
Managed from the Website section of the admin portal.