# Build your own tour pages

> Render the tours your site sells on your own pages and let the Panion checkout take the booking.

Source: https://www.panion.travel/docs/guides/tour-pages

Use this when you build your own website (Next.js, Astro, WordPress or a static site) and want Panion to handle prices, availability and payment.

**Step 1. Pick a key**

- **In the browser or a static build**: your site's publishable key (`pk_widget_...`), the `data-panion-key` already in your checkout tag. Pass it as `?key=`. It reads only public data for its own site.
- **On your server**: a secret key (`pnn_live_...`) with the `tours:read` scope, sent as `Authorization: Bearer`. Keep it out of the browser.

**Step 2. List your tours**

```sh
curl "https://www.panion.travel/api/v1/tours?key=pk_widget_...&locale=en"
```

**Step 3. Read one tour for its page**

Title, description, photos, inclusions, meeting point, departure times, From price, season and who operates it:

```sh
curl "https://www.panion.travel/api/v1/tours/<tour id>?key=pk_widget_...&locale=nb"
```

**Step 4. Add the Panion checkout**

Use the tour's `checkout.activity_id`. The checkout quotes each date, takes payment and books in the operator's booking system.

```html
<script src="https://www.panion.travel/sdk/core.js" data-panion-key="pk_widget_..." defer></script>
<div data-panion-checkout data-activity-id="<tour id>"></div>
```

> **Show the real operator** When `operator.is_host` is false, someone else runs the tour: say "Operated by" with `operator.name` and keep your own ratings off it.

## Rules, availability and caching

Which price to show, translations, live availability and cache headers are in the [Tours reference](https://www.panion.travel/docs/api/reference/tours).