Widget API
Embed code
Floating
<script src="https://gotable.app/restaurants/<restaurant_id>/reservations/new.js?layout=floating">
</script>
Inline
<script src="https://gotable.app/restaurants/<restaurant_id>/reservations/new.js?layout=normal">
</script>
Anchors
Use anchors to create links that control the widget.
#reservation_widget_expanded
|
Show the floating widget variant if it is currently collapsed. |
---|---|
#reservation_widget_collapsed
|
Collapse the floating widget variant if it is currently expanded. |
#reservation_widget_offer_<offer_id>
|
Select the offer with the given offer_id in the widget. |
ReservationWidget
Object and Methods
There are two ways to get access to the ReservationWidget
object so you can call methods on it:
-
The easiest way is by accessing the
reservationWidget
property of the<script/>
element that is used to load the widget:const scriptTag = document.querySelector('script[src*="/restaurants/<restaurant_id>/reservations/new"]')const widget = scriptTag.reservationWidgetwidget.set('comments', 'Hello World!') -
The other way is by listening for the
reservation-widget-ready
Event and retrieving thereservationWidget
property from theevent.detail
:window.addEventListener('reservation-widget-ready', (event) => {const detail = event.detailconst widget = detail.reservationWidgetwidget.set('comments', 'Hello World!')})
When you have access to the ReservationWidget
instance, you can call the following methods on it:
widget.expand()
|
Show the floating widget variant if it is currently collapsed. |
---|---|
widget.collapse()
|
Collapse the floating widget variant if it is currently expanded. |
widget.set('<property>', '<value>')
|
Send data to the widget to make choices or pre-fill data. Available properties include:
|
Events
Your website can listen to events to respond to actions taken inside the reservation widget. You could use this to hook into your Analytics solution, pre-fill guest data, or redirect to a custom check-out page after a guest finishes a booking.
reservation-widget-ready
|
Occurs when the widget is fully loaded and ready to be interacted with.
|
---|---|
reservation-widget-expanded
|
Occurs when the widget is expanded, either on load, or because of a user interaction.
|
reservation-widget-collapsed
|
Occurs when the widget is collapsed, either on load, or because of a user interaction.
|
reservation-widget-navigated
|
Occurs when the user navigates to a different page within the widget, for instance to the page where they enter the guest information.
|
reservation-widget-date-changed
|
Occurs when the user selects a different date within the widget.
|
reservation-widget-time-changed
|
Occurs when the user selects a different time within the widget.
|
reservation-widget-party-size-changed
|
Occurs when the user selects a different number of guests.
|
reservation-widget-bookable-selected
|
Occurs when a different bookable (offer) is selected.
|
reservation-widget-errored
|
Occurs when the user fails to make a reservation.
|
reservation-widget-reserved
|
Occurs when the user successfully made a reservation. The user will be navigated away from the current page after this event triggers.
|
Example: Analytics
Using the Google Tag API, we can easily track a conversion by listening to the reservation-bookable-reserved
Event:
<!-- Google tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID">
</script>
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
window.addEventListener('reservation-widget-reserved', (event) => {
let detail = event.detail;
gtag('event', 'conversion', {
'send_to': '<AW-CONVERSION_ID/CONVERSION_LABEL>',
'currency': 'EUR',
'value': (detail.value / 100)
});
});
</script>
Example: Pre-fill Guest Data
Using Events in combination with Methods allows you to pre-fill guest data with information available on your website:
<div class="account-details">
<h1>Account Details</h1>
<p>Name: <span id="account_name">John Doe</span></p>
<p>E-mail: <a href="mailto:john.doe@example.com" id="account_email">john.doe@example.com</a></p>
<p>Telephone: <a href="tel:+31600000000" id="account_telephone">06 00 00 00 00</a></p>
</div>
<script type="text/javascript">
window.addEventListener('reservation-widget-ready', (event) => {
let detail = event.detail
let widget = detail.reservationWidget
widget.set('guestName', document.getElementById('account_name').innerText)
widget.set('guestEmail', document.getElementById('account_email').innerText)
widget.set('guestTelephone', document.getElementById('account_telephone').innerText)
})
</script>
<div class="reservation-widget">
<h2>Reservation Widget</h2>
<script src="https://gotable.app/restaurants/<restaurant_id>/reservations/new.js?layout=normal"></script>
</div>
Example: Custom Check-Out Page
Using the reservation-widget-reserved
Event allows you to redirect the user to a page before our widget gets the chance to do so. Use this in combination with our REST API to build your own custom check-out page.
window.addEventListener('reservation-widget-reserved', (event) => {
let detail = event.detail;
let reservation = detail.reservation;
let urlParams = [
`reservation_id=${reservation.id}`,
`date=${reservation.date}`,
`time=${reservation.time}`,
`partySize=${reservation.partySize}`
].join('&');
window.location.href = `/thank-you?${urlParams}`;
});