Olo allows you use waitlist and reservation forms and embed them into your website to help meet your branding needs. The script information included in this article adds a Wisely object to the window which provides functions for displaying and hiding your forms.
Base JS Script
First, add the Wisely package to your site:
<script id="wisely-embedded-reservations" src="https://static.wisely.io/form/embed.js"></script>
- This will download the Wisely script which automatically scaffolds the DOM elements and CSS needed for displaying reservation and waitlist forms on your site.
- The script adds a Wisely object to the window which provides functions for displaying and hiding your forms
Integration
You can programmatically show and hide reservation and waitlist forms from your site by calling the methods available on the Wisely object. The following methods are available:
Wisely.reserveAtLocation(locationSlug, formId?), Wisely.openWaitlistForLocation(locationSlug, formId?),
Wisely.hideDialog()
Each opening method requires a location slug be passed as the first argument, and can accept an optional second argument for a specific form ID. If a form ID is not present, the default reservation or waitlist form is displayed.
You can call `hideDialog` to programmatically hide the modal. Note also that the modal includes a dismiss button and event listeners for if the user clicks the backdrop or presses the escape key while not within the form which will dismiss the modal.
Using the Wisely script with a button
A typical use case would be to call the Wisely object from a button on your site. The button may be for reserving a table at a location, or joining a waitlist, but in both cases the implementation is the same. Create your button in markup and add an `onclick` handler that will call the appropriate method with the necessary arguments.
Example Button Snippets:
<!-- Example of location specific button -->
<button onclick="window.Wisely.reserveAtLocation('prima-heights-aa')">
Reserve a table at Prima Heights
</button>
<!-- Example of special reservation form button -->
<button onclick="window.Wisely.reserveAtLocation('prima-heights-aa', 'memorial-day-prima')">
Book a special Memorial Day table!
</button>
<!-- Example of location waitlist -->
<button onclick="window.Wisely.openWaitlistForLocation('prima-heights-aa')">
Join our waitlist
</button>
<!-- Example of special waitlist form -->
<button onclick="window.Wisely.openWaitlistForLocation('prima-heights-aa', 'prima-ball-game')">
Join the Ball Game waitlist
</button>
Locating Your Slugs
After you have created forms using the Wisely web tool, you can locate your slugs by examining the preview URLs. The location slug is distinguishable as the location name within the URL, and the form ID — if present — will be a query parameter with the key `g`.
Here are some examples:
Reservation form with no form ID
https://reservations.getwisely.com/prima-heights-aa
In this example, `prima-heights-aa` is the location slug. There is no form ID present.
To display this form using the embedded Wisely object, we would call `window.Wisely.reserveAtLocation(‘prima-heights-aa’)`
Waitlist form with a form ID
https://reservations.getwisely.com/prima-heights-aa/waitlist?g=prima-ball-game
In this example, `prima-heights-aa` is the location slug. This form has a specific ID which is `prima-ball-game`
To display this form using the embedded Wisely object, we would call `window.Wisely.openWaitlistForLocation(‘prmia-heights-aa’, ‘prima-ball-game’)`