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.
The effect of this option is that the guest will see and register on the HubSpot form. Upon submission, the guest will see the Sequel stage with your chosen banner image, countdown, etc.
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.
Select Form and Add the Sequel Integration Script
Navigate to the "Embed" tab within your Sequel event settings.
Go to the HubSpot form with Sequel section on the left navigation.
Follow the numbered steps and do not skip any pieces. This ensures a successful and speedy implementation.
First, select the HS form you want Sequel to listen to for submissions.
Next, add the integration script in step #4. This will tie in the HubSpot form with Sequel component so that submission on the form shows the Sequel component to the registrant right away. This means Resource downloads and other engagement can start even before your event.
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. It is recommended that the Sequel component is placed in a "full-width" area to allow for the best audience interaction and full view of content.
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.
Add HubSpot Form Script on the Event 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.
Implement Embed Code into Event Page
Paste the embed code from Step #6 on Embed tab into your event 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.
Once implemented, this is the expected flow:
Registrant sees HS form and enters info > Registers
Registrant sees the Sequel component populate with thumbnail, engagement, etc., essentially the real estate they'd see for event day.
At the same time, in the background, Sequel listens to that registration and sends registration info to Sequel and "enrolls" the person into email flow (registration confirmation and whatever other emails you have on).
Accessing from email on another day will take them back to the same page.
Replays will also live on the same page. No new embedding, no loss of data!
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!