Skip to main content
All CollectionsIntegrating with Sequel.ioCMS Integrations
Setup 1-click CMS integration with Webflow
Setup 1-click CMS integration with Webflow

Learn how to setup CMS integration with Webflow so events created in Sequel appear directly in your CMS

Updated over a week ago

Sequel.io offers seamless integration with any CMS, allowing events created in our dashboard to automatically appear on your website. In this article, we will provide you with a step-by-step guide on how to integrate with Webflow and effortlessly embed Sequel events without the need to manually copy and paste the embed code for each session.

What do you need to get started?

  1. Sequel.io Business plan

  2. A Webflow website with the CMS plan

  3. A Zapier Starter Plan

Final result

Once the integration is ready, any events created in Sequel will generate a CMS entry in Webflow with the correct Sequel embed code:

The Sequel event will also include the accurate Slug (event URL) that has already been added in the Registration section, ensuring that you never miss directing your audience to your website.

With this integration, you have the flexibility to choose whether you want the events to be published on your website immediately or keep them in draft mode until you approve the CMS entry. This allows your design team to maintain the desired look and feel of your website while you can focus on creating and running webinars effortlessly.

Excited? Let's begin creating this integration.

Setting up the Webflow website

There are many ways to create a CMS template for your webinars in Webflow. In this article we will create a very simple design with your top navigation, Sequel embed and a footer.

To start, you need to set up the CMS. You have the option to use your current CMS or create a new one. In this article, we will create a new CMS. Go to the CMS collection and click on "New Collection."

Feel free to name this collection whatever you prefer, such as webinars, events, or sessions. For the purpose of this article, we will refer to it as sessions.

Take note of the Collection URL. It will be used later in Zapier.

Under the Collection Fields, create a new Plain Text called Sequel Event Id. This will be used later to embed Sequel events.

Once ready, press on Create Collection. This CMS collection will be used in the 1-click integration. You can use any existing collection but make sure to add the Sequel Event Id as a field.

Update Collection Page to include Sequel embed code

We will use the Sequel Event Id field above to embed Sequel on your page. Open the collection template:

Add a new Embed section on your page. We recommend this at the top of the page right under the Header so users don't have to scroll. Add the following code:

<script type="text/javascript"> url = parent.document.location.search; document.write('<iframe title="Sequel event" width="100%" height="90vh" src="https://embed.sequel.io/event/EVENTID' + url + '" frameborder="0" allow="camera *; microphone *; autoplay; display-capture *" allowfullscreen style=" height: 90vh; border-radius: 12px; border: 1px solid #dbdfec; box-shadow: 3px 3px 10px 0 rgb(20 20 43 / 4%); width:100% " > </iframe>'); </script>
Locate in the code EVENTID and replace it with a Webflow field

Make sure you select EVENTID and press Add Field. Select the field created above called Sequel Event Id.

The final code should look like this:

Please note the EVENTID was replaced with the Sequel Event Id field from Webflow.

Press Save and Close to include the Sequel component. Now any CMS entry that has the Sequel Event Id will automatically render the Sequel Virtual Stage without having to copy-paste the code again.

You can add the Footer and Header components on this page to contain the HTML code. We also recommend adding some padding around the HTML embed on the right and left side.

Once a Sequel Event Id is added to a CMS entry, the page will render the correct Sequel iFrame:

The CMS collection and design are now ready. Let's hook up your Sequel account to Webflow using Zapier.

Create the CMS connection using our Zapier template

We created a pre-defined Zapier template to make the integration easier β€” start by opening this link.

Step 1: Setup Sequel account

Under 1. Virtual Stage Created in Sequel.io - Choose An Account select Choose and login with your Sequel Admin account.

In the next step, add your Sequel Company ID. To access your Sequel Company ID, log in to your Sequel Admin Dashboard, and once logged in, you will find it in the URL. For example:

Now, copy your Company ID into the Company ID field in Zapier:

Next, select Test to fetch your company data in Zapier:

If you see an error, please double-check the Company ID!

Step 2: Setup Webflow account

The first step is to decide if you want the CMS entry to be published automatically or to stay in draft mode. By default, the Create Live Item event is selected. If you wish to keep the item unpublished once created, select the Create Item option:

Next, switch to Account and select Choose to log in with your Webflow account:

Select your Site and the Collection created above within the drop-down menus. In this example, we are selecting the Sessions collection.

Under Collection, you will find the Sequel Event Id field created in CMS. Click on the field and add Details Event Id. This will ensure the correct Event ID is created in Webflow.

Now, under Name, insert Details Event Name:

The last fields are required by Webflow and you can decide if you want the CMS to be in archive or draft mode:

Once complete, you can run a Test, or Skip if you do not wish to generate a CMS entry.

Step 3: Add API request

In this step, make sure to Select the Webflow account from before. In Action, add the following in the URL field:

https://api.webflow.com/collections/{{_cid}}/items/{{_id}}

Now, select Continue and Skip the test.

Step 4: Update event in Sequel

In this step, you need to add 4 fields:

Event Id: click on the field and select Details Event Id

Collection Id: type in {{_cid}}

Item Id: type in {{_Id}}

Registration URL: this is the URL where you of the landing page that will host your webinar and send your audience to watch and engage live. Use the main domain from your Webflow site and the collection used above.

To find this URL, look under the Collection settings in Webflow and copy the Collection URL:

Based on the example above:

Make sure to add {{slug}} at the end of the URL, instead of session-page β€” this will add the unique links for each session.

Next, select Continue and Skip Test.

Ready to publish

Now that all steps are green, you can Publish the Zap!

To test, log in to your Sequel Admin Dashboard and create a new event!

Once the event is created, check the Webflow collection and you should see the entry with the correct name and Event ID. It may take a few seconds or require a refresh of the page to see the change.

The final test is to look under the Slug field and open the URL in a new tab. You should see the Sequel Virtual Stage and registration form rendered:

Register for the event and find the registration confirmation email in your inbox. Within the email, select Join event.

The Join event link should redirect you back to your Webflow landing page that has your session embedded.

That's it! The 1-click CMS integration is now set up for all your future events. If you have any questions, chat with our team via the chat in the bottom-right corner or by emailing support at support@sequel.io!

Did this answer your question?