> ## Documentation Index > Fetch the complete documentation index at: https://docs.way.co/llms.txt > Use this file to discover all available pages before exploring further. # Build a Hybrid Storefront > Design your own landing and catalog pages with the API, then hand off to the Way script for experience details, availability, and checkout 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: 1. **Catalog page** - built by you. Calls the [listings API](/api-reference/listings/get-listings) to render listing cards, with whatever filtering and layout you want. 2. **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. Fetch the brand's published listings and render them your way: ```bash theme={null} 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](/api-reference/brand-configuration/get-categories) and [vibes](/api-reference/brand-configuration/get-vibes) and pass the selected IDs back as `categoryIds[]` / `vibeIds[]` query parameters. See [Search and Display Listings](/guides/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](/authentication#create-an-api-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 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**: ```html theme={null}

``` Place it inside the ``, 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. How you build the link depends on the listing's `kind`. **Experiences** (`kind: experience`) include a `slug`: ```json theme={null} { "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](/api-reference/bookings/get-bookings) 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](/webhooks/overview) - no polling needed. * Operate on bookings (find, cancel, refund, reschedule) via the API: see [Manage Bookings](/guides/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](/guides/build-a-booking-integration).