Step 1: Create a Webinar Schema in Sanity
In your Sanity Studio, define a new document schema called webinar to store event information. Add a file named webinar.js in your schema directory.
export default {
name: 'webinar',
type: 'document',
title: 'Webinar',
fields: [
{ name: 'title', type: 'string', title: 'Title' },
{ name: 'description', type: 'text', title: 'Description' },
{ name: 'startDate', type: 'datetime', title: 'Start Date' },
{ name: 'endDate', type: 'datetime', title: 'End Date' },
{ name: 'eventId', type: 'string', title: 'Sequel Event ID' },
{
name: 'speakers',
type: 'array',
title: 'Speakers',
of: [{
type: 'object',
fields: [
{ name: 'name', type: 'string', title: 'Name' },
{ name: 'title', type: 'string', title: 'Title' }
]
}]
}
]
};Ensure you include this schema in your sanity.config.js.
Step 2: Generate a Sanity API Token
Log in to your Sanity dashboard.
Navigate to Settings → API → Tokens.
Create a new token with "Editor" permissions.
Note: Keep this token secure, as it provides write access to your Sanity dataset.
Step 3: Set Up a Sanity API Endpoint (Webhook Receiver)
Sanity allows direct mutations through their API. Use the following endpoint structure to create documents:
POST https://<projectId>.api.sanity.io/v2021-06-07/data/mutate/<dataset>
Replace:
<projectId>with your Sanity project's ID<dataset>typicallyproduction, or your custom dataset
Configure this URL as your webhook URL within your Sequel.io event settings.
Step 4: Configure Sequel.io Webhook
In your Sequel.io dashboard:
Navigate to the webhook configuration.
Enter your Sanity API URL created above.
Add the Sanity API token as an authorization header (
Bearer your-sanity-token).
Once configured, Sequel.io sends the following payload upon event creation:
{
"eventId": "12345",
"title": "Integrating Sequel and Sanity CMS",
"description": "Detailed description of the event.",
"startDate": "2025-07-10T15:00:00Z",
"endDate": "2025-07-10T16:00:00Z",
"speakers": [
{ "name": "Jane Doe", "title": "CTO" },
{ "name": "John Smith", "title": "Product Lead" }
]
}Step 5: Display Webinar Data in Your Frontend
Use GROQ queries to fetch data in your frontend:
*[_type == "webinar"] | order(startDate desc) {
title,
description,
startDate,
endDate,
eventId,
speakers[]
}
Then embed Sequel.io's webinar player using the eventId:
import React from 'react';
export default function Webinar({ webinar }) {
const urlParams = new URLSearchParams(window.location.search);
const embedSrc = `https://embed.sequel.io/event/${webinar.eventId}${urlParams ? '?' + urlParams : ''}`;
return (
<div>
<h1>{webinar.title}</h1>
<p>{webinar.description}</p>
<iframe
src={embedSrc}
width="100%"
height="90vh"
frameBorder="0"
allow="camera *; microphone *; autoplay; display-capture *; picture-in-picture"
allowFullScreen
style={{
height: '90vh',
borderRadius: '12px',
border: '1px solid #dbdfec',
boxShadow: '3px 3px 10px 0 rgba(20, 20, 43, 0.04)',
width: '100%'
}}
></iframe>
<div>
<h2>Speakers</h2>
{webinar.speakers.map(speaker => (
<div key={speaker.name}>
<strong>{speaker.name}</strong> – {speaker.title}
</div>
))}
</div>
</div>
);
}
Final Notes
With this integration, your events are seamlessly managed and displayed directly from Sequel.io into Sanity CMS, greatly reducing manual content management tasks.