Integrating Sequel.io Webinars with Sanity CMS

Last updated: October 19, 2026

This guide explains how you can automatically populate your Sanity CMS with event data from Sequel.io webinars using webhooks.

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://.api.sanity.io/v2021-06-07/data/mutate/

Replace:

with your Sanity project's ID
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 (

    

      {webinar.title}


      {webinar.description}


      &lt;br&gt;        src={embedSrc}&lt;br&gt;        width="100%"&lt;br&gt;        height="90vh"&lt;br&gt;        frameBorder="0"&lt;br&gt;        allow="camera *; microphone *; autoplay; display-capture *; picture-in-picture"&lt;br&gt;        allowFullScreen&lt;br&gt;        style=#{{&lt;br&gt;          height: '90vh',&lt;br&gt;          borderRadius: '12px',&lt;br&gt;          border: '1px solid #dbdfec',&lt;br&gt;          boxShadow: '3px 3px 10px 0 rgba(20, 20, 43, 0.04)',&lt;br&gt;          width: '100%'&lt;br&gt;        }}&lt;br&gt;      &gt;


      

        Speakers


        {webinar.speakers.map(speaker => (

          

            {speaker.name} – {speaker.title}

          


        ))}

      


    


  );

}

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.