Skip to main content

Embedding Sequel Events on HubSpot Landing Pages

Answering the question: "How do I use HubSpot landing pages as my website for Sequel events?"

Updated over a week ago

First, on your HubSpot page:

  1. Place a "Rich text" section anywhere on the page

  2. Select the section and go to Advanced -> Source Code
    ​

    image (26)

  3. In Sequel, go to the Embed tab of the event you want to host on the above landing page. In step #2, you'll see a button "Copy code" that looks like the below.

    <div id="embed" style="width: 100%; position: relative; z-index: 1;">&nbsp;</div>
    <script type="text/javascript">
    setTimeout(function () {
    var url = document.location.search;
    var divEl = document.getElementById("embed");
    divEl.innerHTML = '<iframe title="Sequel event" width="100%" height="80vh" src="https://embed.sequel.io/event/EVENT_ID_GOES_HERE' + url + '" frameborder="0" allow="camera *; microphone *; autoplay; display-capture *" allowfullscreen style="height: 80vh; border-radius: 12px; border: 1px solid #dbdfec; box-shadow: 3px 3px 10px 0 rgb(20 20 43 / 4%); width:100%"></iframe>';
    }, 1000);
    </script>

  4. Paste into the "Source code" area of the landing page element added in Step #1 and Publish.


    ​NOTE: Nothing will show up in the editor. You have to Preview or Publish to see the component render on the form.

That's it! You should now see the Sequel component wherever you entered the code.

As a best practice, be sure to enter the URL into incognito mode and test register to see the whole flow for yourself. This is where you can catch things like incorrect brand colors, missing email copy, etc. that are just part of the process.


​

Did this answer your question?