# Megjelenítés a weboldalon

> Megosztási módok, shortcode-ok, Gutenberg-blokkok, beágyazás, csapatoldal, Frontend portál, előre kitöltött URL-ek és UTM-követés.

A foglalási esemény többféleképpen jeleníthető meg: shortcode-dal, blokkal, landing oldallal, megosztható linkkel vagy beágyazott naptárral. Mindegyiket az esemény **Megosztás** gombja alatt éred el.

## A Megosztás ablak

A **Naptárak** oldalon az esemény kártyáján kattints a **Megosztás** gombra. Öt fül közül választhatsz: **Rövidkód**, **Céloldal**, **Hozzáadás a blokkhoz**, **Link létrehozása** és **Beágyazás**.

![A Megosztás ablak a Rövidkód füllel](./kepek/megosztas.webp)

*A Megosztás ablak a Rövidkód füllel* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent-booking)

### Rövidkód

A **Rövidkód** fülön másold ki az esemény shortcode-ját, például `[fluent_booking id="2"]`, és illeszd be egy oldalba vagy bejegyzésbe. Az eseményt szerkesztőből is hozzáadhatod: a blokkszerkesztőben kattints a **+ Blokk hozzáadása** gombra, keress rá a „Shortcode” blokkra, illeszd be a shortcode-ot, és mentsd az oldalt.

![Egy oldalba beillesztett foglalási esemény](./kepek/vendeg-foglalas.webp)

*Egy oldalba beillesztett foglalási esemény* (https://minta-bolt.hu/foglalas/)

A foglalási űrlap ilyen alakban jelenik meg a weboldalon: az esemény adatai balra, a naptár és az időzóna jobbra.

### Céloldal

A **Céloldal** fül egy hivatkozást ad az eseményhez, amelyet elhelyezhetsz az oldaladon vagy bárhol megoszthatsz. A host általános landing oldaláról lásd a [Hostok és naptárak](https://hub.hellowp.io/hu/plugins/fluent-booking-pro/hostok-es-naptarak/) fejezetet.

### Hozzáadás a blokkhoz

A **Hozzáadás a blokkhoz** a FluentBooking blokkot használja a szerkesztőben (lásd lentebb a Gutenberg-blokkoknál).

### Link létrehozása

A **Link létrehozása** fülön testre szabott linket hozhatsz létre paraméterekkel. Az oldal típusa (**Oldaltípus**):

- **Céloldal**: az önálló foglalási oldalra mutató link.
- **Egyéb oldal**: meglévő oldalra mutató link. Az **Oldal kiválasztása** menüből választod ki az oldalt.

Mindkettőnél a **Paraméterek hozzáadása** részben mezőt (**Mező**) és értéket (**Érték**) adhatsz meg, a **+** gombbal újabb sort veszel fel. A kész linket a másolás gombbal viheted el.

### Beágyazás

A **Beágyazás** fülön HTML-kódot találsz, amellyel a naptárat bármely oldalba beágyazhatod:

1. A **Naptárak** oldalon kattints a megosztani kívánt naptár **Megosztás** ikonjára.
2. A felugró ablakban válaszd a **Beágyazás** fület, és másold ki a HTML-kódot.
3. WordPressben adj hozzá egy **Egyedi HTML** blokkot az oldalhoz, illeszd be a kódot, majd az előnézetben ellenőrizd. Nem WordPress oldalnál a saját HTML-szerkesztődbe illeszd be.
4. Mentsd vagy tedd közzé az oldalt.

A teljes host-profilt is beágyazhatod: a **Házigazda beállításai → Naptárbeállítások** oldalon a **Megosztás** ikonra kattintva a **Beágyazás** fülön szintén megtalálod a kódot. A beágyazás működéséhez a tárhelynek támogatnia kell az iframe-beágyazást.

## Shortcode-ok

| Shortcode | Mit jelenít meg |
| --- | --- |
| `[fluent_booking id="123" theme=dark disable_author=yes]` | Egy foglalási esemény. |
| `[fluent_booking_calendar calendar_id="38" event_ids="68, 79" hide_info=true title="" description="" logo=""]` | Egy naptár és eseményei. |
| `[fluent_booking_team event_ids="68, 139" title="" description="" logo_url=""]` | A csapat eseményei. |
| `[fluent_booking_lists title="" filter="show" pagination="show" period="upcoming" per_page=10 no_bookings="No bookings found"]` | A bejelentkezett felhasználó foglalásai. |
| `[fluent_booking_panel]` | A Frontend portál panelje. |

Paraméterek:

- `fluent_booking`: `id` (az esemény azonosítója), `theme` (`light` vagy `dark`), `disable_author` (`yes` esetén elrejti a host adatait).
- `fluent_booking_calendar`: `calendar_id` (a naptár azonosítója), `event_ids` (vesszővel elválasztott eseményazonosítók), `hide_info` (`true` esetén elrejti a naptár adatait), `title`, `description`, `logo`.
- `fluent_booking_team`: `event_ids`, `title`, `description`, `logo_url`.
- `fluent_booking_lists`: `title`, `filter` (`show` vagy `hide`), `pagination`, `period` (például `upcoming`), `per_page` (oldalankénti foglalások száma), `no_bookings` (üzenet, ha nincs foglalás).

### Az azonosítók megkeresése

Az esemény azonosítóját a **Megosztás** ablak **Rövidkód** füle mutatja a shortcode-ban. Az azonosítókat az esemény szerkesztőoldalának címéből is kiolvashatod: az URL-ben a „calendars” utáni első szám a naptár azonosítója, a következő az esemény azonosítója (például `#/calendars/1/slot-settings/1/event-details`).

## Gutenberg-blokkok

A blokkszerkesztőben a **+** gombbal, a „FluentBooking” keresésére négy blokk jelenik meg. A blokkok nevét és beállításainak feliratait itt a szerkesztő angol feliratai szerint írjuk:

- **FluentBooking Calendar**: egy naptár eseményei.
- **FluentBooking Team**: a csapat oldala.
- **FluentBooking Event**: egy esemény.
- **FluentBooking Bookings**: a bejelentkezett vendég foglalásai.

Mentsd és tedd közzé az oldalt, utána az oldalon látod az előnézetet.

![Egy oldalba szúrt Calendar-blokk](./kepek/vendeg-naptar-blokk.webp)

*Egy oldalba szúrt Calendar-blokk* (https://minta-bolt.hu/naptar/)

A blokk a host nevét és az események listáját mutatja, mindegyiknél **Foglalás most** gombbal.

### FluentBooking Calendar

1. Adj hozzá egy címet (**Title**) és rövid leírást (**Description**), amelyek a blokkon látszanak.
2. A jobb oldali **Header Settings** panelen az **Upload Image** gombbal a cím fölé képet tehetsz.
3. A **General Settings** részben válaszd ki a naptárat (**Calendar**), majd jelöld ki, hogy a naptár mely eseményei jelenjenek meg. A **Hide Calendar Info** jelölőnégyzettel elrejtheted a naptár adatait. A hostot a név melletti kereszt ikonnal veheted ki.

### FluentBooking Team

A csapat blokkja az oldalon a csapat tagjait mutatja, hogy a vendég kiválaszthassa a kívánt hostot (lásd lent: Csapatoldal).

### FluentBooking Event

A legördülő menüből választod ki az eseményt, a jobb oldali panelen pedig az alábbiakat állíthatod:

| Beállítás | Mit csinál |
| --- | --- |
| **Select an Event** | Az események listájából választod, a hostokkal együtt megjelenítve. |
| **Date Style** | A dátum alakja: **Square** (alapérték) vagy **Rounded** (kerek). |
| **Avatar Style** | A host képe: **Square** (alapérték) vagy **Rounded**. |
| **Host Info** | A host adatainak megjelenítése (**Show**) vagy elrejtése (**Hide**). |
| **Color Schema** | **System Default**, **Light** vagy **Dark Mode**. |
| **Primary Color** | Az elsődleges szín, márkaszínnel vagy a palettából. Sötét módnál nem érhető el. |

### FluentBooking Bookings

Ez a blokk a vendégeknek szól: a foglalási portál eléréséhez a vendégnek regisztrált felhasználónak kell lennie, és be kell jelentkeznie. Utána minden foglalását látja (közelgő, lezárt, lemondott, függő vagy az összeset).

A blokk beállításai a **General Settings** részben:

- Alapból az összes naptár foglalásait mutatja. Ha csak bizonyos hostokét akarod, vedd le a jelölést, és válaszd ki őket.
- **Default Period**: az alapértelmezett időszak (**All**, **Upcoming**, **Completed**, **Cancelled**, **Pending**).
- **Per Page**: oldalankénti foglalások száma.
- **Show Filter**: a szűrősáv megjelenítése.
- **Show Pagination**: az oldalszámozás megjelenítése.
- **No Booking Message**: üzenet azoknak, akiknek még nincs foglalásuk.

## Csapatoldal a weboldalon

A csapatoldalon a vendég kiválaszthatja, melyik hosttal szeretne találkozót foglalni.

1. Nyisd meg az oldalt, ahová a csapatot el akarod helyezni, és add hozzá a **FluentBooking Team** blokkot.
2. A blokk beállításaiban a **Change Image** gombbal fejlécképet választasz a médiatárból vagy feltöltesz egyet, és módosíthatod a címet és a leírást.
3. A **General** beállításban az **Add New Host** opcióval hostokat adhatsz hozzá, a kereszt ikonnal eltávolíthatod őket.
4. Ha leveszed az **All** jelölést, megjelennek a host további eseményei is, és kiválaszthatod, melyek legyenek aktívak az oldalon.

Blokk nélkül is kirakhatod a csapatoldalt a `[fluent_booking_team event_ids="1,2" title="Csapatunk" description="…" logo_url=""]` shortcode-dal.

![A csapatoldal két hosttal a weboldalon](./kepek/elso-lepesek-csapatoldal.webp)

*A csapatoldal két hosttal a weboldalon* (https://minta-bolt.hu/csapatunk/)

A képen a csapat címe és leírása alatt a hostok kártyái látszanak; a vendég a kártyára kattintva választ hostot, majd időpontot.

## Frontend portál

A Frontend portálon keresztül te és a felhasználóid az admin felület nélkül is megtekinthetitek, kezelhetitek és lemondhatjátok a foglalásokat.

### Bekapcsolás

1. Nyisd meg a **Fluent Booking → Beállítások → Haladó funkciók és bővítmények** oldalt.
2. A **Frontend portál** sorában kattints a **Beállítások** gombra.
3. A jobb oldali panelen jelöld be a **Frontend portál bekapcsolása** jelölőnégyzetet.
4. Válaszd ki, hogyan jelenjen meg a portál (**Shortcode-on / dedikált oldalon keresztül?**):
   - **Megjelenítés önálló Frontend URL-en**: önálló címen, shortcode nélkül. Az **URL slug a frontend panelhez (pl.: projects)** mezőben megadott cím (alapból `my-bookings`) alatt érhető el.
   - **Használj előre meghatározott oldalt shortcode-on keresztül**: egy meglévő oldalon, shortcode-dal. Válaszd ki az oldalt, másold ki a megjelenő shortcode-ot, és illeszd be az oldal szerkesztőjébe, majd mentsd.
5. Kattints a **Beállítások mentése** gombra.

![A Frontend portál beállítása](./kepek/frontend-portal-beallitas.webp)

*A Frontend portál beállítása* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent-booking)

Önálló címnél a portál a felső menüben a **Frontend portál** gombbal is megnyitható.

### Hozzáférés

Csak az adminisztrátorok és a FluentBookingban hostként kijelölt WordPress-felhasználók léphetnek be a portálra, és kezelhetik a foglalásaikat. Bejelentkezés nélkül a portál bejelentkező oldalt mutat.

![A Frontend portál megnyitása után](./kepek/frontend-portal.webp)

*A Frontend portál megnyitása után* (https://minta-bolt.hu/my-bookings/)

Az oldalon a felső menüben ugyanazok a pontok vannak, mint az admin felületen: **Vezérlőpult**, **Naptárak**, **Foglalások**, **Elérhetőség** és **Beállítások**.

## Alapértelmezett adatok átadása az URL-ben

URL-paraméterekkel előre kitölthetsz foglalási mezőket (név, e-mail, dátum, egyéni kérdések, UTM-forrás). Ez személyre szabott meghívóknál, más űrlapokból érkező vendégeknél vagy egy adott időpontra vezetésnél hasznos.

Átadható változók: dátum (`YYYY-MM-DD`), hónap (`YYYY-MM`), meghívott neve, meghívott e-mail-címe, foglalási kérdések, UTM-forrás és bármely foglalási mező.

### Előre kitöltött link készítése

1. A **Naptárak** oldalon kattints az esemény **Megosztás** gombjára.
2. Válaszd a **Link létrehozása** fület.
3. Az **Oldaltípus** értéke legyen **Céloldal**, hogy a link az önálló foglalási oldalra vezessen.
4. A **Paraméterek hozzáadása** részben válaszd ki a kitöltendő mezőt (**Mező**: például dátum, név vagy egy kérdés), és add meg az értéket (**Érték**: például `2026-11-09`).
5. Több adat átadásához kattints a **+** ikonra, és vegyél fel újabb sort.
6. A másolás gombbal másold ki a linket.

A link megnyitásakor a foglalási űrlap előre kitöltve tölt be, a megadott dátum például előre ki van választva a naptárban.

### A link szerkezete kézzel

Egy landing oldal címe így néz ki:

```text
https://pelda.hu/?fluent-booking=calendar&host=kovacs-anna&event=30min
```

Paramétert a cím végére fűzöl `&` jellel:

```text
https://pelda.hu/?fluent-booking=calendar&host=kovacs-anna&event=30min&date=2026-11-09&invitee_name=Szabo Eszter&invitee_email=eszter@example.com
```

### Foglalási kérdések és UTM-paraméterek

Egyéni kérdések válaszát ugyanígy adhatod át: a **Mező** menüben válaszd ki a kérdést, az **Érték** mezőbe írd a választ. UTM-paraméterek is ugyanúgy működnek: a **Mező** menüben válaszd például az `utm_source` paramétert, az értéke legyen például `newsletter`.

## UTM-követés

Az UTM-követéssel láthatod, melyik kampány hozza a legtöbb foglalást. A booking linkekhez UTM-paramétereket adhatsz, és minden foglalásnál látszik a forrás, a közeg és a kampány.

### Követhető link létrehozása

1. A **Naptárak** oldalon kattints az esemény **Megosztás** gombjára.
2. Válaszd a **Link létrehozása** fület, és a **Paraméterek hozzáadása** részben töltsd ki a **Mező** és **Érték** mezőket:
   - **UTM-forrás**: a forgalom forrása (például Facebook, Newsletter).
   - **UTM-médium**: a marketingcsatorna (például cpc, email).
   - **UTM-kampány**: a kampány neve (például summer_sale).
   - **UTM-kifejezés**: a követett kulcsszavak.
   - **UTM-tartalom**: ugyanazon kampányon belüli linkek vagy hirdetések megkülönböztetése, A/B teszteléshez (például blue_button, red_link).
3. Kattints a másolás gombra az új link kimásolásához.

### Az adatok megtekintése

Miután a vendég a linken keresztül foglal, a **Fluent Booking → Foglalások** oldalon nyisd meg a foglalást. A részletek közt az UTM-adatok szakaszában látod a forrást, a közeget és a kampányt.