Iframe

To embed an iframe (for example on Notion or other websites), follow the guide below.

Advisory: we recommend using other integration methods over using an iframe. It can be challenging to make an iframe resize responsively to the content inside. However, if you are having difficulties with other integration methods for any reason, then using an iframe can be a good alternative. Common reasons for this include CSS/JS conflicts, or wanting to use multiple Widgets on the same page.

Integration Guide

Go to your Waitlist Dashboard, navigate to the Waitlist, into the Widget Builder, and click "Show Hosted Page".
You'll get taken to the website for the Hosted Page. Note the URL. This one is https://getwaitlist.com/waitlist/71.
Paste the following snippet into your code editor, wherever wherever makes sense for the Waitlist to be on the page.

Iframe Code

<div height="[YOUR HEIGHT HERE]" width="[YOUR WIDTH HERE]">
    <iframe
        allowtransparency="true"
        id="waitlist_iframe"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
        width="[YOUR WIDTH HERE]"
        height="[YOUR HEIGHT HERE]"
        src="[YOUR URL HERE]"
        style="border-radius: 8px;"
    >
    </iframe>
  </div>
  <script>
    const url = new URL(window.location.href);
    const ref_id = url.searchParams.get('ref_id');
    if (ref_id) {
        document.getElementById("waitlist_iframe").src += `?ref_id=${ref_id}`;
    }
  </script>

In the snippet above, swap out:

[YOUR URL HERE] for the URL of your Waitlist, which you found earlier in step 2. In our example, that was https://getwaitlist.com/waitlist/71.
[YOUR HEIGHT HERE] for the height of your Widget. 400px is a good starting value. You can adjust this as needed.
[YOUR WIDTH HERE] for the width of your Widget. 600px is a good starting value. You can adjust this as needed.

Here is an example of how it looks in my code editor:
Open it up in a browser and try it out!
In this example, there's a lot of whitespace, so I'd want to go back and decrease the height in the <div> and <iframe>. You should step through the Widget to make sure the height and width are appropriate -- remember that the Widget can increase or decrease in height as you go through the flow.

Copy-Pastable Code Example

Copy-pastable Code

<html>
    <head>
        <title>
            This is a Test Page for the GetWaitlist Instructions
        </title>
    </head>
    <body style='background-color: #c6c6e6; margin-left: 3rem;'>
        <div style="font-weight: bold; font-size: 24px;">
            Hello World!
        </div>
        <p>
            The purpose of this page is to show you how to embed the widget using an iframe.
        </p>
        <p>
            Here's another paragraph.
        </p>
        <div height="400px" width="600px">
            <iframe
                allowtransparency="true"
                id="waitlist_iframe"
                frameborder="0"
                marginheight="0"
                marginwidth="0"
                width="600px"
                height="400px"
                src="https://getwaitlist.com/waitlist/71"
                style="border-radius: 8px;"
            >
            </iframe>
          </div>
          <script>
            const url = new URL(window.location.href);
            const ref_id = url.searchParams.get('ref_id');
            if (ref_id) {
                document.getElementById("waitlist_iframe").src += `?ref_id=${ref_id}`;
            }
          </script>
        </p>
            And we are finished!
        <p>
    </body>
</html>

Customization

Please note that unlike other integration methods, the iframe does not allow for further customization using the "Widget Embed Options".

Check out the list of no-code platforms we support