Vytváranie a zobrazovanie vyskakovacích formulárov

Published: 16. júla 2026 · Last updated: 21. júla 2026 · By Marcus Biel

Vyskakovacie okno sa zobrazuje nad obsahom vašej webovej stránky. Ponuku na prihlásenie umiestňuje do priameho zorného poľa návštevníka, pričom stránka na pozadí zostáva na svojom mieste.

Vyskakovacie okná sú užitočné pri ponukách newsletterov, zľavách, registráciách na podujatia, magnetoch na potenciálnych zákazníkov a ďalších cielených výzvach na akciu. Keďže narúšajú bežné používanie stránky, načasovanie a frekvencia sú rovnako dôležité ako dizajn.

Táto príručka vysvetľuje nastavenia špecifické pre vyskakovacie okná. Rozloženia, bloky obsahu, polia odberateľov, štítky, typografia, vrstvy a prihlasovacie postupy sú opísané v hlavnej príručke Tvorca prihlasovacích formulárov.

Vytvorenie vyskakovacieho okna

Otvorte „Signup Forms“, kliknite na „Create Form“ a vyberte „Popup“. Zadajte jasný interný názov a pokračujte do tvorcu.

Existujúce vyskakovacie okno môžete upraviť aj kliknutím na jeho názov v prehľade prihlasovacích formulárov.

Použite názov, ktorý vysvetľuje ponuku alebo umiestnenie, napríklad „Homepage Discount Popup“, „Webinar Registration Popup“ alebo „Guide Download Popup“. Interný názov sa návštevníkom automaticky nezobrazuje.

Výber šablóny vyskakovacieho okna

Vyskakovacie okná ponúkajú prázdny formulár, štandardný formulár a štyri navrhnuté šablóny:

• Čistá zľava
• Sprievodca v teplých tónoch
• Tmavý webinár
• Jemná komunita

Vyberte šablónu, ktorej veľkosť a štruktúra obsahu zodpovedajú ponuke. Všetok text, polia, farby, obrázky, rozostupy a rozloženie môžete neskôr zmeniť.

Navrhovanie vyskakovacieho okna

Pomocou vizuálneho tvorcu usporiadajte vyskakovacie okno. Prihlasovací formulár môžete kombinovať s textom, obrázkami, videom, zoznamami, tlačidlami, sociálnymi odkazmi, počítadlom odberateľov, medzerami a oddeľovačmi.

Hlavné posolstvo by malo byť dostatočne krátke na okamžité pochopenie. Jasný nadpis, jedno stručné vysvetlenie a konkrétne tlačidlo na odoslanie sú zvyčajne účinnejšie než niekoľko konkurenčných posolstiev.

Vyberte blok prihlasovacieho formulára a nakonfigurujte polia, povinné informácie, skryté štítky, indikátor priebehu, počítadlo odberateľov, vstupy a tlačidlo na odoslanie. Otvorte „Page settings“ a zmeňte celkové pozadie vyskakovacieho okna a predvolené nastavenia vzhľadu.

Vyskakovacie okno sa zobrazí nad webovou stránkou spolu s ovládacím prvkom na zatvorenie. Okolo dôležitého textu a polí nechajte dostatok voľného priestoru, aby sa formulár dal pohodlne používať aj na malej obrazovke.

Konfigurácia správania vyskakovacieho okna

Vyberte blok prihlasovacieho formulára a otvorte „Widget Settings“. Táto sekcia určuje, kedy sa vyskakovacie okno zobrazí a ako často ho môže návštevník vidieť.

Oneskorenie zobrazenia

„Display Delay“ určuje, koľko sekúnd Maildroppa počká pred zobrazením vyskakovacieho okna na vloženej webovej stránke.

Zadajte 0, ak ho chcete zobraziť bez ďalšieho oneskorenia. Použite vyššiu hodnotu, ak majú návštevníci pred zobrazením ponuky čas prečítať si stránku. Tvorca akceptuje oneskorenie až 86 400 sekúnd.

Oneskorenie vyberte podľa typu stránky. Krátke oneskorenie môže byť vhodné na cielenej kampanovej stránke, zatiaľ čo dlhšie oneskorenie môže byť v článku menej rušivé.

Frekvencia zobrazenia

„Display Frequency“ určuje obdobie, po ktorom sa môže vyskakovacie okno opäť zobraziť tomu istému návštevníkovi. Dostupné možnosti sú:

• Vždy
• Raz za hodinu
• Raz denne
• Raz týždenne
• Raz mesačne

Možnosť „Always“ používajte opatrne. Vyskakovacie okno, ktoré opakovane prerušuje toho istého návštevníka, môže byť otravné. Denná alebo týždenná frekvencia je často lepším východiskovým bodom pre všeobecnú ponuku na webovej stránke.

Frekvencia sa ukladá v prehliadači návštevníka. Testovanie v inom prehliadači, v okne súkromného prehliadania alebo po vymazaní úložiska prehliadača preto môže priniesť odlišný výsledok.

Používanie zámeru odchodu

Povoľte „Exit Intent Popup“, ak sa má vyskakovacie okno otvoriť po tom, čo návštevník presunie kurzor mimo oblasti stránky, čo naznačuje, že sa možno chystá odísť.

Keď je zámer odchodu povolený, vyskakovacie okno čaká na toto správanie namiesto bežného oneskoreného zobrazenia. Vybraná frekvencia zobrazenia mu stále zabráni, aby sa zobrazilo znova príliš skoro.

Zámer odchodu je založený na pohybe kurzora, a preto je relevantný najmä v počítačových a laptopových prehliadačoch. Dotykové zariadenia neposkytujú rovnaký signál odchodu. Vždy sa uistite, že mobilní návštevníci môžu vašu ponuku na prihlásenie objaviť priamo na stránke alebo prostredníctvom iného vhodného formulára.

Manuálne otvorenie vyskakovacieho okna z prvku stránky

Vyskakovacie okno sa môže otvoriť, keď návštevník klikne na konkrétne tlačidlo, obrázok alebo odkaz na vašej webovej stránke. Ide o manuálny spúšťač kliknutím. Líši sa od „Exit Intent Popup“, ktorý reaguje na presunutie kurzora návštevníka mimo stránky.

Manuálny spúšťač kliknutím nakonfigurujte a nainštalujte takto:

1. Otvorte vyskakovacie okno v Tvorcovi prihlasovacích formulárov.
2. Kliknite na blok prihlasovacieho formulára na plátne a vpravo otvorte „Settings“.
3. Rozbaľte „Widget Settings“ a povoľte „Open popup when a customer clicks a page element“.
4. Kliknite na „Save changes“.
5. Vráťte sa do prehľadu prihlasovacích formulárov a aktivujte vyskakovacie okno, ak je neaktívne.
6. V riadku daného vyskakovacieho okna kliknite na „Show Code Snippet“.

Dialóg obsahuje dve hodnoty potrebné na vašej webovej stránke:

1. Skopírujte celý kód z karty „JavaScript“ a pridajte ho na stránku webu, na ktorej má byť vyskakovacie okno dostupné.
2. Pod kódom skopírujte ID zobrazené pod textom „Add this ID to element from which you want to manually trigger Popup“.
3. Pridajte túto presnú hodnotu do atribútu id tlačidla, obrázka alebo odkazu, ktorý má vyskakovacie okno otvoriť.

ID má tento formát:

maildroppa-popup-btn-[form-id]

Napríklad:

<button id="maildroppa-popup-btn-[form-id]">Získať sprievodcu</button>

JavaScript načíta vyskakovacie okno. ID prepojí vyskakovacie okno s vybraným prvkom stránky. Obe časti musia byť na rovnakej zverejnenej stránke. Keď návštevník klikne na prvok s týmto presným ID, skript Maildroppa otvorí vyskakovacie okno.

Ak už má tlačidlo na vašej webovej stránke ID z iného systému vyskakovacích okien, nahraďte ho spúšťacím ID Maildroppa, ak má kliknutie spracovať Maildroppa. Nevkladajte vyskakovacie okno Maildroppa do druhého vyskakovacieho okna poskytovaného tvorcom vašej webovej stránky.

Každé HTML ID použite na stránke iba raz. Ak má rovnaké vyskakovacie okno otvárať viacero prvkov, požiadajte osobu implementujúcu webovú stránku, aby tieto prvky prepojila bez duplikovania rovnakého ID.

Prepojenie prihlasovacieho postupu

V hlavičke tvorcu skontrolujte priradený prihlasovací postup. Určuje okamžitú reakciu po odoslaní, e-mail Double Opt-in a výsledok po potvrdení.

Môžete vybrať existujúci postup, upraviť ho alebo vytvoriť samostatný postup pre toto vyskakovacie okno. Samostatný postup je užitočný, keď ponuka potrebuje vlastnú potvrdzovaciu správu alebo doručenie magnetu na potenciálnych zákazníkov.

Náhľad a uloženie

Kliknutím na „Preview“ skontrolujte dizajn a správanie vyskakovacieho okna bez zmeny verzie používanej na vašej webovej stránke. Skontrolujte rozloženie, ovládací prvok na zatvorenie, poradie polí, priestor pre validáciu a reakciu po odoslaní.

Keď je vyskakovacie okno pripravené, kliknite na „Save changes“. Potom sa vráťte do prehľadu prihlasovacích formulárov.

Aktivácia a automatické vloženie vyskakovacieho okna

Ak vyskakovacie okno ešte nie je aktívne, aktivujte ho v ponuke akcií s tromi bodkami. Potom kliknite na „Show Code Snippet“ a skopírujte celý kód z karty „JavaScript“.

Pridajte skript na každú stránku webu, na ktorej má byť vyskakovacie okno dostupné. Kód obsahuje jedinečné ID formulára vyskakovacieho okna a načíta jeho aktuálnu uloženú konfiguráciu.

Karta „HTML“ poskytuje vygenerované značky na vlastné implementácie. Ak ju použijete, dôkladne otestujte všetko správanie a kroky odoslania, pretože kód a štýly vašej webovej stránky môžu ovplyvniť výsledok.

Táto sekcia platí v prípade, že sa má vyskakovacie okno otvárať automaticky na základe oneskorenia zobrazenia alebo správania pri zámere odchodu. Ak má tlačidlo, obrázok alebo odkaz otvárať vyskakovacie okno po kliknutí, postupujte podľa časti

.

Všeobecné pokyny na vloženie nájdete v časti Vytvorenie a vloženie vloženého formulára.

Testovanie vyskakovacieho okna na vašej webovej stránke

Po pridaní kódu otestujte vyskakovacie okno na skutočnej stránke webu:

1. Skontrolujte nastavené oneskorenie.
2. Otestujte tlačidlo na zatvorenie a kliknutie mimo formulára.
3. Ak je povolený zámer odchodu, presuňte kurzor mimo stránky a otestujte ho.
4. Ak je povolený manuálny spúšťač, kliknite na nakonfigurovaný prvok stránky a otestujte ho.
5. Skontrolujte rozloženie na úzkej obrazovke.
6. Odošlite formulár a dokončite proces Double Opt-in.
7. Overte odberateľa a skryté štítky v Maildroppa.

Nastavenie frekvencie môže zabrániť opätovnému zobrazeniu vyskakovacieho okna počas opakovaných testov. Ak potrebujete čistú testovaciu návštevu, použite okno súkromného prehliadania alebo vymažte príslušné úložisko prehliadača.

Aktualizácia alebo deaktivácia vyskakovacieho okna

Ak chcete vyskakovacie okno aktualizovať, otvorte ho v Maildroppa, upravte dizajn alebo správanie, zobrazte náhľad a kliknite na „Save changes“. Útržok JavaScriptu bude naďalej používať rovnaké ID formulára.

Ak ho chcete dočasne prestať zobrazovať, v ponuke akcií vyberte „Deactivate“. Deaktiváciou sa vyskakovacie okno a jeho predchádzajúce údaje v reportoch zachovajú. Ak už skript alebo spúšťací prvok na webovej stránke nepotrebujete, odstráňte ich tiež.