Build a Hybrid Storefront

A full custom booking integration isn’t always worth the effort. Many Way partners use a hybrid approach instead: they build the landing and catalog pages themselves with the listings API - full control over design, layout, and filtering - and link each listing card to a page on their site running the Way script, which handles the experience details, live availability, and the entire checkout flow. You get a storefront that looks native to your site, without implementing availability, carts, payments, or cancellation flows.

How it works

Two pages on your site:

Catalog page - built by you. Calls the listings API to render listing cards, with whatever filtering and layout you want.
Experience page - a single page hosting the Way script. Every listing links here with a URL fragment identifying the experience; the script renders the details, availability calendar, and checkout for that experience.

A guest browses your catalog, clicks a card, and lands on the experience page already scoped to that experience - from there Way handles everything through payment confirmation.

Build your catalog page with the listings API

Fetch the brand’s published listings and render them your way:

curl "$WAY_API/v3/listings?sortBy=listingOrder&sortDir=ASC" \
  --header "Authorization: Bearer $WAY_API_KEY"

Each item carries what a card needs - title, coverMedia, startingPrice, category, firstAvailableDate - plus the slug you’ll use for the handoff link in step 3. For filter controls, pull the brand’s categories and vibes and pass the selected IDs back as categoryIds[] / vibeIds[] query parameters.See Search and Display Listings for the full filtering, sorting, and pagination options.

Call the API from your server (or at build time), never from the browser - a secret key must not be exposed client side. (If you do want browser calls, use a publishable key, which only works from your approved domains.) Listing data changes rarely, so it caches well; a few minutes of server-side caching keeps the page fast.

Create the experience page with the Way script

Create one page on your site (for example /experiences/book/) and paste in the two-line embed snippet from the Way dashboard under Settings → Developers → Script embed:

<div id="kouto-embed-root" data-brand-id="[Your Brand ID]"></div>
<script src="https://storage.googleapis.com/embed-script.letsway.com/v1-latest/main.js"></script>

Place it inside the <body>, below your site’s header and navigation. On the same dashboard page, add your site’s URL to the allowed domains list - the script only runs on domains you’ve registered there.The script picks up your fonts and styling automatically; colors, logos, and further styling are configured under Settings → Branding in the dashboard.

Link each listing card to the experience page

How you build the link depends on the listing’s kind.Experiences (kind: experience) include a slug:

{
  "id": "d9fa9229-9132-415d-bc04-513062ee3bcd",
  "kind": "experience",
  "title": "Sunset Sailing Tour",
  "slug": "sunset-sailing-tour-a54f004c",
  "startingPrice": 8900,
  "brandCurrency": "USD"
}

Link the card to your experience page with the slug in the #!/e/ URL fragment:

https://www.your-hotel.com/experiences/book/#!/e/sunset-sailing-tour-a54f004c

Resource collections (kind: resource - cabanas, day beds, and other reservable resources) have no slug; use the listing’s resourceGroupCollectionId in the #!/collection/ fragment instead:

https://www.your-hotel.com/experiences/book/#!/collection/56fbaa25-1288-4e9a-be1d-f47543192f3b

Optionally preselect a slot with date, time, and duration (ISO 8601) query parameters inside the fragment:

...#!/collection/56fbaa25-1288-4e9a-be1d-f47543192f3b?date=2026-08-15&time=16:00:00&duration=PT3H

The script reads the fragment and opens that listing’s details page directly. One page serves your whole catalog - no per-listing pages to create in your CMS, and new listings work as soon as they’re published in Way.

What the script handles for you

Everything after the click: the experience details and media gallery, live availability and session selection, price tiers, custom questions, promo and access codes, the cart and payment step, and the confirmation the guest sees afterwards. Bookings made through the script appear in your dashboard and in the bookings API like any other booking, with the page URL stored as the booking’s source for attribution.

Going further

Notify your systems of new bookings with webhooks - no polling needed.
Operate on bookings (find, cancel, refund, reschedule) via the API: see Manage Bookings.
If you later outgrow the script and want to own checkout end to end, the catalog work carries over - continue with Build a Booking Integration.

​How it works

​What the script handles for you

​Going further

How it works

What the script handles for you

Going further