Steps

1. Click the "Add" bubble on the left side, navigate to "Embed", and choose "Embed a Site"

2. Place the block somewhere in your page, and click "Enter Website Address" and choose "Code"

3. In the input box, paste the script found below, replacing api_key, waitlist_link with your desired values:

   <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'},
       'platform': 'wix'
   }">
   </script>
   

4. Resize the element to your liking!

5. (Optional) Use the available classes found here to style the component.

6. Turn on Wix's "Dev Mode"

7. Navigate to masterPage.js and paste the following script:

   import wixLocation from 'wix-location'
   
   $w.onReady(function () {
   	// Write your code here
   	$w("#html1").onMessage( (event) => {
   		let data = event.data;
   		wixLocation.to(data);
   	} );
   	$w("#html1").postMessage(wixLocation.query.ref_id);
   });
   

Video Tutorial

https://www.loom.com/share/7217fba29aa34e4b94a5aa2de760fac4

Text changes

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>

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