Script To Paste

<div id="root"></div>
<style>.container--waitlistapi {margin: 0 auto;}</style>
<script 
	src="<https://unpkg.com/waitlistapi/dist/widget.js>" 
	id="Waitlist-API-Script" 
	data-config="{
		'name': 'w1', 
		'api_key': '{YOUR API KEY}', 
	  'waitlist_link': '{YOUR WAITLIST LINK}',
	  'config': {'targetElementId': 'root'}
}">
</script>

Video Tutorial

https://www.loom.com/share/368fd0da7ed2422091aa7ca7ce0a3d7d

Text changes

Want to change the text of your widget? Use these optional parameters to do so (the default values are shown):

Please leave the 'name': 'w1' unchanged!

<div id="root"></div>
<style>.container--waitlistapi {margin: 0 auto;}</style>
<script
	src="<https://unpkg.com/waitlistapi/dist/widget.js>"
	id="Waitlist-API-Script"
	data-config="{
		'name': 'w1',
    'api_key': '{YOUR API KEY}', 
		'waitlist_link': '{YOUR WAITLIST LINK}',
    'config': {'targetElementId': 'root'},

    'joinWaitlistHeading': 'Get early access', 
    'checkStatusHeading': 'Check your status',
    'joinWaitlistButton': 'Join waitlist',
    'checkStatusButton': 'Check status',
    'switchToCheckStatusLabel': 'Signed up before?',
    'switchToCheckStatusLink': 'Check your status',
    'switchToJoinWaitlistLabel': 'Not signed up?',
    'switchToJoinWaitlistLink': 'Join waitlist'
}">
</script>

Available CSS classes to style the widget

Want to style your widget? Use the following CSS properties!

.container--waitlistapi              // outermost div containing the component
    .container--waitlistapi > h1     // main heading
.button--waitlistapi                 // main submit button
.input--waitlistapi                  // input fields
.statusToggleLabel                   // "Signed up before?" label
    .statusToggleLabel > a           // "Check your status" link