Skip to content

Instantly share code, notes, and snippets.

@Ryan-Ouyang
Last active December 11, 2020 21:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Ryan-Ouyang/5ad741a39b9dd556ddff37a6222fb8d4 to your computer and use it in GitHub Desktop.
Save Ryan-Ouyang/5ad741a39b9dd556ddff37a6222fb8d4 to your computer and use it in GitHub Desktop.
Tutorial to implement WaitlistAPI HTML Embed in Wix

Tutorial to implement WaitlistAPI HTML Embed in Wix

Video demo:

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

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-wix.js" 
        id="Waitlist-API-Script" 
        data-config="{'name': 'w1', 
		     'api_key': '{YOUR API KEY}', 
                     'waitlist_link': '{YOUR WAITLIST LINK}',
                     'config': {'targetElementId': 'root'}
                     }">
</script>
  1. Resize the element to your liking!

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

  3. Turn on Wix's "Dev Mode"

  4. 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);
});

Tutorials for other sites:

https://gist.github.com/Ryan-Ouyang/3727a28efe47c0a984b8de111aadffe4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment