Widget Embed Options: Documentation for Customizing your Waitlist

If you've integrated or embedded a Widget, then you have pasted in code similar to this:

<div id="getWaitlistContainer" data-waitlist_id="71"></div>

Properties

Beyond setting your Waitlist ID, it is possible to use data- attributes to set more properties.

• data-default_state="CHECK" will make your Widget such that the primary action is not "Sign Up", but "Check Status" instead.
• data-signup_email_placeholder_value="abc@example.com" will set the email placeholder field in the Widget to abc@example.com. This syntax allows you to, for example, pass in your user's email dynamically so it's easier for them to sign up.
• data-widget_type can be set to WIDGET_1 or WIDGET_2 or WIDGET_3, which correspond to the full-size, mini and docked widgets respectively as you can see on our demo page. The different widget types are also described in the Widget Types documentation.

For example, putting it all together, you could have:

<div id="getWaitlistContainer" data-waitlist_id="71" data-default_state="CHECK" data-signup_email_placeholder_value="abc@example.com"></div>

Classes

Finally, you can of course also set additional classes (or in React, classNames) as an additional attribute. Referring to the example at the start, to make the widget as wide as possible and set it all to bold, you could write:

<style>
  .myClass {
    font-weight: bold;
    width: 100%;
  }
</style>
<div id="getWaitlistContainer" data-waitlist_id="71" class="myClass"></div>