Booking embed

A site that isn’t built on the API, or isn’t built on it yet, can still take bookings on its own pages. Add one script with the site’s publishable key, and mark a button with a trip’s slug. The button opens a dialog over the page with the trip’s dates, live price and checkout, and the booking it ends in. The traveller never leaves the page.

The dialog is tourpingo’s own booking flow in a frame: the same calendar, quote, checkout and booking page as the seller’s tourpingo site, in English or Arabic, right to left in Arabic, and checked for accessibility.

Before you start

The embed shows only on the sites the key allows. In the portal, under API keys, Website keys, add each site’s address (https:// and the host, with no path), the same list a browser’s calls are checked against (keys). Until a site is listed, browsers refuse to show the dialog’s frame on it (Content-Security-Policy: frame-ancestors).

The embed is for a seller’s own site, so a marketplace’s key opens nothing.

Add it

Add the script once, anywhere on the page, with the key:

<script src="https://tourpingo.stg.vacationpackagesoman.com/embed.js" data-key="tp_pk_…" async></script>

Then mark any button or link with the trip’s slug, from GET /v1/public/products (listing trips):

<button type="button" data-tourpingo-trip="wadi-shab-and-wadi-tiwi-safari">Book now</button>

A link works too, and keeps working where the script hasn’t loaded:

<a href="https://your-site.example/tours/wadi-shab" data-tourpingo-trip="wadi-shab-and-wadi-tiwi-safari">Book now</a>

Choose what it opens with

Attribute	On	What it does
data-key	the script	The site’s publishable key. Required
data-lang	the script	The language for every button on the page, e.g. ar. Else the page’s own lang
data-tourpingo-trip	a button	The trip’s slug. Required
data-tourpingo-lang	a button	This button’s language, in place of the script’s
data-tourpingo-date	a button	A day to start on, 2026-11-05, when it can be booked. Else the first open day
data-tourpingo-travellers	a button	How many travellers to price for, 1 to 10. Else 2

A language the seller hasn’t published opens in their nearest one, else their default.

What travellers see

• The trip’s title, who runs it and how long it lasts, then its booking box: the option, the date and time, the travellers and rooms, and the price for the group from the quote.
• Booking holds the places and goes on to checkout in the dialog. An option confirmed by the seller goes on to checkout without a hold, and the booking waits for the seller’s answer.
• The booking’s page, after checkout, with its reference and what happens next. The confirmation email links to the page the seller set in the portal for managing bookings, such as one built as in manage a booking.
• The close button or Escape closes the dialog and gives the focus back to the button.

The booking is the seller’s like any other: it is in the portal, its emails go out, and webhooks fire. Its attribution names the page the dialog opened on as the referrer, with the page’s utm_* tags (checkout).

What it doesn’t do

• Asking the seller for a price. A trip priced “ask the seller” (from_price null) needs an enquiry form on your page.
• Searching or listing trips: your page lists them, and each button names one.