Skip to main content

Setting Up the Contentful 1-Click CMS Integration

Learn how to connect Sequel to Contentful to automatically sync your events to your CMS. Once set up, every event you create in Sequel appears in Contentful instantly - no manual work required.

Sequel's native Contentful integration automatically syncs your Sequel events into Contentful as entries. Once connected, every event you create in Sequel appears in your Contentful space - no manual copying, no per-event work.

Because Contentful is a headless CMS, there is one additional one-time step compared to other CMS integrations: your developer adds a small Sequel embed to your site's event page template so synced events render on your website. We cover that at the end of this guide.

Before You Start

In Contentful, create (or choose) a content type that will hold your Sequel events - for example, a content type called "Webinar Page." Make sure it includes a Short text field to store the Sequel Event ID (for example, a field named "sequelId"). This field is required for events to render on your site later.

Step 1: Connect Sequel to Contentful

  1. In Sequel, go to Marketplace and find the Contentful tile under the CMS section.

  2. Click Configure. This opens the setup flow.

  3. Click the installation link. This opens Contentful and asks you to log in if you aren't already.

  4. Choose the space and environment where you want to install the Sequel app. You can install into a staging or testing environment first, or go straight into your production (master) environment.

  5. Click Continue to install the app.

  6. When prompted, authorize access. Sequel requests permission to view and update content and content types (so we can create entries automatically) and to view users in your space.

Step 2: Pair Contentful with Sequel

  1. Once the app is installed, Contentful will ask you to generate a pairing code to sync your events.

  2. Go back to Sequel and click Pairing Code to copy it.
    ​

  3. Paste the code into Contentful and click Connect to Sequel.

  4. Back in Sequel, click Check Connection. You should see a "Connected - you are now paired" confirmation.

Sequel and Contentful are now communicating both ways.

Step 3: Map Your Fields

Once connected, Sequel pulls in all of the content types from your Contentful space.

  1. Select the content type you created for your events (for example, "Webinar Page").

  2. Sequel fetches all of the fields on that content type so you can map them to Sequel event data. Available fields include:

    • Event ID (required) - Maps the Sequel event ID to your Short text field (for example, "sequelId"). This is the most important mapping - your website uses this value to render the event.

    • Event Name - The event title.

    • Description - The event description (map this to your body field so it shows up in the content).

    • Short Description - A shorter summary of the event.

    • Registration URL - The event's registration link.

    • Start Date and End Date - The event's start and end date and time.

    All fields except Event ID are optional, but we recommend mapping as many as possible for a complete sync.

  3. Set publish status: Choose whether synced events should be published immediately or saved as a Draft. We recommend Draft so you can review each event before it goes live on your site.
    ​

  4. Save your configuration.

From this point on, every new event you create in Sequel is automatically pushed into Contentful as an entry, with the Event ID and all your mapped fields populated.

Step 4: Display Events on Your Website (Developer Setup)

Contentful stores your event content but doesn't render the live experience - the registration form, live stream, or replay. Your website reads the Event ID from the Contentful entry and loads the Sequel toolkit to render it. This is a one-time setup by a developer; after that, every event renders automatically.

The Sequel toolkit needs three things on the page:

  • A container element with id="sequel_root"

  • The sequel.js script

  • A Sequel.renderEvent({ eventId }) call

Bind the Event ID from your Contentful entry - don't hard-code it per event.

Option A: Universal snippet (works with any stack)

Paste this once into your event page template and bind your Contentful field to the data attribute:

<div id="sequel_root" data-sequel-event-id="{{ entry.sequelId }}"></div>  <script src="https://prod-assets.sequelvideo.com/uploads/toolkit/sequel.js"></script> 
<script>   
document.addEventListener("DOMContentLoaded", function () {     
var root = document.getElementById("sequel_root");
var eventId = root && root.getAttribute("data-sequel-event-id");     
if (eventId) {
Sequel.renderEvent({ eventId: eventId });
}
});
</script>

Replace {{ entry.sequelId }} with however your templating language outputs the entry's mapped field:

  • Liquid (Shopify, Jekyll): {{ entry.sequelId }}

  • Handlebars / Nunjucks: {{ entry.fields.sequelId }}

  • Contentful + Eleventy: {{ event.fields.sequelId }}

Option B: React / Next.js (Contentful Delivery API)

If you fetch entries with the Contentful Delivery API and render with React, drop in this component and pass the field through:

import { useEffect } from "react";
export function SequelEmbed({ eventId }) {
 useEffect(() => { if (!eventId) return;
const script = document.createElement("script");
script.src = "https://prod-assets.sequelvideo.com/uploads/toolkit/sequel.js";
script.async = true; 
script.onload = () => window.Sequel?.renderEvent({ eventId }); document.body.appendChild(script); 
return () => script.remove(); 
}, [eventId]); 
return <div id="sequel_root" />;}

// Usage — eventId comes straight from the synced Contentful field:// <SequelEmbed eventId={entry.fields.sequelId} />

Option C: Single event (no binding)

For a one-off page, paste the ID inline. This is exactly what the Copy embed snippet button in the Sequel sidebar of the Contentful entry gives you:

<div id="sequel_root"></div> 
<script src="https://prod-assets.sequelvideo.com/uploads/toolkit/sequel.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {     Sequel.renderEvent({ eventId: "YOUR_EVENT_ID" });
}); 
</script>

What it renders

Sequel.renderEvent automatically shows the right experience for the event's stage - no extra code needed:

  • Before the event - the registration form

  • During the event - the live stream

  • After the event - the on-demand replay

Final Steps

Once your configuration is saved and the embed is in place, the integration is fully automatic. To verify everything is working, create a new event in Sequel and check your Contentful space - the event should appear as a new entry with the Event ID, name, and any other mapped fields populated, created by Sequel.

Troubleshooting and FAQ

  • Nothing renders on my site. The most common cause is that the Sequel Event ID field wasn't mapped in the Sequel admin, so entries have no Event ID to render. Double-check the mapping in Marketplace > Contentful.

  • The player is blocked. An ad-blocker or privacy extension may be blocking the player. The toolkit shows a fallback message with an "open in a new tab" link.

  • Use the container id sequel_root exactly - the toolkit renders into it.

  • Load sequel.js once per page.

  • Pass the Event ID through as-is - it must be the exact value Sequel synced into your mapped field. Don't transform it.

  • One Sequel embed per page. Need multiple events on one page? Contact Sequel.

If you run into any issues or have questions during setup, don't hesitate to reach out to our team. We're happy to help.

Related Articles
Did this answer your question?