Embed a Sequel Event Grid on your website

The Event Grid Widget allows you to display a beautiful, responsive grid of your company's events on any website. It automatically shows upcoming events for registration and past events with replay functionality.

Quick Start

Add the Sequel script to your website
Add a container div with the correct ID
Call the renderEventGrid function with your company ID

<!DOCTYPE html>
<html>
<head>
<title>My Events</title>
</head>
<body>
<div id="sequel_root"></div>
<script src="https://embed.sequel.io/sequel.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
Sequel.renderEventGrid({
companyId: 'your-company-id-here'
 });
});
</script>
</body>
</html>

Installation

Direct Script Include

<script type="module" src="https://prod-assets.sequelvideo.com/uploads/toolkit/sequel.js"></script>

Configuration Options

The renderEventGrid function accepts the following options:

Parameter	Type	Default	Description
`companyId`	`string`	Required	Your Sequel company ID
`darkMode`	`boolean`	`false`	Enable dark mode styling
`excludeText`	`string`	`""`	Exclude events whose names start with this text
`showDescription`	`boolean`	`false`	Show event descriptions below titles

Example with All Options

Sequel.renderEventGrid({
companyId: 'your-company-id-here',
darkMode: true,
excludeText: 'test',
showDescription: true
});

Examples

Basic Light Mode Grid

<div id="sequel_root"></div> 
<script type="module" src="https://prod-assets.sequelvideo.com/uploads/toolkit/sequel.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
Sequel.renderEventGrid({
companyId: 'abc123-def456-ghi789'
 });
});
</script>

Dark Mode with Descriptions

<div id="sequel_root"></div>
<script type="module" src="https://prod-assets.sequelvideo.com/uploads/toolkit/sequel.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
Sequel.renderEventGrid({
companyId: 'abc123-def456-ghi789',
darkMode: true,
showDescription: true
 });
});
</script>

Exclude Test Events

<div id="sequel_root"></div>
<script type="module" src="https://prod-assets.sequelvideo.com/uploads/toolkit/sequel.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
Sequel.renderEventGrid({
companyId: 'abc123-def456-ghi789',
excludeText: 'test' // Hides events starting with "test"
 });
});
</script>

Event Types & Button Behavior

The widget automatically determines button text based on event type:

Event Type	Button Text	Description
Upcoming Events	"View now"	Directs to registration/event page
Past Events	"Watch now"	Directs to replay/recorded content

Styling

Built-in Themes

Light Mode (Default)

Clean white cards with subtle borders
Black buttons with white text
Optimized for light backgrounds

Dark Mode

Dark gray cards with light borders
White buttons with black text
Optimized for dark backgrounds

Custom CSS

The widget renders inside a Shadow DOM, so global CSS won't affect it. However, you can style the container:

#sequel_root { max-width: 1200px; margin: 0 auto; padding: 20px; }

Responsive Design

The widget is fully responsive and will adapt to container width:

Desktop: 3-column grid (1280px max-width)
Tablet: 2-column grid
Mobile: 1-column grid

Features

Automatic Pagination

Shows 9 events per category by default
"Load more" buttons appear when more events are available
Smooth loading states and error handling

Event Information Displayed

Event title (max 2 lines)
Event description (max 2 lines, optional)
Date, time, and timezone
Event banner image (16:9 aspect ratio)
Live indicators
Action button (View now/Watch now)

Smart Filtering

Only shows events with valid registration URLs
Past events only appear if replays are available
Optional text-based exclusion filtering
Automatic categorization (upcoming vs past)

Troubleshooting

Common Issues

"Company ID is required" Error

// ❌ Missing company ID Sequel.renderEventGrid({}); 
// ✅ Correct usage Sequel.renderEventGrid({ companyId: 'your-company-id-here' });

"Element with id 'sequel_root' not found" Error

<!-- ❌ Missing container --> 
<script> Sequel.renderEventGrid({ companyId: 'abc123' }); </script> 

<!-- ✅ Add container first --> 
<div id="sequel_root"></div> 
<script> Sequel.renderEventGrid({ companyId: 'abc123' }); </script>

No Events Appearing