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
- 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.
- Tenant slug beállítása, Beállítások → Bookinda → add meg a tenant slug-odat (az URL-ben szerepel, pl.
tomamed.bookinda.huesetén a slugtomamed). - 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éter | Mire jó | Példa |
|---|---|---|
slug | Tenant slug felülírás (üres = globális default) | tomamed |
mode | inline (default) vagy lightbox | lightbox |
button_label | Lightbox gomb felirata | Foglaljon időpontot! |
primary_color | Hex szín | #1f3b3f |
border_radius | Sarok lekerekítés (px) | 16 |
height | Inline magasság | 800px |
services | Előválasztott szolgáltatás ID-k (vesszővel) | svc1,svc2 |
staff | Előválasztott munkatárs ID | staff1 |
category | Előválasztott kategória | cat1 |
promo | Előre alkalmazott promóciós kód | SUMMER2026 |
location | Előválasztott helyszín ID | loc1 |
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.