# Regisztrációs widgetek: létrehozás és szerkesztő

> Regisztrációs widget létrehozása sablonból, szerkesztése, másolása, törlése, beillesztése az oldalra, és a widgetszerkesztő felépítése.

A regisztrációs widget egy teljesen testre szabható regisztrációs űrlap, amelyet a meglévő oldalaidba építhetsz be shortcode-dal, vagy felugró ablakként jeleníthetsz meg egy gombra vagy hivatkozásra kattintva. Fő tulajdonságai:

- valós időben látható szerkesztő, amelyben mindent beállíthatsz;
- beágyazható bármelyik meglévő oldalba;
- felugró ablakként is megjeleníthető kattintásra;
- az időpontok a látogató időzónájában jelennek meg;
- visszaszámláló mutatja, mennyi idő van hátra, ezzel sürgetve a regisztrációt;
- kiválthatja az alapértelmezett webinárium-regisztrációs oldalt a saját oldaladdal.

Widgetet csak akkor tudsz létrehozni, ha már van legalább egy webinárium. A webináriumokról az [Élő és automatizált webinárium beállítása](https://hub.hellowp.io/hu/plugins/wpwebinarsystem/alapok-webinarium-letrehozasa/) fejezetben olvashatsz.

## A widgetek listája

A widgeteket a **WebinarPress → Regisztrációs widgetek** menüpont alatt éred el. A lista a widget nevét és a regisztrációk számát mutatja, a sor végén pedig egy hárompontos menü van.

![A regisztrációs widgetek listája egy widgettel](./kepek/regisztracios-widgetek-lista.webp)

*A regisztrációs widgetek listája egy widgettel* (https://minta-bolt.hu/wp-admin/admin.php?page=wswbn-regforms)

A képen a lista látható: a név és a regisztrációk száma mellett a sor végén találod a hárompontos menüt.

A hárompontos menü pontjai:

| Menüpont | Mit csinál |
|---|---|
| **Edit Widget** | Megnyitja a widgetet a szerkesztőben. |
| **View Shortcode** | Kiírja a widget shortcode-ját, amelyet bemásolhatsz az oldaladba. |
| **View HTML** | Megmutatja a widget HTML-kódját. |
| **Create variation** | Másolatot készít a widgetről. |
| **Delete Widget** | Törli a widgetet. |

![A widgetsor hárompontos menüje](./kepek/regisztracios-widgetek-lista-menu.webp)

*A widgetsor hárompontos menüje* (https://minta-bolt.hu/wp-admin/admin.php?page=wswbn-regforms)

A menüben a szerkesztés, a shortcode és a HTML megtekintése, a másolat készítése és a törlés pontot látod.

## Új widget létrehozása

1. Nyisd meg a **WebinarPress → Regisztrációs widgetek** oldalt.
2. Kattints a jobb felső sarokban lévő **NEW WIDGET** gombra.
3. A **Choose a template** ablakban válassz egy sablont a bal oldali listából. A jobb oldalon az előnézet látszik. A sablonok: **Purple Countdown**, **Blue Calendar**, **Simple Recurring** és **Red Recurring**.
4. Kattints a **CREATE WIDGET** gombra.

![A sablonválasztó ablak](./kepek/regisztracios-widgetek-sablonok.webp)

*A sablonválasztó ablak* (https://minta-bolt.hu/wp-admin/admin.php?page=wswbn-regforms)

Ha egyik sablon sem tetszik, semmi gond: a widget minden eleme szerkeszthető a szerkesztőben.

## Meglévő widget szerkesztése, másolása, törlése

- **Szerkesztés:** a widget sorában nyisd meg a hárompontos menüt, és válaszd az **Edit Widget** pontot.- **Másolás:** a hárompontos menüben válaszd a **Create variation** pontot. A másolatot külön szerkesztheted, így egy kész widgetből gyorsan készíthetsz változatot, például másik webináriumhoz.
- **Törlés:** a hárompontos menüben válaszd a **Delete Widget** pontot.

## A widget beillesztése az oldalra

Amikor végeztél a szerkesztéssel, a widgetet shortcode-dal illeszted be az oldaladba.

1. A widget sorában nyisd meg a hárompontos menüt, és válaszd a **View Shortcode** pontot.
2. Kattints a **COPY TO CLIPBOARD** gombra.
3. Illeszd be a másolt shortcode-ot az oldaladba vagy bejegyzésedbe az oldalszerkesztővel.

![A widget shortcode-ja](./kepek/regisztracios-widgetek-shortcode.webp)

*A widget shortcode-ja* (https://minta-bolt.hu/wp-admin/admin.php?page=wswbn-regforms)

A shortcode alakja `[webinarpress_registration id="10"]`, ahol az azonosító a widget saját azonosítója. Az oldal megtekintésekor a widget ott jelenik meg, ahová a shortcode-ot beillesztetted.

![A regisztrációs widget egy oldalon](./kepek/regisztracios-widgetek-oldalon.webp)

*A regisztrációs widget egy oldalon* (https://minta-bolt.hu/regisztracio-teszt/)

A képen egy oldal látható, amelybe a shortcode-dal beillesztettük a widgetet. Ha gyorsítótár-bővítményt (például WP Super Cache vagy WP Rocket) használsz, a widget mentése után ürítsd a gyorsítótárat.

## A widgetszerkesztő felépítése

Az új widget létrehozása után a teljes képernyős szerkesztő nyílik meg. Három részből áll:

- **Eszköztár** a bal szélén: ikonok a mentéshez (**Save changes**), új blokk hozzáadásához, a szerkesztő beállításaihoz, a kilépéshez és a súgóhoz.
- **Beállítópanel** az eszköztár mellett: csoportokra bontott beállítások. Bármelyik csoportban módosítasz, a változás azonnal látszik az előnézeten.
- **Előnézet** a jobb oldalon: valós időben mutatja, hogyan fog kinézni a widget az oldaladon.

![A widgetszerkesztő a beállítópanellel és az előnézettel](./kepek/regisztracios-widgetek-szerkeszto.webp)

*A widgetszerkesztő a beállítópanellel és az előnézettel* (https://minta-bolt.hu/wp-admin/admin.php?page=wswbn-regforms)

A képen a bal oldali beállítópanel és a jobb oldali előnézet látható; a **General Settings** csoport nyitva van.

### General Settings

Mentés előtt a widgetnek nevet kell adnod, és ki kell választanod a webináriumot, amelyhez tartozik.

| Beállítás | Mit csinál |
|---|---|
| **Name** | A widget neve, ezzel látod a listában. |
| **Webinárium** | A webinárium, amelyhez a widget tartozik. |
| **Custom Confirmation Page** | Saját visszaigazoló oldal a regisztráció után. Alapértelmezetten **None**. |
| **Date Locale** | A dátumok nyelve, alapértelmezetten **English (United States)**. |

### Layout Settings

Itt a widget egészének megjelenését állíthatod.

| Beállítás | Mit csinál |
|---|---|
| **Background** | A widget háttérszíne. |
| **Text Color** | A szövegek színe. |
| **Max Width** | A widget legnagyobb szélessége, csúszkával. |
| **Padding** | A belső margó. |
| **Border** | A szegély beállításai. |

### Translations

Itt írhatod át a hibaüzeneteket, a saját szövegeidre:

| Beállítás | Alapértelmezett szöveg |
|---|---|
| **Registration Error** | There was a problem registering you for this webinar |
| **Registration Limit Reached** | There are no more places available for this webinar |
| **Registration Pending** | Please check your email to complete your registration |
| **Login Failed** | You don't appear to be registered for this webinar |

### Display as Popup

Ezzel a csoporttal a widgetet felugró ablakként jelenítheted meg. A beállítást a [Felugró regisztrációs ablak](https://hub.hellowp.io/hu/plugins/wpwebinarsystem/regisztracios-widgetek-popup/) fejezet írja le.

## Blokkok

A widget blokkokból áll, például szövegből, visszaszámlálóból, beviteli űrlapból és gombokból. A blokkok adják az űrlap kialakítását, és tetszőleges számút adhatsz hozzá. Egy tipikus widgetben van egy szövegblokk a címhez, egy visszaszámláló, egy beviteli űrlap és egy művelet gomb. Minden blokknak saját beállításai vannak a megjelenéséhez. A blokktípusokat a [Blokktípusok](https://hub.hellowp.io/hu/plugins/wpwebinarsystem/regisztracios-widgetek-blokkok/) fejezet ismerteti.

### Új blokk hozzáadása

Két módon adhatsz hozzá blokkot:

- Kattints az eszköztár **+** ikonjára: az új blokk az űrlap végére kerül.
- Egy meglévő blokk sorában kattints a jobb oldali **+** ikonra: az új blokk a meglévő blokk fölé kerül.

Ezután válaszd ki a kívánt típust a felugró listából: **Register Button**, **Alternate Sessions**, **Sessions Dropdown**, **Calendar**, **Countdown Timer**, **Input Form**, **Login Link**, **Text** vagy **Html Editor**.

![A blokktípusok listája az új blokk hozzáadásakor](./kepek/regisztracios-widgetek-uj-blokk.webp)

*A blokktípusok listája az új blokk hozzáadásakor* (https://minta-bolt.hu/wp-admin/admin.php?page=wswbn-regforms)

A képen az új blokk hozzáadásakor megjelenő típuslista látható.

### Blokk törlése

A blokk sorában kattints a kuka ikonra. A sorban a **+** (új blokk fölé) és a másolat ikon is megvan, utóbbival a blokkot megkettőzheted.

### Blokkok átrendezése

A blokkok sorrendjét a blokk sorának megfogásával és húzásával változtathatod meg (az egér fölé vitelekor a **Click and drag to re-order** súgó jelenik meg).