Modal Embedding

The modal embed option presents Waitwhile’s interface as an overlay that appears on top of your existing webpage content. This approach allows users to access Waitwhile’s features without navigating away from their current location on your site, providing a convenient and non-disruptive way to interact with your queuing, appointment, or event management system.

Modal embedding is particularly useful when you want to offer Waitwhile’s functionality as a supplementary feature rather than a primary focus of the page. For example, you might include a “Book Now” or “Join Queue” button anywhere on your site that, when clicked, opens the Waitwhile interface in a modal dialog.

This method has several advantages:

1. Maintains user context: Users can easily return to their previous activity after interacting with Waitwhile, preserving the context of their current page.
2. Flexible access: The modal can be triggered from multiple locations across your site, providing versatile access to Waitwhile’s features.
3. Focused interaction: By dimming the background, the modal focuses the user’s attention on the Waitwhile interface, potentially reducing distractions and improving completion rates.
4. Mobile-friendly: Modals are excellent for mobile-responsive designs, as they adapt easily to different screen sizes without impacting the layout of the underlying page.
5. Easy setup: Modals typically require less modification to your existing website structure, making them quicker and simpler to implement than inline embeddings.

Additionally, modal embeds support smooth transitions and animations, enhancing the overall user experience and adding a polished touch to your site’s interactivity.

Usage

1. Add the script

Place this script just before the closing </head> tag:

<script src="https://cdn.jsdelivr.net/npm/@waitwhile/waitwhile-embed/dist/waitwhile-embed.min.js"></script>

Recommended Versioning

Always use the “Latest Major” version from JsDelivr, like in the example above. We don’t recommend self-hosting the script, as this could lead to version mismatches and cause the script to stop working with new versions of Waitwhile.

2. Create the modal

Instantiate Waitwhile.Modal with your specified options. Then, use this instance to open the dialog from JavaScript.

<button id="btn">Join Waitlist</button>

<script>
  const { dialog } = Waitwhile.Modal({
    locationId: 'WAITWHILE_LOCATION_ID',
  });

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    dialog.show();
  });
</script>

Customizing modal appearance

The default appearance of the modal is determined by the CSS that is automatically injected. You can disable this default styling by setting includeStyles to false.

To customize the modal’s appearance, you can override the default CSS with your own styles. Refer to the includeStyles/default styles section for inspiration and guidance.

Demos

Minimal example

This example renders a “Join Waitlist” button that opens the modal on click.

See Waitwhile Modal Embed - Demo 1 on CodePen.