HTML

This guide walks you through the process of integrating your waitlist widget into your website. The code snippets provided below are just examples, and you should replace them with the actual data specific to your waitlist, which can be found on the Waitlist Settings page.

Step 1: Add the Integration Script to Your Page Header

To ensure the waitlist widget functions correctly, you need to include the provided script in the <head> section of your HTML page. This script initializes the waitlist widget on your site.

Script Tag

Add the following <script> tag to the header section of your HTML file, but replace the example URL with the one specific to your waitlist:

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

Make sure this script is placed within the <head> tag of your HTML document to ensure it loads before the widget is displayed.

Example

<head>
  <!-- Other head elements -->

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

In this example, the waitlist ID (<your-waitlist-id>) should be replaced with the actual ID found on your Waitlist Settings page.

Step 2: Embed the Widget into Your Page

Once the script is added, you need to place the widget in the desired location on your page. This is done by embedding an <iframe> element where the widget will appear. Again, replace the example code with your actual widget details.

Widget Embedding Snippet

Insert the following <iframe> code in the part of your HTML page where you want the waitlist widget to be displayed:

<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>

Replace <your-waitlist-id> with the actual waitlist ID, and ensure the src URL is copied from your Waitlist Settings page.

Customizing the Widget’s Placement

You can adjust the widget’s dimensions by modifying the width and height properties within the style attribute. The current values are set to fill the entire width and height of the container in which the widget is embedded.

Example Placement:

If you want to place the widget in the middle of your webpage, you might add the <iframe> within your <body> section, like this:

<body>
  <!-- Other page content -->

  <section id="waitlist-widget">
    <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>
  </section>
</body>

Notes:

  • The src URL and the id in the <iframe> tag should be replaced with your actual waitlist ID and URL, found in the Waitlist Settings page.

  • Adjust the height and width of the <iframe> as needed based on the design of your website.

Final Steps

After following these two steps, your waitlist widget should be fully functional on your website. Visitors will now be able to register for your waitlist via the embedded widget.

If you encounter any issues during the integration process, ensure the script is properly included in the header and the <iframe> tag is placed in the correct location on your webpage.

Remember to always use the actual code snippets from your Waitlist Settings page, not the examples shown above.

PreviousIntegrationsNextWebflow

Last updated