<div id="root"></div>
<style>
.container--waitlistapi {margin: 0 auto;}
.input--waitlistapi {padding: 10px !important; margin: 10px 0 !important;}
</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}',
'joinWaitlistHeading': 'Join the Waitlist',
'checkStatusHeading': 'Check Status',
'config': {'targetElementId': 'root'}}">
</script>
https://www.loom.com/share/f079162e51494b7ba1c779e900678eba
Want to change the text of your widget? Use these optional parameters to do so (the default values are shown):
<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>
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