This document provides instructions for manually integrating Sequel.io webinars into your Sanity CMS by copying and pasting the Event ID.
Step 1: Set Up Sanity Schema
Create a new document schema named webinar.js in your Sanity Studio:
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',
},
],
};Include this schema in your Sanity configuration (sanity.config.js).
Step 2: Create Webinar Entries in Sanity Studio
Log into your Sanity Studio.
Click on "Create New Document" and select "Webinar".
Manually enter the event details:
Title: Enter the webinar name.
Description: Provide a detailed description.
Start Date and End Date: Enter the date and time.
Step 3: Copy the Sequel Event ID
Log into your Sequel.io dashboard.
Locate your event and copy its unique Event ID under Event summary
Step 4: Paste the Event ID in Sanity
Return to the Sanity Studio webinar entry you created.
Paste the copied Event ID into the "Sequel Event ID" field.
Save and publish your changes.
Step 5a: Embedding the Webinar on Your Website with JavaScript
Use this example in your frontend code that uses pure JavaScript
<script type="text/javascript">
const eventId = webinar.eventId;
const urlParams = new URLSearchParams(window.location.search);
const iframe = document.createElement('iframe');
iframe.className = "sequel-iframe";
iframe.title = "Sequel event";
iframe.width = "100%";
iframe.height = "90vh";
iframe.src = `https://embed.sequel.io/event/${eventId}${urlParams.toString() ? '?' + urlParams.toString() : ''}`;
iframe.frameBorder = "0";
iframe.allow = "camera *; microphone *; autoplay; display-capture *; picture-in-picture";
iframe.allowFullscreen = true;
iframe.style.cssText = "height: 90vh; border-radius: 12px; border: 1px solid #dbdfec; box-shadow: 3px 3px 10px 0 rgba(20, 20, 43, 0.04); width:100%;";
document.currentScript.parentNode.insertBefore(iframe, document.currentScript);
</script>
Ensure your frontend correctly retrieves and populates the webinar object from your Sanity dataset.
Step 5b: Embedding the Webinar on Your Website with React
Use the following React component snippet to include the Sequel.io webinar on your webpage, automatically pulling the eventId from your Sanity CMS data:
import React from 'react';
export default function WebinarEmbed({ webinar }) {
const urlParams = new URLSearchParams(window.location.search).toString();
const embedSrc = `https://embed.sequel.io/event/${webinar.eventId}${urlParams ? `?${urlParams}` : ''}`;
return (
<iframe
className="sequel-iframe"
title="Sequel event"
width="100%"
height="90vh"
src={embedSrc}
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%',
}}
/>
);
}
Final Notes
Using this method, you can manually manage webinars in your Sanity CMS and seamlessly embed Sequel.io webinar content on your React-based website.