Inline Embedding

The inline embed option integrates Waitwhile directly into your webpage, allowing its powerful queuing, appointment scheduling, and event management features to seamlessly blend with your site’s content and functionality. This integration ensures a cohesive experience for users, maintaining their engagement without disrupting their journey through your website.

Inline embedding is ideal for scenarios where you want Waitwhile to be a central feature of your page, such as dedicated booking pages, service pages, or any other area where Waitwhile’s capabilities should be prominently showcased. This approach eliminates perceived barriers and additional steps, potentially enhancing user engagement and conversion rates.

Moreover, inline embedding provides greater control over the placement and styling of the Waitwhile interface, allowing it to merge effortlessly with your site’s design. You can fine-tune its position and surrounding elements to achieve a look and feel that aligns perfectly with your brand identity.

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. Instantiate Waitwhile and render

Instantiate Waitwhile.Embed with your specified options. Then, use this instance to render content to a particular section of the page by applying a selector.

<!-- The div where the Waitwhile widget will be rendered -->
<div id="waitwhile"></div>

<!-- Create an instance of Waitwhile and render it on the page -->
<script>
  const waitwhile = Waitwhile.Embed({
    locationId: 'WAITWHILE_LOCATION_ID',
  });

  waitwhile.render('#waitwhile');
</script>

Demos

Minimal example

This example simply renders Waitwhile in the div with id waitwhile.

See Waitwhile Inline Embed - Demo 1 on CodePen.

Passing data back & forth

In this example, we utilize the onLocalesAvailable event handler to display all available languages in the footer. Each language is made clickable, and we use instance.updateProps() to set the current language inside the component.

See Waitwhile Inline Embed - Demo 2 on CodePen.