Listening to iFrame Events in Sequel.io
Sequel.io provides several iFrame events that developers can use to track user actions and event statuses. To capture these events, add an event listener for message events in your application.
Setting Up an Event Listener
To listen for messages from the iFrame, add the following script to your application:
window.addEventListener("message", receiveMessage);Event Details & Implementation
1. User Registration Event (user-registered)
Triggered when a user registers for an event.
Implementation:
window.addEventListener("message", function (e) {
if (e.data.event === "user-registered") {
let email = e.data.data.email;
let eventId = e.data.data.eventId;
console.log("User registered:", email, "for event:", eventId);
// Custom logic here
}
});Payload:
{
"event": "user-registered",
"data": {
"email": "user@example.com",
"eventId": "12345"
}
}2. Event Lifecycle Events
event-loaded– Fires when the event loads.
Implementation:
window.addEventListener("message", function (e) {
if (e.data.event === "event-loaded") {
let role = e.data.data.role;
let eventId = e.data.data.eventId;
console.log("Event loaded:", eventId, "with role:", role);
}
});Payload:
{
"event": "event-loaded",
"data": {
"role": 2,
"eventId": "12345"
}
}event-started– Fires when an event starts.
Implementation:
window.addEventListener("message", function (e) {
if (e.data.event === "event-started") {
console.log("Event started with role:", e.data.data.role);
}
});event-ended– Fires when an event ends.
Implementation:
window.addEventListener("message", function (e) {
if (e.data.event === "event-ended") {
console.log("Event ended with role:", e.data.data.role);
}
});3. Drawer Change Event (drawer-changed)
Fires when the UI drawer state changes (opened or closed).
Implementation:
window.addEventListener("message", function (e) {
if (e.data.event === "drawer-changed") {
console.log("Drawer state changed:", e.data.data.opened ? "Opened" : "Closed");
}
});Payload:
{
"event": "drawer-changed",
"data": {
"opened": true
}
}4. Initialization Event (initialized)
Fires when the iFrame initializes.
Implementation:
window.addEventListener("message", function (e) {
if (e.data.event === "initialized") {
console.log("iFrame initialized with session ID:", e.data.data.sessionId);
}
});Payload:
{
"event": "initialized",
"data": {
"initialized": true,
"sessionId": "abc123"
}
}5. CTA Update Event (cta-updated)
Fires when a Call-To-Action (CTA) link is triggered.
Implementation:
window.addEventListener("message", function (e) {
if (e.data.event === "cta-updated") {
let cta = e.data.data;
console.log("CTA Updated:", cta.title, "-", cta.link);
}
});Payload:
{
"event": "cta-updated",
"data": {
"showing": true,
"role": 2,
"title": "Join Now",
"link": "https://example.com",
"description": "Click to join the event",
"buttonText": "Join",
"uid": "xyz789"
}
}User Roles Reference
Role | Description |
-1 | Hidden |
0 | Organizer |
1 | Presenter |
2 | Viewer |
3 | Unregistered User |
9 | None (No role or failed access verification) |
By using these events, developers can build custom integrations, track user interactions, and enhance engagement with Sequel.io's platform. If you have any questions, reach out to our support team.