WordPress integrációv1.1.2

Bookinda WordPress plugin

Hivatalos plugin a Bookinda online foglalási widget natív integrálásához. Shortcode, Gutenberg blokk, Elementor widget, Classic editor gomb. Lightbox mobil élménnyel és automatikus konverziós tracking-gel.

Plugin letöltése (27 KB)Telepítési útmutató

Verzió 1.1.2. WordPress 5.8+, PHP 7.4+. GPLv2 licensz. Ingyenes.

Mit kapsz

Egy WordPress plugin, négy beszúrási mód, hibrid (iframe-alapú) megjelenítés. Bármilyen WordPress site-ra rákerülhet pár kattintással.

Gutenberg blokk

Natív "Bookinda Foglalás" blokk a blokk-szerkesztőben, sidebar InspectorControls-szal. Slug, mód, szín, magasság, előválasztott szolgáltatások egy panelen.

Elementor widget

Drag-and-drop a widget listából. Minden paraméter a sidebar-on: tartalom, előválasztás, stílus. Az Elementor live preview-ban is működik.

Shortcode és Classic editor

[bookinda] vagy [bookinda mode="lightbox"] bárhol. A Classic editor toolbar-on Bookinda gomb, dialógusból insertálható.

Lightbox mód

Gombra kattintva fullscreen modal nyílik a teljes foglalási élménnyel. Mobilon natural-élmény, sticky Tovább gomb, ESC zár.

Host DOM eventek

bookinda:complete, bookinda:error, bookinda:step, bookinda:resize eventek a host oldalon. Hallgasd document.addEventListener-rel egy script blokkból.

GA4 és Meta Pixel auto-track

Add meg a mérési ID-t a settings oldalon, és a plugin automatikusan tüzeli a purchase eseményt a foglalás befejezésekor. Site Kit és Pixel Manager kompatibilis.

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

Pár perc és kész. WordPress 5.8+ és PHP 7.4+ kell, ez gyakorlatilag minden mai WP installáción megvan.

  1. 1

    Plugin feltöltése

    A WordPress admin felületen menj a Bővítmények → Új bővítmény hozzáadása oldalra, kattints a Bővítmény feltöltése gombra, válaszd ki a letöltött zip fájlt, majd Aktiváld.

    Még nincs zip? Töltsd le itt.

  2. 2

    Tenant slug beállítása

    Menj a Beállítások → Bookinda oldalra. Add meg a tenant slug-ot, ami a Bookinda fiókod azonosítója a URL-ben szerepel: https://tenant-slug.bookinda.hu. Opcionálisan állítsd be az elsődleges színt és a lightbox gomb feliratot.

  3. 3

    Beillesztés az oldalra

    Most már bárhol elérhető: a Gutenberg blokk-szerkesztőben keresd a "Bookinda Foglalás" blokkot, Elementorban a widget listából húzd be, Classic editorban használd a Bookinda toolbar gombot, vagy írd be a [bookinda mode="lightbox"] shortcode-ot.

Melyiket válaszd: inline vagy lightbox?

Mindkettő ugyanazt a foglalási élményt adja, csak a megjelenítés más.

Lightbox (ajánlott)

Gombra kattintva fullscreen modal nyílik a teljes foglalási élménnyel.

  • Mobilon natural-méretű, sticky Tovább gomb
  • A host oldal layout-jától független
  • ESC, X gomb, backdrop kattintás zárja
  • Bárhova illeszthető, akár menübe is
[bookinda mode="lightbox" button_label="Időpontfoglalás"]

Inline

Az iframe közvetlenül a tartalomban, auto-resize.

  • Dedikált foglalási oldalra ideális
  • Magasság szabadon állítható (px, vh, %)
  • A host oldal scrollozza
  • Konverzió mérése a host oldalon működik
[bookinda height="800px"]

Konverzió tracking és host events

A widget kommunikál a host oldallal. Minden lifecycle event natív DOM CustomEvent-ként eléri a host oldalt, plusz a GA4 és Meta Pixel automatikusan kap purchase eventet.

DOM eventek

EseményMikore.detail.payload
bookinda:completeSikeres foglalás{ bookingId, finalPrice, currency }
bookinda:errorHiba a folyamat alatt{ message }
bookinda:stepStep-váltás{ step }
bookinda:resizeIframe magasság változás{ height }

Példa: saját JS hook a foglalás után

<script>
document.addEventListener('bookinda:complete', function (e) {
  const { bookingId, finalPrice, currency } = e.detail.payload || {};
  console.log('Sikeres foglalás!', bookingId, finalPrice, currency);
  // Pl. saját CRM webhook, redirect, thank-you popup, stb.
});
</script>

Helyezd el a kódot egy Code Snippets pluginban, a theme functions.php-ben, vagy egy Custom HTML blokkban.

Gyakori kérdések

Ingyenes a plugin?
Igen. Maga a plugin teljesen ingyenes, GPLv2 licensszel. Bookinda fiók kell hozzá (a foglalási rendszer használatához), de a plugin telepítése és karbantartása nem jár külön költséggel.
Hogyan tudom megnézni a tenant slug-omat?
A Bookinda kezelőfelületen a URL-ben szerepel: https://tenant-slug.bookinda.hu/manager/calendar. A vastagon szedett rész a slug-od.
Több helyszínem van. Lehet helyszínenként külön oldalon külön widget?
Igen. A location paraméterrel előválaszthatsz egy helyszínt: [bookinda location="loc-id"]. A vendég csak az adott helyszín naptárát fogja látni.
Lehet egy adott szolgáltatást vagy munkatársat előre kiválasztani?
Igen. services, staff, category, promo paraméterekkel. A vendég úgy érkezik a foglalási flow-ra, hogy ezek már ki vannak választva.
Beleavatkozik a meglévő tracking pluginjeimbe?
Nem. A plugin csak akkor tüzel GA4 vagy Meta eventet, ha a host oldalon már be van töltve a gtag illetve fbq objektum. Nem tölt be új tracking scriptet, és csak a foglalás befejezésekor küld eventet.
Iframe-mentes natív rendert is támogat?
Az 1.1.0 verzió iframe-alapú. A vendég ugyanazt a Bookinda foglalási élményt látja, mint a {tenant}.bookinda.hu standalone oldalon. Tervezzük a teljesen natív (shadow DOM-os) változatot is a későbbi verziókhoz.
Mi van, ha frissítés érkezik?
Töltsd le a friss zipet erről az oldalról, töröld a régi plugint a wp-adminban, telepítsd újra a frisset. A beállítások (slug, szín, tracking ID) megmaradnak. Auto-update WordPress.org-on keresztül a későbbi verziókban tervezett.

Telepítsd most

Egy zip, három lépés. A vendégek pár percen belül foglalhatnak a saját weboldaladon.

Plugin letöltéseÖsszes integráció

Verzió 1.1.2. GPLv2 licensz. WordPress 5.8+, PHP 7.4+.