Configuring Inline Reservation Widget

The following fields can be added to the inline reservation widget, to change how the reservation widget behaves once the page has loaded:

• First name: Add firstnameto the inline attributes to prepopulate the First name field with the guests first name.
• Last name: Add lastnameto the inline attributes to prepopulate the Last name field with the guests last name.
• Email: Add emailto the inline attributes to prepopulate the Email field with the guests email address.
• Phone: Add phoneto the inline attributes to prepopulate the Phone field with the guests phone number.
• Arrival date: Add arrival-dateto the inline attributes to restrict the calendar dates before a specific date. The date must be in the format yyyy-MM-dd.
• Departure date: Add departure-dateto the inline attributes to restrict the calendar date after a specific date. The date must be in the format yyyy-MM-dd.
• Hotel booking number: Add hotel-booking-numberto the inline attributes to set the hotel booking number that is to be linked to this reservation.

Example

<script async src="https://bookings.tablepath.com/js/dist/widget.min.js"></script>
<tablepath-inline tpiw-id="gobmyd" tpiw-code="adare-manor-reservations" first-name="John" last-name="Smith" email="johnsmith@test.com" phone="+123456789" from="2026-03-01" to="2026-03-03" hotel-booking-number="123456"></tablepath-inline>

Listening for completion of the reservation

If you would like to be notified in code when the reservation is completed within the iframe, please implement the following code:

<script>
    TablePath.on("reservation:completed", function (data) {
        console.log(data.reservationId);
        console.log(data.numberOfGuests);
        console.log(data.dateTimeLocal);
    });
</script>