Integrating Sequel.io Webinars with Sanity CMS

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> typically production, 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.

Setup 1-click CMS integration with Webflow

Setup Wordpress 1-click CMS

Embedding Sequel with Sanity