Integra tus experiencias o la página del proveedor
¿Cuándo usar cada uno?
- Web Component (recomendado): se integra en el DOM, más ligero, responsive, mejor para SEO.
- Iframe: útil si tu CMS es limitado o quieres aislar totalmente la integración.
Web Component — 1 experiencia
Script: `<script src="https://holaolas.app/embed/holaolas-booking.js"></script>`
Etiqueta:
```html
<holaolas-booking
experience-id="EXPERIENCE_ID"
lang="es"
return-url="https://tu-sitio.com/gracias"
></holaolas-booking>
```
Atributos principales: `experience-id` (obligatorio), `lang` (`fr|en|es`), opciones `show-*`, `return-url` (opcional).
Iframe — 1 experiencia
URL: `https://holaolas.app/es/booking/EXPERIENCE_ID?embed=1`
Código:
```html
<iframe
src="https://holaolas.app/es/booking/EXPERIENCE_ID?embed=1"
width="100%"
height="900"
frameborder="0"
style="border: none; display: block;"
></iframe>
```
`embed=1` oculta header/footer y sigue siendo responsive.
Web Component — página del proveedor
Script: `<script src="https://holaolas.app/embed/holaolas-provider.js"></script>`
Etiqueta:
```html
<holaolas-provider
provider-slug="TU_PROVIDER"
lang="es"
experiences="all" <!-- o id1,id2 -->
hide-logo="false"
hide-name="false"
hide-subtitle="false"
hide-intro="false"
hide-contact="false"
></holaolas-provider>
```
Atributos principales: `provider-slug` (obligatorio), `experiences` (`all` o lista de IDs), `lang`, opciones `hide-*`, `label-experience`.
Iframe — página del proveedor
URL: `https://holaolas.app/es/p/PROVIDER_SLUG?embed=1` (parámetros: `hideLogo`, `hideName`, `hideSubtitle`, `hideIntro`, `hideContact`, `label`, `experiences=id1,id2`)
Código:
```html
<iframe
src="https://holaolas.app/es/p/PROVIDER_SLUG?embed=1&experiences=all"
width="100%"
height="900"
frameborder="0"
style="border: none; display: block;"
title="Proveedor HolaOlas"
></iframe>
```
Buenas prácticas
- Prueba en una página de preproducción antes de poner en producción.
- Usa `return-url` si quieres devolver al usuario a tu sitio después del pago.
- Para filtrar experiencias del proveedor: usa `experiences=id1,id2` (Web Component) o el parámetro `experiences` en la iframe.
- Mantén ancho 100% y altura suficiente (>=900px) para evitar scroll interno.
