@waitwhile/waitwhile-embed

This JavaScript widget allows you to seamlessly integrate [Waitwhile](https://waitwhile.com)’s powerful platform for queuing, appointments, and events directly into your website. Whether you choose to embed Waitwhile inline or in a modal, you can now offe
@waitwhile/waitwhile-embed
This JavaScript widget allows you to seamlessly integrate Waitwhile’s powerful platform for queuing, appointments, and events directly into your website. Whether you choose to embed Waitwhile inline or in a modal, you can now offer your customers a streamlined experience for managing their interactions with your business.
By embedding Waitwhile, you can create and manage customer journeys at scale, all from your website. This documentation will walk you through the steps to implement the Waitwhile Embed Widget, enabling you to unlock its full potential in just minutes.
Requirements
Public Waitwhile registration pages.
Usage
- Include the script.
- Create an instance of
Waitwhile.Embed
orWaitwhile.Modal
. - Render it on the page using
instance.render()
or show modal usingdialog.show()
.
Important:
- Always use the "Latest Major" version from JsDelivr.
- Do not self-host the script.
Example: Embed
<!-- The div where the Waitwhile widget will be rendered -->
<div id="waitwhile"></div>
<!-- Include the script -->
<script src="https://cdn.jsdelivr.net/npm/@waitwhile/waitwhile-embed/dist/waitwhile-embed.min.js"></script>
<!-- Create an instance of Waitwhile and render it on the page -->
<script>
const waitwhile = Waitwhile.Embed({
locationId: 'WAITWHILE_LOCATION_ID',
});
waitwhile.render('#waitwhile');
</script>
Example: Modal
<!-- Include the script -->
<script src="https://cdn.jsdelivr.net/npm/@waitwhile/waitwhile-embed/dist/waitwhile-embed.min.js"></script>
<button id="btn">Open Waitwhile</button>
<script>
const { dialog } = Waitwhile.Modal({
locationId: 'WAITWHILE_LOCATION_ID',
});
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
dialog.show();
});
</script>
See the /examples
directory for more examples.
Contribute
We welcome contributions! If you have ideas for new features or spot any bugs, please create an issue.
Feel free to submit pull requests as well.
Deploying a New Version
The following instructions are for users listed as owners of the npm package.
To check ownership, run npm owner ls
.
Build the project:
npm run build
Update the package version (use semver
major
,minor
, orpatch
):npm version [major | minor | patch]
Commit your changes and push them, including the tag:
git push && git push --tags
Publish the new version to npm:
npm publish
Update docs in Waitwhile/waitwhile-embed-docs.