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?
Sequel.io Business plan
A Webflow website with the CMS 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.
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 to the webinar. 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
Select EVENTID in the code, 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 your CMS template using the Logic tool in Webflow.
Create the CMS connection using Logic in Webflow
You will use Webflow’s new feature, Logic, to create a custom flow to your CMS entries. Creating a flow in Logic is similar to the Zapier experience, without using a third-party app!
Create a new flow in Logic
Once in Logic, select +New Flow and name the flow. Then, you will set up your trigger by selecting Incoming webhook.
Once selected, a webhook URL will populate to the right. Copy this URL and then log in to your Sequel Admin Dashboard and select Integrations from the left-hand menu.
Once in the Integrations tab, select Configure under the Custom CMS webhooks card (not Webflow 1-click CMS!). Then paste the webhook URL provided by Webflow in the Create URL field.
Now, you will create a test event in your Sequel account, and then run a test on the trigger back in your Logic flow in Webflow.
The test should be successful and provide you with an output preview of event details such as company name, event name, event ID, start date/time, banner URL, Hosts/Presenters, and more. Now select, Apply data. If this step fails, review the steps above.
Now, we will add our Action. Drag the Create CMS item block from the left into your flow. Name it ‘create event’ and then select the CMS collection for your webinars.
Now, you can configure the additional fields such as setting his item as draft, staged for publish, or live item (we recommend draft or staged as you start out!).
For the Name and Slug fields, you will add the eventName variable. You have to add a fallback name, which you can add ’none’. We will always push an event name with this trigger so it will never be blank and require the fallback.
Under the Custom Field section, you should see the Virtual Stage ID field you created in your CMS collection settings. For the value add details>eventId.
For other actions, you can use the Make HTTP request block from the left to send data back into Sequel such as your the URL where you embedded the Sequel iframe or the Send email to notify your team when a new collection entry was created.
When you are done, you can publish your flow and test it by creating a test event in Sequel!
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.
If you are seeing orange errors on your workflow, please check your values to ensure there are Fallback values. If not, you can add 'None' to call of these.
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!