← Volver a recursos

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.
Recurso | ¡HolaOlas!