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

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

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}`;

});

Event Log of Demo Widget