Intégrer vos expériences ou votre page provider

Quand utiliser quoi ?

Web Component (recommandé) : s’intègre au DOM, plus léger, responsive, meilleure compatibilité SEO.
Iframe : utile si votre CMS est limité ou si vous préférez isoler totalement l’intégration.

Web Component — 1 expérience

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

Balise :

<holaolas-booking
  experience-id="EXPERIENCE_ID"
  lang="fr"
  return-url="https://votre-site.com/success"
></holaolas-booking>
Attributs principaux : `experience-id` (obligatoire), `lang` (`fr|en|es`), options d’affichage (`show-*`), `return-url` (optionnel).

Iframe — 1 expérience

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

Code :

<iframe
  src="https://holaolas.app/fr/booking/EXPERIENCE_ID?embed=1"
  width="100%"
  height="900"
  frameborder="0"
  style="border: none; display: block;"
></iframe>
L’option `embed=1` masque header/footer et reste responsive.

Web Component — page provider (toutes les expériences ou filtrées)

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

Balise :

<holaolas-provider
  provider-slug="VOTRE_PROVIDER"
  lang="fr"
  experiences="all"        <!-- ou id1,id2 -->
  hide-logo="false"
  hide-name="false"
  hide-subtitle="false"
  hide-intro="false"
  hide-contact="false"
></holaolas-provider>
Attributs principaux : `provider-slug` (obligatoire), `experiences` (`all` ou liste d’IDs), `lang`, options `hide-*`, `label-experience`.

Iframe — page provider

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

Code :

<iframe
  src="https://holaolas.app/fr/p/PROVIDER_SLUG?embed=1&experiences=all"
  width="100%"
  height="900"
  frameborder="0"
  style="border: none; display: block;"
  title="Provider HolaOlas"
></iframe>

Bonnes pratiques

Tester sur une page de préproduction avant mise en ligne.
Gérer le `return-url` si vous voulez ramener l’utilisateur sur votre site après paiement.
Pour filtrer les expériences côté provider : passer `experiences=id1,id2` (Web Component) ou paramètre `experiences` dans l’iframe.
Conserver largeur 100% et une hauteur suffisante (>=900px) pour éviter le scroll interne.