Skip to main content

Embedding Sequel event on HubSpot Landing Pages

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

Updated this week

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!


​

Did this answer your question?