Webflow

This guide explains how to integrate your waitlist widget into a Webflow page using an embedded code element. The code snippets provided are just examples, and you should replace them with actual data from your waitlist, which can be found on the Waitlist Settings page.

Important Note: Widget Visibility

Please note that the waitlist widget will not be visible within the Webflow Editor. It will only appear on the published site. You must publish your site to view and interact with the widget.

Inside of the editor you might see the following message in your widget contianer:

Step 1: Open Your Webflow Project

  1. Log in to your Webflow account.

  2. Open the project where you want to embed the waitlist widget.

Step 2: Add an Embedded Code Element

  1. In the Webflow Designer, navigate to the page or section where you want the widget to appear.

  2. In the left toolbar, click on the Add Element (+) icon.

  3. Scroll down and find the Embed component under the "Components" section.

  4. Drag the Embed component to the desired location on your page.

Step 3: Add the Integration Script to the Embedded Code

To ensure the widget works properly, you need to add the integration script and the iframe for the widget inside the embedded code element.

Example Code Snippet

In the Embed Code editor that appears, add the following code:

<script src="https://app.waitwizard.io/waitlists/<your-waitlist-id>/integration-script"></script>

<iframe id="ww-iframe-<your-waitlist-id>"
        src="https://app.waitwizard.io/embeded/widget/<your-waitlist-id>"
        style="border: none; width: 100%; height: 100%;"></iframe>

Make sure to replace the placeholder your-waitlist-id with your actual waitlist ID, which can be found on the Waitlist Settings page in your account.

Example with Real Data

If your waitlist ID is 66ea8feab82bb68e555b4167, the code would look like this:

<script src="https://app.waitwizard.io/waitlists/66ea8feab82bb68e555b4167/integration-script"></script>

<iframe id="ww-iframe-66ea8feab82bb68e555b4167"
        src="https://app.waitwizard.io/embeded/widget/66ea8feab82bb68e555b4167"
        style="border: none; width: 100%; height: 100%;"></iframe>

Step 4: Adjust the Widget Placement

After embedding the widget, you can customize the dimensions of the widget using the style attribute in the <iframe> code. By default, the widget is set to fill 100% of the width and height of its container.

For example, you might adjust the width and height like this:

<iframe id="ww-iframe-<your-widget-id>"
        src="https://app.waitwizard.io/embeded/widget/<your-widget-id>"
        style="border: none; width: 500px; height: 600px;"></iframe>

You can modify the width and height values as needed based on the layout and design of your Webflow page.

Step 5: Save and Publish

  1. Once you've added the code, click Save & Close in the Embed Code editor.

  2. Publish your Webflow site to see the waitlist widget live on the published site.

Important Reminder:

Since the widget won't be visible in the Webflow Editor, you must publish your site to see it in action. Check the published version of your website to ensure the widget is functioning correctly.

Final Notes

  • Ensure that the code you use is specific to your waitlist, replacing the example waitlist ID with the one found in your Waitlist Settings.

  • The script and iframe must be included together for the widget to work properly.

  • Test the widget after publishing to make sure it is displaying correctly on your site.

With these steps, your waitlist widget should now be fully integrated into your Webflow site, allowing users to register directly from the page.

PreviousHTMLNextWordpress

Last updated