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.

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.

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.

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:

Make sure you selected 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 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 is now ready. Let's hook up your Sequel account to Webflow using Zapier.

We created a pre-defined Zapier template to make the integration easier.

Start by opening this link: https://zapier.com/shared/sync-your-sequelio-event-creation-into-your-webflow-website/16889dcc31c3389e03563155e87ae80a1b7a2805

Under 1. Virtual Stage Created in Sequel.io - Choose An Account press on Choose and login with your admin account on Sequel.

In the next step, add the company id from Sequel. When you login to the Sequel dashboard you will find an id in the url

Copy the company ID in Zapier

Next, press on Test trigger to fetch the company.

If you see an error, please double check the company ID.

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 when created, select the Create Item option.

Switch to Account and Press Choose to login with your Webflow account.

Select your site and the Collection created above. In our case Sessions.

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.

Under name, insert Details Event Name

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

You can run a Test or Skip if you do not wish to generate a CMs entry.

In this step, make sure to Select the Webflow account from before.

In Action, add the following in the URL field

Press Continue and Skip the test.

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 registration url for users to attend your webinars. 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:

The main domain is sequel-conference-demo.webflow.io

And path is sessions

The final registration URL should look like this.

https://sequel-conference-demo.webflow.io/sessions/{{slug}}

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

Press Continue and Skip Test.

Now that all Steps are green, you can Publish the Zap

To test, login to Sequel 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. You may have to wait a few seconds or refresh the page to see it.

The final test is to look under Slug and open the URL in a new tab. You should see the Sequel component with the registration form

Register for this event with your email and check the Join event link

Pressing Join event should redirect you back to your Webflow site.

And that's it! The 1-click CMS integration is now setup for all your future events.