v2 widget, natív app-szerű foglalás

A v2-es widget a Bookinda új beágyazási módja. A v1-es változat egy iframe-ben futott a saját weboldaladon: működött, de látszott rajta a "doboz" határa, kicsit "olyan érzés volt mintha külső eszközt töltöttünk volna be". A v2 a saját weboldalad DOM-jába rendel React-tel (Shadow DOM-on belül, így a stílusok izoláltak), tehát natív app-szerű élményt ad: smooth animációk, viewport-share, semmi iframe-keret.

Mikor melyiket használd

A v1 widget változatlanul tovább él, nem szűnik meg.

Egyszerű beágyazás (inline)

A legegyszerűbb verzió: a widget a saját weboldalad egy konténerébe rendel.

<div id="bookinda-widget"></div>
<script src="https://sajatslug.bookinda.hu/embed/v2/bookinda-widget.js"></script>
<script>
  window.BookindaBookingWidget.mount('#bookinda-widget', {
    slug: 'sajatslug'
  });
</script>

A widget alapból Shadow DOM-ba rendel, így a host weboldal CSS-e nem szivárog be (és fordítva sem).

Auto-popup mód (villazoldvolgy-style)

A widget inline kicsiben jelenik meg, és az első kattintásra kinyílik fullscreen overlay-be X bezáró gombbal:

<div id="bookinda-widget" style="min-height: 600px;"></div>
<script src="https://sajatslug.bookinda.hu/embed/v2/bookinda-widget.js"></script>
<script>
  window.BookindaBookingWidget.mount('#bookinda-widget', {
    slug: 'sajatslug',
    autoPopup: true
  });
</script>

Bezárás X-szel, ESC-kel vagy hátteret kattintva. Bezárás után a widget reseteli magát, legközelebb a "Szolgáltatások" lépésnél nyit.

Iframe mód (strict-CSP hosthoz)

Ha a host weboldalad Content-Security-Policy-je blokkolja a külső scripteket (gyakori WordPress + security plugin esetén), iframe-módot használhatsz. A widget v1-szerű iframe-et hoz létre belül:

<div id="bookinda-widget"></div>
<script src="https://sajatslug.bookinda.hu/embed/v2/bookinda-widget.js"></script>
<script>
  window.BookindaBookingWidget.mount('#bookinda-widget', {
    slug: 'sajatslug',
    embedMode: 'iframe'
  });
</script>

Vagy automatikus fallback (auto-detektálja, ha a CSP blokkol és váltáskor iframe-re vált):

window.BookindaBookingWidget.mount('#bookinda-widget', {
  slug: 'sajatslug',
  embedMode: 'auto'
});

Tiszta iframe (még egyszerűbb)

Ha semmi scriptet nem akarsz a host page-en futtatni, egyszerűen ágyazd be a v1-es endpointot iframe-ben — a host CSP-jének csak frame-src https://*.bookinda.hu szabály kell:

<iframe
  src="https://sajatslug.bookinda.hu/embed/sajatslug"
  style="width:100%; height:800px; border:0;"
  allow="payment">
</iframe>

Mount opciók táblázat

Tipikus host CSP

Ha a host CSP-d script-src szigorú, ezt add hozzá:

script-src 'self' 'unsafe-inline' https://*.bookinda.hu;
script-src-elem 'self' 'unsafe-inline' https://*.bookinda.hu;
connect-src 'self' https://api.bookinda.hu;
frame-src 'self' https://*.bookinda.hu https://js.stripe.com;

Ha az IT-d nem akar nyúlni a CSP-hez: használd a tiszta iframe módot vagy a v2 embedMode: 'iframe' opcióját.

Példák — mikor melyik útat válaszd

1. eset: WordPress + Elementor blokk

Adj egy "HTML Custom" blokkot az oldaladra, illeszd be a 3-soros inline snippet-et. A widget natív érzéssel jelenik meg a posztodon belül.

2. eset: villazoldvolgy-szerű "Foglalás most" gomb a posztban

autoPopup: true — a látogató látja a widget kis preview-ját, és az első kattintásra fullscreen-re ugrik, akár a profi szállodás oldalakon.

3. eset: Saját Next.js / React weboldal

Inline mód, dobod be egy <div ref={ref} />-be, useEffect-ben mount-olod. Tiszta SPA-integráció.

4. eset: Strict CSP-s WordPress

A weboldalad már létezik, security plugin szigorú CSP-vel. Te döntesz: meggyőzöd az IT-t hogy bővítse a CSP-t, vagy a tiszta iframe módot használod — egyszerűbb és nem kell admin-munka.

5. eset: Csak Instagram-bio link

Akkor a v2 widget overkill — a sajatslug.bookinda.hu URL-edet posztolod a bio-ban. A v2 widget akkor jön, ha saját weboldal is van.

Tippek

• Inline + Shadow DOM a legbiztosabb default — a host stílus nem kavar bele.
• autoPopup-ot mobile-first oldalakon ajánlott bekapcsolni: kis preview, nagy modal.
• inheritHostStyles csak akkor használd, ha tudatosan akarod, hogy a host CSS-e ráragadjon. Általában rosszabb.
• A v1-et nem kell lecserélned, ha működik. Csak ha kifejezetten natív érzést akarsz.
• CSP-blokk esetén nézd a böngésző konzolt: ha "Refused to load the script" jön, vagy bővítsd a CSP-t, vagy menj iframe-re.