WaitlistAPI HTML Embed Tutorials

WaitlistHTMLEmbedTutorial.md

Tutorials to implement WaitlistAPI HTML Embed

Wix:

Video: https://www.loom.com/share/7217fba29aa34e4b94a5aa2de760fac4
Steps: https://gist.github.com/Ryan-Ouyang/5ad741a39b9dd556ddff37a6222fb8d4

Squarespace:

Video: https://www.loom.com/share/81240d9950244308943c1953ad9ef791

Webflow:

Video: https://www.loom.com/share/92290bd669d84809b69d392898ffde6b

Weebly:

Video: https://www.loom.com/share/f079162e51494b7ba1c779e900678eba
Embed Code: https://gist.github.com/Ryan-Ouyang/8cd81624b72c23fd220fcd34185a1003

---

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>

You can also change the text shown on the waitlist by sending in these optional parameters (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>

(Optional) Available CSS classes to style the widget:

.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