WordPress plugin, natív foglalási widget

Hivatalos Bookinda WordPress plugin: Gutenberg blokk, Elementor widget, Classic editor gomb, lightbox mód, GA4/Meta Pixel tracking

WordPress plugin

A Bookinda hivatalos WordPress plugin a foglalási widget natív integrálásához. Pár kattintással telepíthető, és négyféle módon helyezhető el a vendég-oldalon.

Mit kapsz

A pluginnal négy beszúrási mód érhető el ugyanahhoz a Bookinda foglalási élményhez:

1. Gutenberg blokk

A WordPress 5.0+ blokk-szerkesztőben a "Bookinda Foglalás" blokk a "Widgetek" kategóriában. Sidebar InspectorControls panel minden paraméterhez, slug, mód, szín, magasság, előválasztások.

2. Elementor widget

Drag-and-drop widget az Elementor widget listából. A sidebar-on három fül, tartalom, előválasztás, stílus. Az Elementor live preview-ban is működik.

3. Classic editor (TinyMCE) gomb

A klasszikus szerkesztő toolbar-on egy Bookinda gomb. Kattintásra párbeszédpanel nyílik, mód, gomb felirat, szín, magasság beállításával, és a megfelelő shortcode-ot automatikusan beilleszti.

4. Shortcode

Bárhol beilleszthető [bookinda] vagy [bookinda mode="lightbox"] shortcode. Custom HTML blokkban, theme template-ben, widget-ben, post tartalomban.

Letöltés és telepítés

A plugin a bookinda.hu/integracio/wordpress oldalról tölthető le ingyenesen.

Telepítés három lépésben

  1. Plugin feltöltése, WP-admin → Bővítmények → Új bővítmény hozzáadása → Bővítmény feltöltése → válaszd a letöltött zipet, Aktiváld.
  2. Tenant slug beállítása, Beállítások → Bookinda → add meg a tenant slug-odat (az URL-ben szerepel, pl. tomamed.bookinda.hu esetén a slug tomamed).
  3. Beillesztés az oldalra, használd a Gutenberg blokkot, az Elementor widgetet, a Classic editor gombot, vagy a shortcode-ot.

Megjelenítési módok

Lightbox (ajánlott)

Egy gomb jelenik meg az oldalon, kattintásra fullscreen modal nyílik a teljes foglalási élménnyel. Mobilon natural-méretű, sticky Tovább gombbal. ESC, X gomb, backdrop kattintás zárja.

Mire jó: menübe rakható "Időpontfoglalás" gomb, hero szekció call-to-action, footer akcióblokk. Bárhova illeszthető, a host oldal layout-jától független.

Inline

Az iframe közvetlenül a tartalomban, auto-resize. A host oldal scrollozza.

Mire jó: dedikált foglalási oldal (/foglalas, /idopont-foglalas), ahol az iframe az oldal fő tartalma.

Paraméterek

A plugin minden beszúrási módban ugyanazokat a paramétereket támogatja:

ParaméterMire jóPélda
slugTenant slug felülírás (üres = globális default)tomamed
modeinline (default) vagy lightboxlightbox
button_labelLightbox gomb felirataFoglaljon időpontot!
primary_colorHex szín#1f3b3f
border_radiusSarok lekerekítés (px)16
heightInline magasság800px
servicesElőválasztott szolgáltatás ID-k (vesszővel)svc1,svc2
staffElőválasztott munkatárs IDstaff1
categoryElőválasztott kategóriacat1
promoElőre alkalmazott promóciós kódSUMMER2026
locationElőválasztott helyszín IDloc1

Konverzió tracking

GA4 + Meta Pixel auto-purchase

A Beállítások → Bookinda → Konverzió követés oldalon megadhatod a Google Analytics 4 mérési ID-t (G-XXXXXXXXXX) és/vagy a Meta Pixel ID-t. A plugin automatikusan tüzeli a purchase eseményt a foglalás befejezésekor, a host oldalon már betöltött gtag és fbq objektumon keresztül.

Nem tölt be új tracking scriptet, csak akkor küld eventet, ha az adott pixel már elérhető. Site Kit, Pixel Manager, Google Tag Manager, MonsterInsights pluginekkel kompatibilis.

Host DOM eventek

A widget négy lifecycle eventet broadcast-ol a host oldalra natív DOM CustomEvent-ként:

  • bookinda:complete, sikeres foglalás. e.detail.payload = { bookingId, finalPrice, currency }
  • bookinda:error, hiba a folyamat alatt. e.detail.payload = { message }
  • bookinda:step, step-váltás. e.detail.payload = { step }
  • bookinda:resize, iframe magasság változás. e.detail.payload = { height }

Ezeket bármilyen JS-ből lehallgathatod, Code Snippets pluginban, theme functions.php-ben, Custom HTML blokkban:

document.addEventListener('bookinda:complete', function (e) {
  console.log('Foglalás kész!', e.detail.payload);
  // Pl. saját CRM webhook, redirect, thank-you popup
});

Több helyszín és előválasztás

Helyszín-specifikus oldal

Több helyszínes salon-nál a vendég csak az adott fióktelep naptárát látja, ha megadod a location paramétert:

[bookinda location="loc-id-1"]

Mire jó: minden helyszínnek külön aloldal (/budapest, /debrecen), külön widget-tel.

Szolgáltatás-specifikus oldal

A vendég úgy érkezik a flow-ra, hogy egy szolgáltatás már ki van választva:

[bookinda services="svc-id-1"]

Mire jó: blog-cikk végén ("Hajvágás 6000 Ft, foglalj most"), szolgáltatás-oldal call-to-action.

Promo-kódos belépő

A vendég úgy érkezik, hogy a promóciós kód már alkalmazva van:

[bookinda promo="SUMMER2026" mode="lightbox" button_label="Nyári akció - foglalj!"]

Mire jó: kampány landing page, Black Friday banner, social media link.

Mikor használd

Szcenárió 1, salon weboldal vs. mini-website

Van saját WordPress weboldalad, márka-elemekkel, blog-szekcióval, kapcsolat oldallal. Nem akarod a Bookinda subdomain-re küldeni a vendéget, mert az ott elveszne a brand-élményből. A plugin natívan beilleszti a foglalási widgetet a saját oldaladra, a vendég ott marad végig.

Szcenárió 2, dedikált foglalási oldal

Készítesz egy /idopont-foglalas oldalt, ami csak a foglalásnak van fenntartva. Egy Inline widget tölti ki az oldalt:

[bookinda height="800px"]

Szcenárió 3, navigáció gomb a fejlécben

A WordPress menüben szeretnél egy "Időpontfoglalás" gombot, ami bárhonnan kattintható. A Lightbox mód erre tökéletes, a gomb átkattint és a foglalás megnyílik fullscreen modalban, anélkül hogy elhagyná a vendég a jelenlegi oldalt:

[bookinda mode="lightbox" button_label="Időpontfoglalás"]

Szcenárió 4, szolgáltatás-oldal végén CTA

Minden szolgáltatás-oldalon (/hajvagas, /manikur) a végén egy előválasztott gomb. A vendég kattint, és az adott szolgáltatás már ki van választva, csak a dátum-időt kell megadnia:

[bookinda mode="lightbox" services="haircut-svc-id" button_label="Foglalj most"]

Szcenárió 5, kampány landing page

Black Friday kampány külön landing-en. A promo kód automatikusan alkalmazva, a vendég azonnal a kedvezményes ár-ral lát mindent:

[bookinda mode="lightbox" promo="BLACKFRIDAY30" primary_color="#d97706"]

Szcenárió 6, GA4 e-commerce tracking

A foglalás befejezésekor automatikus purchase esemény a Google Analytics 4-ben, transaction_id-val, érték-kel. Mérheted a foglalási konverziót, ROAS-t Facebook Ads kampányoknál, retargeting auditoriának építheted a foglalókat.

Tippek

  • Lightbox a default ajánlott mód, mobil élmény jobb, és bárhova illeszthető.
  • A globális alapértékek (slug, szín) a settings-ben állíthatók, így nem kell minden shortcode-ban újra megadni.
  • Az iframe közvetlenül a Bookinda fiókoddal beszél, így minden foglalás a kezelőfelületeden landol (calendar, customers, riportok).
  • Custom DOM eventek a host oldalon működnek, akár Google Tag Manager trigger-ként is használhatók (CustomEvent listener → GTM event).
  • Több wordpress oldalad lehet ugyanahhoz a Bookinda fiókhoz, mindegyikbe ugyanazt a plugint telepítheted, ugyanazzal a slug-gal.
  • A plugin frissítések: töltsd le a friss zipet a marketing oldalról, töröld a régit a wp-adminban, telepítsd újra. A beállítások megmaradnak.

Mit nem csinál

  • Nem helyettesíti a Bookinda fiókodat. A plugin csak beillesztés, a foglalás-kezelést, ügyfél-adatokat, beállításokat a Bookinda kezelőfelületen kell elvégezned.
  • Nem tárol foglalási adatot a WordPress oldalon. Minden adat a Bookinda szerveren marad.
  • Nem küld új tracking scriptet. Csak a host oldalon már betöltött gtag/fbq objektumot használja.

Kapcsolódó cikkek

#wordpress#plugin#gutenberg#elementor#widget#embed#beágyazás#shortcode#lightbox#ga4#meta pixel
💬

Van kérdésed? Kérdezd az AI asszisztenst

A Bookinda AI ismeri az egész tudástárat, és másodperceken belül válaszol.

B

Bookinda AI Asszisztens

Kérdezz bármit a funkciókról, beállításokról, integrációkról.

Szia! Bookinda asszisztens vagyok. Tudok válaszolni funkciókkal, számlázással, integrációkkal kapcsolatos kérdésekre. Miben segíthetek?

Még mindig segítségre van szükséged?

Lépj kapcsolatba az ügyfélszolgálatunkkal.

Kapcsolatfelvétel