Copy page

Booking widget

Pages and paths

The widget works on one page, or across one page for each step. A full page load loses nothing, as the order lives in three places:

What	Where	Why
The search, the car type, the level, add-on covers, extras	The address	A link can be shared, and a page cache keeps working.
The customer's details	The tab's sessionStorage	Personal data never goes in an address.
The hold and the booking after Pay	The tab's sessionStorage	The done page and a reload find them.

The address of an order looks like this. Products go by their code and the car type by its slug. The site's own parameters stay as they are:

Code
/book?pickup=…&pickupAt=2027-06-01T10:00&returnAt=2027-06-04T10:00
     &carType=camper-4x4&insurance=PREMIUM&extras=GPS,CHAIR:2&step=extras

url-state="none" keeps the step and the order in memory instead. A reload then starts again.

One page

Without paths, every step is on the page, and the step is in ?step=. The browser's Back button goes one step back. An address with a whole search and no step opens on the car types.

One page for each step

paths names a page for each step:

Code
<mellow-booking
  rental="your-rental"
  auth="pk_live_…"
  paths="car-type=/book insurance=/book/insurance extras=/book/extras driver=/book/details pay=/book/pay done=/book/thanks"
></mellow-booking>

Put the same tag on each of those pages. Each page shows its own step. Next goes to the next step's page.

• A step with no path is on the page of the step before it. The steps before the first path are on the first path's page. Above, the search is thus on /book with the car types.
• A page whose earlier steps are not complete shows the first step that is not. Thus /book/insurance opened with no car type shows the car types, on /book.
• A page that no path names holds every step.

Your own router

By default a move to another page is a full page load. That suits WordPress and plain HTML. A site with its own router, such as Next.js or Nuxt, takes the move itself:

1. Listen for mellow-step and cancel it with preventDefault().
2. Send your router to event.detail.path.
3. Once the router moved, call store.locate(): the store reads the address again.

Code
const booking = document.querySelector("mellow-booking");
const store = await booking.storeReady;
booking.addEventListener("mellow-step", (event) => {
  const next = new URL(event.detail.path, location.href);
  if (next.pathname === location.pathname) return; // the same page: the widget moves itself
  event.preventDefault();
  router.push(next.pathname + next.search).then(() => store.locate());
});

Keep the same <mellow-booking> element in a layout that every booking page shares. The store then stays in memory across the pages, and the address and the storage are only for a reload.