@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

1. Include the script.
2. Create an instance of Waitwhile.Embed or Waitwhile.Modal.
3. Render it on the page using instance.render() or show modal using dialog.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.