Wordpress

This guide explains how to integrate your waitlist widget into a WordPress page or post using a custom HTML block. 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.

Step 1: Open Your WordPress Dashboard

1. Log in to your WordPress dashboard.

2. Navigate to the page or post where you want to embed the waitlist widget, or create a new page/post.

Step 2: Add a Custom HTML Block

1. Once you’re in the editor, click the plus (+) icon to add a new block.

2. Search for the Custom HTML block.

3. Select the Custom HTML block and add it to the location where you want the widget to appear.

Step 3: Add the Integration Script and iFrame Code

To ensure the waitlist widget functions properly, you need to add both the integration script and the iframe into the Custom HTML block.

Example Code Snippet

In the Custom HTML editor that appears, insert 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 your-waitlist-id with the actual waitlist ID specific to your waitlist, which you can find on your Waitlist Settings page.

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

By default, the widget iframe is set to fill 100% of the width and height of the container where it is placed. You can adjust the dimensions of the widget by editing the style attribute in the <iframe> code.

For example, if you want to customize the width and height of the widget, you might use the following:

<iframe id="ww-iframe-<your-waitlist-id>"
        src="https://app.waitwizard.io/embeded/widget/<your-waitlist-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 page.

Step 5: Preview and Publish

1. After adding the HTML code, click Preview to ensure everything looks correct.

2. If the widget doesn't appear in the editor, don't worry—widgets embedded via custom HTML blocks might not display in the preview within the editor. You’ll need to publish or preview the live page to see it in action.

3. Once you are satisfied, click Publish to make the page or post live.

Important Reminder:

The waitlist widget may not be visible in the WordPress editor. It will only appear on the published page. Make sure to preview or publish the page to verify that the widget is displaying and functioning properly.

Final Notes

• Ensure that you replace the example waitlist ID with the actual one from your Waitlist Settings page.

• The script and iframe code must be included together for the widget to function correctly.

• Once the page is published, test the widget on the live site to ensure it works as expected.

Following these steps, you should now have the waitlist widget successfully integrated into your WordPress site, allowing visitors to register directly from the page.