# Hogyan jelenítsek meg popupokat mobileszközökön?

Canonical URL: https://support.optimonk.com/hu/articles/how-can-i-display-popups-on-mobile-devices

Minden popup, amit az OptiMonkban készítesz, eleve mobilra is elkészül – a rendszer **külön asztali és mobil verziót** készít ugyanahhoz a popuphoz, és mindkettőt szerkesztheted. Az, hogy tényleg megjelenik-e telefonon, a **trigger eszközbeállításától**.

Mind a hat trigger működik mobilon:

- **Kilépési szándékra**

- **Késleltetés után**

- **Görgetés után** (a lap X%-a)

- **Kattintásra** (egy adott elemre)

- **Inaktivitás után**

- **JavaScript eseményre**

---

## Állítsd be, hogy a trigger mobilon is működjön

1. Nyisd meg a **Kampányok** menüpontot a bal oldali menüben, és kattints a szerkesztendő kampányra.

2. Nyisd meg a **Beállítások** fület. Az első szakasz a **Mikor jelenjen meg a popup**.

3. Kattints egy már meglévő trigger kártyájára a szerkesztéshez, vagy kattints a **Trigger hozzáadása** gombra, és válassz egyet a listából.

4. A párbeszédpanelen az **Eszközök** résznél kapcsold **Mobil** kapcsolót bekapcsolt állásba. A popup akkor jelenik meg telefonon, ha a Mobile kapcsoló be van kapcsolva – önmagában vagy a Desktop kapcsolóval együtt.

5. Kattints a **Mentés** gombra a párbeszédpanelen, majd a **Módosítások mentése** gombra a szakasz alján.

*💡 A triggerek VAGY logikával kapcsolódnak össze – a kampány akkor indul el, ha bármelyikük teljesül. Így egy kampányban egyszerre használhatsz kilépési szándékot mobilon és késleltetést desktopon.*

**Kattintásra** és a **JavaScript eseményre** kissé eltérően működik: nincs egyetlen közös eszközkapcsolójuk, mert minden CSS-szelektor sorhoz és minden eseménynév sorhoz saját **Asztali / Mobil** kapcsoló tartozik. Így egy szelektor lehet csak mobilra, a következő pedig csak desktopra beállítva.

Ezt a chatben is egyszerűen kérheted – például: *„jelenítsd meg ezt mobilon is”* – és a beállítások panel a beszélgetés közben azonnal frissül.

---

## A popup mobil verziója

A rendszer minden kampányhoz két dokumentumot készít: egy **desktop** és egy **mobil** verziót. A popup szerkesztőben a két ikon (monitor / telefon) felül a kettő között váltogat, és a mellettük lévő méret-legördülő menüvel megnézheted, hogy az adott verzió hogyan néz ki más képernyőméreteken.

Mivel ez két külön dokumentum, az egyik nézeten végzett módosítás nem jelenik meg automatikusan a másikon. A szerkesztő ezt kezeli helyetted:

- Egy szövegmódosítás után megkérdezi, hogy a másik nézetre is átvigye-e a változást (**Igen** / **Nem**).

- Ha a két nézet eltér egymástól, egy jelvény jelzi ezt az eszköztárban, és rákattintva átugorhatsz a másik nézetre.

- Ha egy módosítást nem lehetett átvinni, figyelmeztetést kapsz róla, nem marad néma.

- Mentés közben figyelmeztetést kapsz, ha a változás bármelyik előnézeti méretnél túlcsordulást (overflow) okozott.

A megszokott munkafolyamat tehát: szerkesztés desktopon, igen a szinkronizálási kérdésre, majd váltás a mobil nézetre és ellenőrzés.

*💡 A popupok ebben az appban két formátumban léteznek: **card** (középre helyezett popup elhalványított háttér előtt) és **fullscreen**. Az oldalsáv (sidebar), nanobar és sticky bar típusok itt nem elérhetők.*

---

## A hat trigger mobilon

### Kilépési szándéknál

Telefonon nincs kurzor, így a kilépési szándékot a látogató viselkedéséből olvassuk ki – lapváltás, gyors visszagörgetés a tetejére, vagy a Vissza gomb használata. A részletek az Exit-intent trigger mobileszközökön című cikkben találhatók.

**Fontos:** egyes mobil böngészők nem támogatják ezen viselkedések mindegyikét, és ha egy jel hiányzik, az adott viselkedés nem indítja el a triggert.

### Kattintásra

Ehhez egy kis CSS- és HTML-ismeret szükséges lehet, mert azonosítanod kell a kattintható elemet a weboldalad forráskódjában.

Ezzel jelenítheted meg a popupot, amikor a látogató megkoppint egy adott részt az oldaladon – egy dobozt, egy linket, egy bannert. Ilyenkor a popup egy mini landing page-ként viselkedik. Adj meg bármilyen CSS-szelektort: egy elemnevet, egy osztályt, egy azonosítót (ID), vagy azok kombinációját:

- `a` — bármely link elem

- `div.container > a` — bármely link, amely egy DIV gyermeke, az alábbi CSS-osztállyal `container`

- `table > a.delete` — bármely link, amelynek a `delete` osztálya van, és egy táblázatelem (table) gyermeke

- `#container` — egy elem, amelynek az azonosítója (id) `container`

- `#container > *` — bármely elem, amely az adott id-vel rendelkező elem gyermeke `container`

Egy gyermekelemre koppintás is elindítja a kampányt, ha a gyermekelem egy egyező elemen belül található.

**Megjegyzés:** a gyakoriságkorlátozás nem érvényes erre a triggerre – kattintásra a kampány mindig megjelenik, amíg a célzási szabályok illeszkednek.

### Görgetés után

A popup akkor jelenik meg, amikor a látogató legalább a lap X%-át legörgette (1–100). Ez az aktív látogatókat fogja meg. Egy blogon például feliratkoztathatod azokat az olvasókat, akik a bejegyzés legalább 50%-át elgörgették – ha ennyire élvezik, jó eséllyel szeretnének értesülni a következőről is.

### Inaktivitás után

A popup azoknak a látogatóknak jelenik meg, akik legalább X másodpercig inaktívak voltak – nincs koppintás, nincs görgetés. Az érték 1 és 60 másodperc között állítható.

### Késleltetés után

A popup azoknak a látogatóknak jelenik meg, akik legalább X másodperce (0–60) az oldalon vannak. A számláló csak azután indul el, hogy az oldal teljesen betöltődött az eszközön. Ha 0-ra állítod, akkor belépési popuppá válik, amely a látogató érkezésének pillanatában jelenik meg – a kártyán ekkor ez szerepel: **Azonnal**.

### JavaScript eseményre

A popup azután jelenik meg, hogy a látogató elvégzett egy olyan műveletet, amelyet a többi trigger nem fed le. Add meg a saját kódodból indított DOM-esemény nevét – például `user_login` amikor egy regisztrált látogató bejelentkezik:

```
document.dispatchEvent(new Event('user_login', { bubbles: true }))
```