By following these steps, you can easily embed a Hubspot form and a Sequel Virtual stage on one landing page to reduce the amount of steps in your workflow and have a seamless user experience.
Step 1: Set Up HubSpot Integration in Sequel
Log in to your Sequel.io Admin Dashboard and set up the HubSpot integration. Our HubSpot integration allows Sequel to capture registrations through HubSpot forms and track attendees directly within the Sequel.io event. Follow the steps below to integrate HubSpot forms on your landing page.
Step 2: Add the Sequel Integration Script to Your Website
Copy the below Sequel Integration script and place this script anywhere on your website — ideally in the same location where you usually have the HubSpot form embedded.
<script type="module" src="https://prod-assets.sequelvideo.com/uploads/toolkit/sequel.js"></script>
Step 3: Include the HubSpot Script on the Same Page
To load HubSpot forms correctly, include the HubSpot script in your page’s <head> or <body> tag:
<script src="https://js.hsforms.net/forms/v2.js"></script>
This script initializes HubSpot forms and allows Sequel to interact with them. Make sure the HubSpot script is loaded before the Sequel script to avoid any conflicts.
When creating your form, Sequel requires the user's first name, last name, and email address at minimum. This information is passed to Sequel and used for data and analytics purposes during your live and on-demand sessions.
Please note that when creating your form, you must select the Thank you message display option after a user fills out the form. You can find this setting within the Options tab of the form creation in HubSpot.
Step 4: Configure the Placement of the HubSpot Form and Sequel Component
To set up the placement of the HubSpot form and Sequel component on your page, consider a layout that best suits your needs. Typically, the HubSpot form is placed in a column or section dedicated to collecting registration information, while the Sequel component takes up a larger area on the page to enhance audience interaction.
HubSpot Form Placement
To determine where you want the HubSpot form to appear on your website, create or modify a template for webinars. Create an empty div element with the ID hubspotForm:
<div id="hubspotForm"></div>
It is important to note that this div will be removed once the user completes the registration process. We recommend placing this div inside a flexible layout style so it can automatically adjust the position of other elements on the page once removed.
Sequel Component Placement
On your webpage, include the following code to display the Sequel component. This section will automatically appear if a user is registered or if you switch to Sequel registration instead of using a third-party. We recommend adding this code to a full-width section so that the Sequel component can take up the entire space:
<div id="sequel_root"></div>
The Sequel component will render within the sequel_root div once registration is complete or if a user’s joinCode is present in the URL or cookies.
Step 5: Create a HubSpot Form and Link it to Your Sequel Event
Create a HubSpot Form
Start by creating a form in HubSpot using the HubSpot forms editor. Include fields like Name and Email as required fields for registration.
Configure the Sequel Event
In the Sequel Dashboard, select the event you want to link your HubSpot form to, navigate to the Registration tab, and enable Third-party registration.
Link the HubSpot Form to the Event
Navigate to the CRM tab and you will see a drop-down of your HubSpot forms. Select the form you wish to use
Get the Embed Code from the Sequel Dashboard
Under the Embed tab, copy the code provided for HubSpot Form with Sequel.
Step 6: Embed the Code on Your Page
Paste the embed code anywhere on your page. We suggest creating a CMS entry for this code to make it easier for your marketing team to create new webinars and copy the Sequel embed code to display the correct form and Sequel component.
That’s it! Registrations will now automatically flow into your Sequel.io event, including before, during, and after a live event hosted on Sequel.
Troubleshooting HubSpot Form Integration
Is the form not displaying?
If the form is not displaying, try the following troubleshooting steps:
Check HubSpot Settings
Select 'None' in the form drop-down, and then select the form again.
Include Required Scripts
Ensure that you have included both the Sequel global script and HubSpot script in your webpage. Refer to steps 2 and 3 for details on how to do this.
Check HTML Elements
Make sure you have added the sequel_root and hubspotForm elements in your page.
Use Developer Tools
Open the developer tools in your browser and look for errors. Our embed code will display errors if any of the settings are incorrect.
Contact Sequel Support at support@sequel.io or via Chat
If you are unable to see the form on your page and you have checked for errors but found none, please don’t hesitate to contact Sequel support.
We are here to assist you and will be happy to help resolve any issues you may be experiencing. By following these steps, you can seamlessly integrate HubSpot forms with your Sequel.io events, providing a smooth registration and participation experience for your audience!