Widget API

Enter the ID of your restaurant to personalize the documentation and examples.

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:

  1. 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/&lt;restaurant_id&gt;/reservations/new"]')

    const widget    = scriptTag.reservationWidget

    

    widget.set('comments', 'Hello World!')

  2. The other way is by listening for the reservation-widget-ready Event and retrieving the reservationWidget property from the event.detail:

    window.addEventListener('reservation-widget-ready', (event) => {

      const detail = event.detail

      const widget = detail.reservationWidget

    

      widget.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:
  • date: change the selected date to the given value
  • time: change the selected timeslot to the given value
  • partySize: change the number of guests to the given value
  • offer: change the active offer to one with ID matching the given value
  • comments: change comments for the reservation to the given value
  • guestName: change the name of the primary guest to the given value
  • guestTelephone: change the telephone number of the primary guest to the given value
  • guestEmail: change the e-mail address of the primary guest to the given value

ReservationPopover Object and Methods

When there is an active popover, there are two ways to get access to the ReservationPopover object so you can call methods on it:

  1. The easiest way is by accessing the reservationPopover property of the <script/> element that is used to load the widget. This is only available if there are active popovers:

    const scriptTag = document.querySelector('script[src*="/restaurants/&lt;restaurant_id&gt;/reservations/new"]')

    const popover   = scriptTag.reservationPopover

    

    popover.close()

  2. The other way is by listening for the reservation-widget-popover-ready Event and retrieving the reservationPopover property from the event.detail:

    window.addEventListener('reservation-widget-popover-ready', (event) => {

      const detail  = event.detail

      const popover = detail.reservationPopover

    

      popover.close()

    })

When you have access to the ReservationPopover instance, you can call the following methods on it:

popover.open() Show the popover if it is currently hidden.
popover.close() Hide the popover if it is currently shown.

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.

event.detail data:
reservation-widget-expanded

Occurs when the widget is expanded, either on load, or because of a user interaction.

event.detail data:

  • width: The width of the widget in pixels (integer)
  • height: The height of the widget in pixels (integer)
  • reservationWidget: An instance of the ReservationWidget object
reservation-widget-collapsed

Occurs when the widget is collapsed, either on load, or because of a user interaction.

event.detail data:

  • width: The width of the widget in pixels (integer)
  • height: The height of the widget in pixels (integer)
  • reservationWidget: An instance of the ReservationWidget object
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.

event.detail data:

  • section: The section the user is navigating to (string)
  • reservationWidget: An instance of the ReservationWidget object
reservation-widget-date-changed

Occurs when the user selects a different date within the widget.

event.detail data:

  • date: The selected date (string in YYYY-MM-DD format)
  • reservationWidget: An instance of the ReservationWidget object
reservation-widget-time-changed

Occurs when the user selects a different time within the widget.

event.detail data:

  • time: The selected time (string in HH:MM format)
  • reservationWidget: An instance of the ReservationWidget object
reservation-widget-party-size-changed

Occurs when the user selects a different number of guests.

event.detail data:

  • partySize: The number of guests for the reservation (integer)
  • reservationWidget: An instance of the ReservationWidget object
reservation-widget-bookable-selected

Occurs when a different bookable (offer) is selected.

event.detail data:

  • id: The ID of the selected offer if available (integer)
  • label: The label of the selected bookable
  • reservationWidget: An instance of the ReservationWidget object
reservation-widget-errored

Occurs when the user fails to make a reservation.

event.detail data:

  • errors: An array of errors that prevent the user from making a reservation
  • reservationWidget: An instance of the ReservationWidget object
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.

event.detail data:

  • reservation: An object that contains basic information about the created reservation:
    • id: The ID of the reservation (integer)
    • date: The date of the reservation (string in YYYY-MM-DD format)
    • time: The time of the reservation (string in HH:MM format)
    • partySize: The number of guests in the party (integer)
    • value: The monetary value of the reservation in cents used when deposits are required (integer)
    • status: The status of the reservation (string)
  • reservationWidget: An instance of the ReservationWidget object
reservation-widget-popover-ready

Occurs when a popover is initialized, either on load, or after navigating to a different popover page.

event.detail data:
reservation-widget-popover-opened

Occurs when a popover is opened, usually on load.

event.detail data:

  • width: The width of the popover in pixels (integer)
  • height: The height of the popover in pixels (integer)
  • reservationPopover: An instance of the ReservationPopover object
reservation-widget-popover-closed

Occurs when a popover is opened, either because.

event.detail data:

  • width: The width of the popover in pixels after it's been closed (integer - should be 0)
  • height: The height of the popover in pixels after it's been closed (integer - should be 0)
  • reservationPopover: An instance of the ReservationPopover object
reservation-widget-popover-navigated

Occurs when the user navigates to a different page within a popover. This only applies when there are multiple active popovers at the same time.

event.detail data:

  • page: The name of the page the user is navigating to (string)
  • reservationPopover: An instance of the ReservationPopover object
reservation-widget-popover-anchored

Occurs when the user clicks on a Call-to-Action button in a popover that is meant to trigger an action in the widget itself (for instance, select an offer).

event.detail data:
reservation-widget-popover-finished

Occurs when the user closes a popover, either by closing it, or by navigating away to an external link, either in the description of the popover, or on its Call-to-Action button.

event.detail data:

  • page: The name of the page the user is navigating to (string)
  • reservationPopover: An instance of the ReservationPopover object

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:[email protected]" id="account_email">[email protected]</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}`;

});

Event Log of Demo Widget