Event App Embed
Add Komo's interactive engagement layer to an existing event platform — Eventbase, Bizzabo, Swapcard, or any app with a WebView or iframe capability.
Use Case
Your client already has an event platform for scheduling, networking, and logistics. They want to add interactive engagement — trivia, polls, sponsor activations, scavenger hunts, leaderboards — without replacing the event app. Komo embeds directly into the existing app, adding the engagement layer without disrupting the core experience.
Approach
Most event platforms support either a WebView (for native apps) or an iframe (for web-based apps). The Komo Embed SDK works in both contexts.
WebView Approach
Create a page in your event app that loads via WebView. This page includes the Komo embed script and renders cards or the full hub. The WebView handles all Komo UI.
iframe Approach
Embed the Komo Hub URL directly as an iframe within the event platform's UI. Simpler setup, but less control over the integration.
Implementation Steps
1. Add the Embed Script
Create an HTML page (or add to an existing page within your event app) that includes the Komo embed script:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://yourevent.komo.site/webembed/embed.js"
data-komo-hub-url="https://yourevent.komo.site"
async
></script>
</head>
<body>
<!-- Card covers or full hub render here -->
<div data-komo-embed-card-cover="CARD_ID"></div>
</body>
</html>2. Configure SSO Passthrough
Pass the event app user's identity to Komo so they don't see a login screen. Use the auth request handler pattern:
// Get the user's identity from the event app
const eventUser = EventAppSDK.getCurrentUser();
komoEmbed.setAuthRequestHandler(async function() {
// Call your backend to generate a Komo JWT
const response = await fetch('/api/komo/auth', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
userId: eventUser.id,
email: eventUser.email,
name: eventUser.displayName
})
});
const data = await response.json();
return data.token;
});
// Also prefill forms with known user data
komoEmbed.setFormPrefillValues({
'email': eventUser.email,
'first_name': eventUser.firstName,
'last_name': eventUser.lastName,
'company': eventUser.company
});3. Embed Cards or the Full Hub
Choose your embedding strategy based on the event app's UI:
Full Hub: Best for a dedicated "Engagement" or "Activities" tab in the event app. Renders all cards, navigation, and leaderboards.
Individual Cards: Best for embedding specific activations within existing screens — a trivia card on the session page, a poll on the sponsor page, etc.
4. Listen for Events
Use event listeners to react to Komo activity — update the event app UI, log analytics, or trigger in-app notifications:
komoEmbed.listenToKomoEvents(function(event) {
if (event.type === 'Gameplay.Ended') {
// Update the event app's activity feed
EventAppSDK.logActivity('Completed Komo challenge');
}
if (event.type === 'Prize.Won') {
// Show a native notification
EventAppSDK.showNotification('You won a prize!');
}
});5. Pass Extension Data
Tag Komo interactions with event context so you can correlate data across systems:
komoEmbed.setExtensionDataValues({
'event_id': 'conf-2025',
'attendee_id': eventUser.id,
'ticket_type': eventUser.ticketType,
'session_id': currentSession.id
});Key Considerations
Connectivity Optimization
Event venues often have unreliable WiFi. Komo experiences are lightweight and designed for mobile, but test with throttled connections. Consider preloading the embed script and card assets when the user first enters the app, not when they navigate to the engagement section.
SSO Handoff
The SSO flow must be seamless. If the JWT generation fails or takes too long, the user will see a Komo login form — a poor experience. Implement error handling and consider pre-generating the JWT when the user logs into the event app, not on first Komo interaction.
Branding Consistency
Configure the Komo Hub's theme to match the event app's branding — colors, fonts, and logos. This makes the embedded experience feel native rather than a third-party widget. Theme settings are in the Komo Portal under Site > Design.