Embedding Komo
Komo content can live on its own domain or be embedded directly into your website or app. Choose the embedding approach that fits your use case.
Embedding Options
Full Hub Embed
Renders the entire Komo Site (all pages, cards, navigation, and branding) as an embedded iframe within your page. The user gets the full hub experience without leaving your site.
How it works:
Link directly to your hub URL or embed it in an iframe. The hub is a fully hosted web destination — no SDK needed.
<iframe
src="https://your-hub.komo.site"
width="100%"
height="800"
frameborder="0"
allow="clipboard-write"
></iframe>When to use
- Standalone engagement destination within your app
- Branded microsite embedded in an event platform
- Full-page engagement experiences
- When you want Komo to manage the entire UI
Considerations
- Takes up significant page real estate
- Branding is controlled in the Komo Portal
- Navigation is Komo's, not yours
Card Cover Embed
Renders a card's cover image and play button inline in your page. When clicked, the full card experience opens in a modal overlay. The cover image is configured in the Komo Portal.
How it works:
Add a <div> with two data attributes: a marker attribute and a JSON config. The SDK replaces it with the card's cover image.
<div
data-komo-embed-card-cover
data-komo-embed='{
"cardId": "CARD_ID",
"styles": {
"embedStyle": "ImageButton",
"embedWidth": "unset"
}
}'
></div>When to use
- Promotional placements in hero sections or sidebars
- Showing a visual preview of the experience
- Email-like layouts with clickable content blocks
- When the card's cover image adds value
Considerations
- Requires space for the cover image
- Cover design is managed in Komo Portal
- Best when visuals drive engagement
Card Trigger Embed
Attaches card-opening behavior to any existing HTML element. No visual changes — when the element is clicked, the card opens in a modal. You control the look; Komo provides the behavior.
How it works:
Add data-komo-embed-card-trigger with the card ID to any HTML element. The SDK adds a click handler automatically.
<button data-komo-embed-card-trigger="CARD_ID">
Play the Trivia Challenge!
</button>
<!-- Works on any element -->
<a href="#" data-komo-embed-card-trigger="CARD_ID">
Take the Quiz
</a>
<div data-komo-embed-card-trigger="CARD_ID">
<img src="my-promo.jpg" alt="Play to win" />
</div>When to use
- Inline CTAs in your existing content
- Buttons in navigation or menus
- Custom-designed card previews
- When you want full control over the visual presentation
Considerations
- No visual preview of the card unless you build one
- Users need clear indication something will happen on click
Programmatic API
Use JavaScript calls to open, close, and manage card experiences dynamically. Ideal for SPA frameworks (React, Vue, Angular) and dynamic content where you need full programmatic control.
How it works:
Call methods on the komoEmbed global. You can register triggers by CSS selector, open/close experiences, and control visibility.
// Register any element as a trigger via CSS selector
komoEmbed.registerCardTrigger('CARD_ID', '#my-button');
// Open a card experience directly
komoEmbed.openExperience({ type: 'card', id: 'CARD_ID' });
// Close, hide, or unhide the modal
komoEmbed.closeExperience();
komoEmbed.hideExperience(); // hides but preserves state
komoEmbed.unhideExperience(); // shows it againWhen to use
- Single Page Applications (React, Vue, Angular)
- Dynamic content where cards are loaded conditionally
- Complex interactions (open card after form submit, etc.)
- When data attributes don't fit your framework
Considerations
- Requires JavaScript — won't work with JS disabled
- More code to write and maintain
Live Demo
See both embed types working side by side. The card cover on the left is rendered by the SDK. The button on the right is a plain HTML element with a trigger attribute. Both open the same experience.