# Meeting Scheduler widget: Calendly, Freebusy és Vyte beágyazása

> Külső időpontfoglaló naptár beágyazása az Elementor-oldalra: a szolgáltatás kiválasztása, a szolgáltatásonkénti mezők és méretek.

A **Meeting Scheduler** widget egy külső időpontfoglaló szolgáltatás naptárát teszi az Elementor-oldalra, így a látogató az oldal elhagyása nélkül választhat időpontot. A naptár a szolgáltatásnál marad, a widget csak beágyazza. A widget az ingyenes bővítmény része, Pro nem kell hozzá.

## Előfeltételek

1. Az Elementor aktív.
2. Nyisd meg: **The Plus Addons → Widgets**, keress rá a **Meeting Scheduler** névre, és kapcsold be.
3. Legyen fiókod a választott foglalószolgáltatásnál, legalább egy elkészített eseménnyel. A widget nem hoz létre naptárat.

## Alapműveletek

1. Húzd a **Meeting Scheduler** widgetet az oldalra.
2. A **Tartalom** fülön nyisd meg a **Meeting Scheduler** szakaszt.
3. A **Select** legördülőben válaszd ki a szolgáltatást. Az alapérték a Calendly.
4. Töltsd ki a megjelenő mezőt: a Calendlynél felhasználónevet, a Freebusynél és a Vytenél webcímet kér.
5. Állítsd be a méretet.

A **Select** öt szolgáltatást kínál: Calendly, Freebusy, Meetingbird, Vyte és X Ai. A widget minden mezője az éppen kiválasztott szolgáltatáshoz tartozik, a többié eltűnik.

A widget felirata ennél a widgetnél a magyar felületen is angol marad, ezért a táblázatokban a szó szerinti angol feliratok szerepelnek.

## Melyik beállítás melyik szolgáltatáshoz tartozik

| Szolgáltatás | Mit töltesz ki | Méret | Stílus |
|---|---|---|---|
| Calendly | **User Name**, **Time**, **Display Event Type** | **Height** (650 px) | **Stílus** fül, **Calendly Style**: **Text**, **Link**, **Background** |
| Freebusy | **URL**, **Scroll Bar** | **Width** és **Height** (600 px mindkettő) | nincs a widgetben, a Freebusy fiókban állítod |
| Vyte | **URL** | **Width** és **Height** (600 px mindkettő) | nincs a widgetben, a Vyte oldalán állítod |
| Meetingbird | **URL** | **Min. Height** (600 px) | nincs a widgetben |
| X Ai | **User Name**, **Page Name** | nincs | nincs a widgetben |

Hogyan jelenik meg az oldalon:

- A **Calendly** a saját szkriptjével jelenik meg: a widget egy helyőrzőt ír ki, amit a Calendly `widget.js` fájlja iframe-mé alakít.
- A **Freebusy**, a **Vyte** és a **Meetingbird** sima iframe, a megadott címmel, a megadott szélességgel és magassággal. Külön szkript nem töltődik be.
- Üres mező esetén semmi nem jelenik meg: se doboz, se hibaüzenet.
- Csak a Calendly formázható az Elementorból, a többi szolgáltatást a saját felületén kell megformáznod.

## Calendly

![A Meeting Scheduler widget Tartalom füle Calendly kiválasztva](./kepek/kepek-media-talalkozo-calendly-panel.webp)

*A Meeting Scheduler widget Tartalom füle Calendly kiválasztva* (https://minta-bolt.hu/wp-admin/post.php?post=86&action=elementor)

A képen a **Select** a Calendlyre áll, alatta a **User Name**, a **Time**, a **Display Event Type** és a **Height** látszik.

1. Válaszd a **Calendly** szolgáltatást a **Select** mezőben.
2. A **User Name** mezőbe írd a Calendly-felhasználóneved: ez a foglalási linked `calendly.com/` utáni része. A Calendlyben a **Account → Account Settings → My Link** oldalon találod, onnan másold ki.
3. A **Time** legördülőből válaszd ki a megjeleníteni kívánt esemény hosszát: **15 Minutes**, **30 Minutes** vagy **60 Minutes**. Egyeznie kell a Calendlyben beállított esemény hosszával.
4. Ha a 650 px kevés a naptárnak, emeld a **Height** értékét (0 és 1000 közötti, 10-es lépésekben).

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Select** | melyik foglalószolgáltatást ágyazza be | Calendly |
| **User Name** | a Calendly-link `calendly.com/` utáni része | üres |
| **Time** | az esemény hossza | 15 Minutes |
| **Display Event Type** | a naptár fölötti eseményleírás megjelenítése vagy elrejtése | **Show** |
| **Height** | a beágyazás magassága pixelben | 650 |

A widget a Calendly-címet a megadott felhasználónévből és az idő értékéből állítja össze, a naptárt a Calendly szolgáltatja a saját iframe-jében, ezért pontosan úgy néz ki és viselkedik, mint a Calendly-oldaladon. A **Display Event Type** csak akkor látszik, ha a **Time** nem **All**.

### Színek

![A Calendly Style szakasz a Stílus fülön](./kepek/kepek-media-talalkozo-calendly-stilus.webp)

*A Calendly Style szakasz a Stílus fülön* (https://minta-bolt.hu/wp-admin/post.php?post=86&action=elementor)

A **Stílus** fül egyetlen szakasza a **Calendly Style** három színnel: **Text**, **Link**, **Background**. Ezek nem CSS-ként érvényesülnek: a widget a három színt a beágyazási cím részeként adja át a Calendlynek, és a Calendly festi ki velük a saját iframe-jét. A **Background** akkor hasznos, ha a Calendly fehér háttere nem illik egy sötét oldalhoz.

### Korlátok

- A **Time** legördülő **All** értéke nem működik úgy, ahogy a neve sugallja: nem az összes eseménytípust listázza, hanem a 15 perces eseményt tölti be. Válassz konkrét hosszt, és ha a látogatónak több esemény közül kell választania, inkább a Calendly-oldalra linkeld.
- Ha a **Time** nem egyezik egy Calendly-eseménnyel, rossz vagy üres beágyazást kapsz.
- A Calendly iframe-jébe a három színen túl az oldal CSS-e nem lát bele.

## Freebusy

![A Meeting Scheduler widget Freebusy kiválasztva](./kepek/kepek-media-talalkozo-freebusy-panel.webp)

*A Meeting Scheduler widget Freebusy kiválasztva* (https://minta-bolt.hu/wp-admin/post.php?post=87&action=elementor)

A képen a **Freebusy** szolgáltatás mezői látszanak: **URL**, **Width**, **Height**, **Scroll Bar**.

1. Válaszd a **Freebusy** szolgáltatást a **Select** mezőben.
2. A Freebusy fiókodban nyisd meg az **Event Templates** részt, és a megjeleníteni kívánt eseménynél használd a **Copy Link** gombot.
3. Illeszd be a linket a widget **URL** mezőjébe.
4. Állítsd be a **Width** és a **Height** értékét (mindkettő 600 px-ről indul).
5. Ha a Freebusy magasabb a megadott doboznál, kapcsold be a **Scroll Bar** kapcsolót.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **URL** | a Freebusy-esemény linkje | üres |
| **Width** | az iframe szélessége pixelben | 600 |
| **Height** | az iframe magassága pixelben | 600 |
| **Scroll Bar** | az iframe görgethető-e | **Hide** |

A widget egy sima iframe-et ír ki a linkre, a szélesség és a magasság az iframe saját méretattribútuma, a **Scroll Bar** a görgetési beállítása.

- A szélesség fix pixelérték, nem százalék, ezért a naptár nem nyúlik az oszlop szélességéhez. A legszűkebb elrendezéshez igazítsd, vagy mobilnézetben csökkentsd.
- A **Scroll Bar** alapból ki van kapcsolva: ha a Freebusy több helyet kér, a túllógó rész levágódik, amíg be nem kapcsolod, vagy a **Height** értékét nem emeled.
- A színeket, a logót és a szövegeket a Freebusy fiókban kell beállítani, és az beágyazva is érvényesül. A widgetnek nincs Freebusy-stílus szakasza.

## Vyte

![A Meeting Scheduler widget Vyte kiválasztva](./kepek/kepek-media-talalkozo-vyte-panel.webp)

*A Meeting Scheduler widget Vyte kiválasztva* (https://minta-bolt.hu/wp-admin/post.php?post=88&action=elementor)

1. Válaszd a **Vyte** szolgáltatást a **Select** mezőben.
2. A Vyte fiókodban nyisd meg a **My Vyte Page** oldalt, és kövesd a linket a saját oldaladra.
3. Másold ki a böngésző címsorából a címet, és illeszd be a widget **URL** mezőjébe.
4. Állítsd be a **Width** és a **Height** értékét (mindkettő 600 px-ről indul).

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **URL** | a Vyte-oldal címe | üres |
| **Width** | az iframe szélessége pixelben | 600 |
| **Height** | az iframe magassága pixelben | 600 |

A widget itt is egy sima iframe-et ír ki a megadott méretekkel. A Vytenál nincs **Scroll Bar** kapcsoló (az a Freebusyé): ha az oldal több helyet kér, a **Height** értékét emeld. A kinézetet a Vyte-oldaladon állíthatod, a widgetben nincs Vyte-stílus szakasz.

## Hibaelhárítás

**A naptár helyén üres hely van.** A szolgáltatás mezője üres. A Calendlynek a **User Name**, a Freebusynek, a Vytének és a Meetingbirdnek az **URL** kell.

**A naptár le van vágva, vagy kis dobozban görget.** Emeld a **Height** értékét. A Calendly 650 px-ről, a Freebusy és a Vyte 600 px-ről indul, ami több eseménytípusnál kevés lehet.

**Rossz hosszúságú eseményt kínál a Calendly.** A **Time** nem egyezik a Calendly-fiókban beállított eseménnyel, vagy az **All** értéket választottad, ami a 15 perces eseményt tölti be.

**A Freebusy vagy a Vyte kilóg a telefon szélén.** A szélesség fix pixelérték: mobil töréspontnál csökkentsd.

**A Freebusy vagy a Vyte színeit szeretném átállítani.** Ezt a szolgáltatás saját felületén teheted meg.

**Hol látom a foglalásokat?** A widget nem hoz létre, nem szerkeszt és nem olvas foglalást: ezek a szolgáltatás saját felületén történnek.