Skip to main content

How to Implement and Use the New Manage My Booking (MMB) Portal

The Manage My Booking (MMB) portal gives customers a self-service way to manage their bookings

Manage My Booking (MMB) allows customers to

  • change travel dates / tour times,

  • choose a date for an open-dated bookings or multi-date packages,

  • cancel bookings.

📒 NOTE

We are constantly adding new features to the Manage My Booking portal. The features listed here are included in the initial release of the revamped MMB. Stay tuned for more updates.

Preview Manage My Booking

You can explore the Manage My Booking portal using your own apiKey.

Use the following URL structure to access your web checkout's MMB portal:

https://checkin.ventrata.com/{apikey}

📒 NOTE

Replace the {apikey} with your actual API key. If you are not sure where to find it, see Locate API Key for Web Checkout and MMB.

Implement Manage My Booking (MMB)

Like the checkout widget, the portal can appear embedded directly on your page or open in a popup.

Prerequisites:

By default, the widget looks for any element with:

ventrata-manage-my-booking

and renders the portal inside that element (embedded mode).

Embedded Mode

Use embedded mode when you want the full MMB portal to appear directly on your webpage.

Example:

 <div ventrata-manage-my-booking data-config='{}'></div>

Result:

The portal loads inside the <div> and becomes part of the page layout.

Pop-up Mode

If you want the MMB portal to open as a pop-up when a user clicks a button or link, set:

  • popup: true

    or

  • embedded: false

In this case, the element becomes a click target instead of a container, and the portal appear in a pop-up overlay.

Example:

<button ventrata-manage-my-booking data-config='{ "popup": true }'>
  Manage my booking
</button>

Result:

Click the button opens the MMB pop-up.

This is useful for pages where you do not want to allocate space for the full embedded portal—such as headers, footers, or simple Manage my booking buttons.

Open MMB with JavaScript

In addition to using the ventrata-manage-my-booking HTML attribute, the Manage My Booking (MMB) portal can also be opened using JavaScript.

This works in the same way as the checkout window.Ventrata() method, but opens Manage My Booking instead.

  • Open MMB in a pop-up

    window.VentrataManageMyBooking({   
      apiKey: "YOUR_API_KEY",   
      popup: true 
    })

    This immediately opens the MMB portal in a popup.

  • Embed MMB in a specific page location

    window.VentrataManageMyBooking(   
      { apiKey: "YOUR_API_KEY" },
      { targetElement: document.getElementById("my-mmb-element") } 
    )

    This renders the MMB portal directly inside a chosen element on the page.

Direct a Customer to Their Booking

You can direct a customer to a specific booking in the MMB portal by including their booking reference and last name in a URL or JavaScript call. This bypasses the login step and opens the portal with the booking already loaded.

  • Via URL

    Use the following URL structure to open the MMB portal at a specific booking:

    https://checkin.ventrata.com/{CHECKOUT_API_KEY}/en/checkin
      ?checkin[reference]={BOOKING_REFERENCE}
      &checkin[verification]={LASTNAME}

    Replace the placeholders with actual values:

    • CHECKOUT_API_KEY - your checkout API key

    • BOOKING_REFERENCE - the customer's booking reference

    • LASTNAME - the customer's last name

    If the booking has a balance due, the customer will see a button to pay the outstanding amount.

  • Via JavaScript

    You can also pass booking details programmatically using the window.VentrataManageMyBooking() method. This opens the MMB portal and logs the customer in automatically:

    window.VentrataManageMyBooking({
      apiKey: "CHECKOUT_API_KEY",
      popup: true,
      checkin: {
        reference: "BOOKING_REFERENCE",
        verification: "LASTNAME"
      }
    })

    Replace the placeholders with actual values:

    • CHECKOUT_API_KEY - your checkout API key

    • BOOKING_REFERENCE - the customer's booking reference

    • LASTNAME - the customer's last name

Light / Dark Modes

The MMB portal supports light and dark modes.

  • Light is the default.

  • To enable dark mode, insert "defaultTheme": "dark" into the data-config attribute of the checkout script.

Light

Dark

📗 TIP

Learn how to set checkout colours.

Log into MMB

Customers can log in using one of the following methods to access all active and past bookings:

  • E-mail - enter the email address provided at the time of booking. Press the Send verification code button, then enter the 6-digit verification code sent to that email address.

  • Booking reference - enter the booking reference and last name from the booking, then press the Verify button to log in.

Manage My Booking - Log In

MMB Overview

Customers can review and manage their bookings connected to the same address at once:

MMB Elements

#

MMB Elements

Description

1.

User icon

Press to access language setup or log out of your account.

2.

Upcoming Bookings /Past Bookings

Displays all future bookings. / Displays all past bookings.

3.

Individual Bookings

Displays individual bookings the customer has purchased: name of the product, booking reference number, number and type of the tickets, and travel date.

4.

Tag Elements

Displays the booking status if a payment is due or if the booking has been cancelled.

The MMB can also be accessed on a mobile phone:

MMB Mobile View

Booking Detail

Select an individual booking to see more information and access additional booking management options:

Booking Detail

#

Booking Elements

Description

1.

User Icon

Press to access language setup or log out of your account.

2.

Requirements

Complete mandatory actions before entering the attraction.

3.

Booking Management

Modify the booking if allowed.

4.

Add-ons

Select upgrades if available for the booking.

  • Available Upgrades

5.

Your ticket

Access customer tickets once the booking is paid.

  • Download Tickets

  • Resend Confirmation

  • Add to Apple Wallet

  • Add to Google Wallet

6.

Name of the booking and ticket

The name and option purchased.

7.

Booking reference

Unique booking identifier.

8.

Tickets

Number and type of tickets.

9.

Date and Time

Date and time of booking.

10.

Instructions

Information about the meeting point or other necessary instructions.

11.

Redemption

Redemption instructions of the booking.

12.

Your invoice

Payment information.

13.

Download invoice

Press to access the printable invoice.

If a booking is cancelled, the booking detail displays the cancellation timestamp and the refund invoice, if applicable.

Cancellation Timestamp

Invoice / Payment / Refund

Reschedule Booking

The Reschedule Flow allows customers to change the date and tour time of an active booking.

Learn More

Pick a Date on an Open-Dated Booking

For open-date bookings, customers can select a tour date and time after purchase.

Learn More

Manage Multi-Date Booking

Multi-date packages allow customers to select a tour date and time for each include in the package. The time frame is defined by the 'Validity Days' setting.

Learn More

Reschedule Multi-Date Package (Pass Type)

Change the date and time of each include of a multi-date pass.

Learn More

Reschedule Multi-Date Package (Non-Pass Type)

Change the date and time of interdependent includes of a multi-date package.

Learn More

Cancel

Customers can cancel bookings that have not been redeemed yet, are not past the tour date or time and are within the cancellation notice or cutoff period.

Learn More

Pay Unpaid Balance

The Pay Unpaid Balance flow allows customers to settle any outstanding payment.

Learn More

Redeem Reseller Voucher

Customers can select their preferred date and time to redeem a previously purchased reseller voucher.

Learn More

Sign Waivers

Allow customer to review and sign required waivers before their tour using the self-service Manage My Booking (MMB) Portal.

Learn More

Related Articles
Did this answer your question?