## URL parameters

Append any combination of these parameters to your booking page URL. Combine them with`&`.

| Parameter    | Values                 | Description                                                                                                                                      |
|--------------|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
| `embed`      | `true` / `false`      | Enables embed mode. Removes outer padding and navigation so the page fits cleanly inside an iframe.                                             |
| `theme`      | `light` / `dark`      | Sets the color theme. Match it to your website's background.                                                                                    |
| `background` | `true` / `false`      | Controls whether the default background is shown. Use `false` when your site already has a colored or gradient background.                       |
| `translucent`| `true` / `false`      | Adds a frosted-glass effect to the booking card.                                                                                               |

## Usage examples

### URL

```
# Basic embed
https://timetuna.com/your-page?embed=true

# Light theme embed with no background
https://timetuna.com/your-page?embed=true&theme=light&background=false

# Dark theme with translucent card
https://timetuna.com/your-page?embed=true&theme=dark&translucent=true
```

## HTML snippet

```
<iframe
  src="https://timetuna.com/your-page?embed=true&theme=light"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none; border-radius: 12px;"
></iframe>
```

### Size recommendations

Minimum 320px wide on mobile, at least 700px tall on desktop so the time picker is not cut off. `border-radius: 12px` matches the rest of TimeTuna's visual design.

## Live examples

See how different parameter combinations look in action.

### Full screen (default)

`timetuna.com/cowboy` — the public booking page without any parameters, full-width.

Cowboy - test ride wants to make sure you meet at the time comfortable for you

# Cowboy - test ride

30 min

### Time zones

- Baker Island (Pacific / BIT) GMT-12
- Niue (Pacific / NUT) GMT-11
- Honolulu (North America / HST) GMT-10
- Marquesas (Pacific / MART) GMT-9:30
- Anchorage (North America / AKST) GMT-9/-8
- Los Angeles (North America / PST) GMT-8/-7
- Denver (North America / MST) GMT-7/-6
- Chicago (North America / CST) GMT-6/-5
- New York (North America / EST) GMT-5/-4
- Santiago (South America / CLT) GMT-4/-3
- St. John's (North America / NST) GMT-3:30/-2:30
- São Paulo (South America / BRT) GMT-3/-2
- South Georgia (Atlantic / GST) GMT-2
- Azores (Atlantic / AZOT) GMT-1/+0
- London (Europe / GMT) GMT+0/+1
- Paris (Europe / CET) GMT+1/+2
- Athens (Europe / EET) GMT+2/+3
- Jerusalem (Asia / IST) GMT+2/+3
- Moscow (Europe / MSK) GMT+3
- Tehran (Asia / IRST) GMT+3:30/+4:30
- Dubai (Asia / GST) GMT+4
- Kabul (Asia / AFT) GMT+4:30
- Karachi (Asia / PKT) GMT+5
- Mumbai (Asia / IST) GMT+5:30
- Kathmandu (Asia / NPT) GMT+5:45
- Dhaka (Asia / BST) GMT+6
- Yangon (Asia / MMT) GMT+6:30
- Bangkok (Asia / ICT) GMT+7
- Shanghai (Asia / CST) GMT+8
- Pyongyang (Asia / KST) GMT+8:30
- Tokyo (Asia / JST) GMT+9
- Adelaide (Australia / ACST) GMT+9:30/+10:30
- Sydney (Australia / AEST) GMT+10/+11
- Lord Howe (Australia / LHST) GMT+10:30/+11
- Noumea (Pacific / NCT) GMT+11
- Auckland (Oceania / NZST) GMT+12/+13
- Nuku'alofa (Pacific / TOT) GMT+13
- Kiritimati (Pacific / LINT) GMT+14

### Light theme full screen

`timetuna.com/cowboy?theme=light` — same page on a light surface.

Cowboy - test ride wants to make sure you meet at the time comfortable for you

### Compact embed

`timetuna.com/cowboy?embed=true` — sidebar-sized, ideal for widget-style placements.

Cowboy - test ride wants to make sure you meet at the time comfortable for you

### Transparent on a light background

`timetuna.com/cowboy?embed=true&background=false&theme=light` — blends into whatever surface you put it on.

Cowboy - test ride wants to make sure you meet at the time comfortable for you

### Transparent on a dark background

`timetuna.com/cowboy?embed=true&background=false&theme=dark`

Cowboy - test ride wants to make sure you meet at the time comfortable for you

## Best practices

- **Use `embed=true`** any time the page lives inside an iframe. The layout removes outer chrome that would otherwise compete with your site.
- **Match the theme** to your site's background, light on light, dark on dark, so the booking card looks intentional.
- **Set `background=false`** when your site already has a colored or gradient background you want to keep visible.
- **Match the theme to your site's `color-scheme`** as well as its colours. Browsers paint an iframe opaque when the two documents disagree, which is the usual cause of a white block behind a transparent embed. See [Embed shows a white background](/content/docs/common-troubleshooting/embed-white-background/index.html).
- **Reserve at least 700px of height** on desktop so guests do not have to scroll inside the iframe to see the next button.
- **Add `border-radius: 12px`** to the iframe to match TimeTuna's rounded corners.

If the embed does not load

Check that your site does not block third-party iframes via a Content Security Policy. See [Embed not loading](/content/docs/common-troubleshooting/embed-not-loading/index.html).