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.

Az 1.2.0 verziótól a plugin ugyanazt a modern foglalót jeleníti meg, mint a bookinda.hu (képek, bérlet, tagság, részletfizetés, online fizetés, kérdések). Minden új Bookinda-funkció automatikusan megjelenik a weboldaladon, a plugin frissítése nélkül. A régi, keretes megjelenés az engine="iframe" paraméterrel továbbra is elérhető.

Az 1.3.0 verziótól a blokkban és az Elementor-widgetben listából választhatod ki, mit mutasson a foglaló: a szalonod helyszínei, kategóriái, szolgáltatásai, munkatársai, bérletei és tagságai egyből megjelennek, azonosítókat nem kell bemásolni. A blokk-szerkesztőben élő előnézet mutatja a valódi foglalót.

Mit mutasson, és mire szűrjön (1.3.0)

A blokk oldalsávjában (Elementorban a Tartalom fülön):

• Mit mutasson? Teljes foglaló, kiválasztott kategóriák, kiválasztott szolgáltatások, egy szolgáltatás időpontjai, bérletek, tagságok, csoportos órák vagy ajándékutalvány. A kategóriák, a szolgáltatások és a bérletek egyből a szűrt listával indulnak, a "Mit szeretnél foglalni?" lépés kimarad, és a vendég nem lép vissza rá.
• Szűrés: helyszínek és munkatársak. Ha egy helyszínt jelölsz, a helyszínválasztó kimarad, és a foglaló ott indul.
• Címek és szövegek: a fejléc (az üzlet neve, nyelv, bejelentkezés) elrejthető, a címe és az alcíme átírható. A lépések címe és leírása (pl. "Szolgáltatások kiválasztása") egy kapcsolóval elrejthető. Alapból minden látszik, úgy, mint eddig.
• Mentett widget a Bookindából: ha a Bookindában (Beállítások › Widgetek) már beállítottál egy widgetet, az azonosítóját megadva annak a színei és a tartalma jelennek meg.
• Kategóriák és Szolgáltatások (1.4.0): Képes kártyák esetén a vendég először a kategóriák képes kártyái közül választ, utána csak annak a kategóriának a kezeléseit látja. Leírással és képekkel a szolgáltatások a leírásukkal és a referenciaképeikkel jelennek meg, a képek kattintásra nagyban nyílnak. Alapból a Bookindában, a Foglalás lépései oldalon beállított nézet érvényes.

Így a weboldalad minden oldalára más foglaló kerülhet: a Budai üzlet gyantázás-oldalára csak a gyantázás, a bérletek oldalára csak a bérletek.

Shortcode-ban ugyanez:

[bookinda show="categories" categories="KATEGORIA-ID" locations="HELYSZIN-ID" step_titles="hide"]
[bookinda show="packages" header="hide"]
[bookinda show="service" services="SZOLGALTATAS-ID" mode="lightbox" button_label="Konzultációt foglalok"]
[bookinda category_cards="yes" service_photos="yes"]

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. Az oldalsávban listából választod ki, mit mutasson és mire szűrjön, a blokk helyén pedig élő előnézet mutatja a valódi foglalót.

2. Elementor widget

Drag-and-drop widget az Elementor widget listából. A Tartalom fülön ugyanazok a listák és kapcsolók, mint a blokkban (mit mutasson, szűrés, címek és szövegek), az Elementor előnézete a valódi foglalót mutatja.

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). Ha a teljes címet másolod be (https://tomamed.bookinda.hu), a plugin kiolvassa belőle a slugot.
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

A foglaló közvetlenül a tartalomban, a tartalommal együtt nő. Lépésváltáskor a foglaló elejére gördül, nem az oldal tetejére. Mobilon az első érintésre teljes képernyőre nyílik.

Mire jó: dedikált foglalási oldal (/foglalas, /idopont-foglalas), ahol a foglaló 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
view	Kihagyja a "Mit szeretnél foglalni?" lépést: services, packages, memberships, groupClasses, giftVouchers	services
services	Előválasztott szolgáltatás ID-k (vesszővel), a választó lépés is kimarad	svc1,svc2
category	A kategória NEVE: arra a kategóriára ugrik	Arckezelés
package	Bérlet ID: egyenesen a bérlet megvásárlása	pkg1
membership	Tagság ID: egyenesen a tagság megvásárlása	mem1
staff	Előválasztott munkatárs ID	staff1
promo	Előre alkalmazott promóciós kód	SUMMER2026
location	Előválasztott helyszín ID	loc1
show	Mit mutasson: full, categories, services, service, packages, memberships, classes, vouchers	categories
categories	Csak ezek a kategóriák (azonosítók vesszővel, az alkategóriákkal)	cat1,cat2
service_list	Csak ezek a szolgáltatások	svc1,svc2
allow_back	yes: show="service" mellett visszaléphet a listára	yes
staff_list	Csak ezek a munkatársak	staff1,staff2
locations	Csak ezek a helyszínek; egy helyszínnél a helyszínválasztó kimarad	loc1
packages / memberships	Csak ezek a bérletek / tagságok	pkg1,pkg2
header	hide: a fejléc (üzlet neve, nyelv, bejelentkezés) rejtve	hide
title / subtitle	Saját cím és alcím a fejlécben	Foglalj időpontot
step_titles	hide: a lépések címe és leírása rejtve	hide
category_cards	yes: először a kategóriák képes kártyái; no: lista. Üresen a foglalóoldal beállítása	yes
service_photos	yes: a szolgáltatások leírással és referenciaképekkel; no: egyszerű lista	yes
widget	A Bookindában mentett widget azonosítója	w1a2b3c4d5e6
lang	hu vagy en	en
engine	widget (alap) vagy iframe (a régi, keretes megjelenés)	iframe
height	Csak engine="iframe" esetén: a keret magassága	800px

A "Mit szeretnél foglalni?" lépés kihagyása

Ha az üzletednél több foglalási típus is be van kapcsolva (szolgáltatás, bérlet, tagság, csoportos óra, utalvány), a foglaló először megkérdezi, mit szeretne a vendég. Egy adott gombnál ez kihagyható:

[bookinda view="services" mode="lightbox" button_label="Időpontot foglalok"]
[bookinda view="packages" mode="lightbox" button_label="Bérletet veszek"]

Gomb egy konkrét szolgáltatásra, kategóriára, bérletre

[bookinda mode="lightbox" services="SZOLGALTATAS-ID" button_label="Lézeres szőrtelenítés foglalása"]
[bookinda mode="lightbox" category="Arckezelés" button_label="Arckezelések"]
[bookinda mode="lightbox" package="BERLET-ID" button_label="10 alkalmas bérlet"]

Az azonosítókat a Bookindában az Online foglalás → Megosztás / linkek részen találod, a szolgáltatás vagy bérlet saját linkjében.

WPBakery és más oldalépítők

A shortcode bármelyik elembe beilleszthető, ami shortcode-ot jelenít meg: WPBakery-ben a Szövegblokk (Text Block) vagy a Raw HTML elem, Divi-ben a Code modul, Elementorban a Shortcode widget (vagy a saját Bookinda widget).

Hibaelhárítás

• Csak tölt (homokóra), nem jelenik meg a foglaló: ellenőrizd a slugot a Beállítások → Bookinda oldalon. Csak az üzlet azonosítója kell (pl. bioskin). A plugin 1.2.0 verziója a teljes címből is kiolvassa, és a korábban hibásan elmentett értéket is kijavítja.
• Nem jelenik meg semmi, gyorsító bővítmény van (LiteSpeed Cache, WP Rocket): a "JavaScript késleltetése" funkcióból zárd ki a bookinda-widget.js fájlt.
• Google-belépés: a weboldalba épített foglalóban a vendég e-mail címmel lép be. Google-fiókkal a Bookinda saját foglaló oldalán (szalon.bookinda.hu/foglalas) tud belépni.

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

• Online foglalás áttekintés
• Beágyazott widget (általános)
• Több helyszín kezelése
• Promóciós kódok