Embed your experiences or provider page

• Web Component (recommended): integrates into the DOM, lighter, responsive, better SEO compatibility.
• Iframe: useful if your CMS is limited or you want full isolation.

Script: `<script src="https://holaolas.app/embed/holaolas-booking.js"></script>`

Tag:

```html

<holaolas-booking

experience-id="EXPERIENCE_ID"

lang="en"

return-url="https://your-site.com/success"

></holaolas-booking>

```

Main attributes: `experience-id` (required), `lang` (`fr|en|es`), display options (`show-*`), `return-url` (optional).

URL: `https://holaolas.app/en/booking/EXPERIENCE_ID?embed=1`

Code:

```html

<iframe

src="https://holaolas.app/en/booking/EXPERIENCE_ID?embed=1"

width="100%"

height="900"

frameborder="0"

style="border: none; display: block;"

></iframe>

```

`embed=1` hides header/footer and stays responsive.

Script: `<script src="https://holaolas.app/embed/holaolas-provider.js"></script>`

Tag:

```html

<holaolas-provider

provider-slug="YOUR_PROVIDER"

lang="en"

experiences="all" <!-- or id1,id2 -->

hide-logo="false"

hide-name="false"

hide-subtitle="false"

hide-intro="false"

hide-contact="false"

></holaolas-provider>

```

Main attributes: `provider-slug` (required), `experiences` (`all` or list of IDs), `lang`, `hide-*` options, `label-experience`.

URL: `https://holaolas.app/en/p/PROVIDER_SLUG?embed=1` (params: `hideLogo`, `hideName`, `hideSubtitle`, `hideIntro`, `hideContact`, `label`, `experiences=id1,id2`)

Code:

```html

<iframe

src="https://holaolas.app/en/p/PROVIDER_SLUG?embed=1&experiences=all"

width="100%"

height="900"

frameborder="0"

style="border: none; display: block;"

title="HolaOlas provider"

></iframe>

```

• Test on a staging page before going live.
• Use `return-url` if you want to redirect users back to your site after payment.
• To filter provider experiences: set `experiences=id1,id2` (Web Component) or use the `experiences` query param for iframe.
• Keep width 100% and enough height (>=900px) to avoid internal scrolling.