Designér vyskakovacích oken

Designér vyskakovacích oken vám umožňuje vytvářet poutavé pop-upy, které přitahují pozornost bez toho, aby otravovaly. Správný modal ve správný čas = více konverzí! ✨

Co můžete vytvořit

Vytvoření vašeho prvního modalu

Možnosti triggerů

Ovládejte, kdy a kde se modaly zobrazují.

Exit Intent

Detekuje, když návštěvník chce opustit stránku:

Jak funguje: Sleduje pohyb myši směrem k tlačítku zavřít nebo zpět prohlížeče

Nejlepší pro:

• Nabídky pro zachránění prodeje
• Slevové kódy
• Přihlášení k newsletteru
• Průzkumy zpětné vazby

Nastavení:

• Citlivost: Nízká, Střední, Vysoká
• Zpoždění: Okamžitě nebo po X vteřinách
• Zobrazit pouze jednou za relaci

Scroll trigger

Zobrazí se po scrollování určitého procenta stránky:

Příklad: Zobrazit po 50% scrollu

Nejlepší pro:

• Obsah uprostřed článku
• Související nabídky produktů
• Akční výzvy pro angažované čtenáře

Nastavení:

• Procento scrollu: 25%, 50%, 75%, 100%
• Směr: Scroll dolů nebo nahoru
• Počet zobrazení: Jednou, Vždy, Každou X návštěvu

Časové zpoždění

Zobrazí se po X vteřinách na stránce:

Příklad: Zobrazit po 30 vteřinách

Nejlepší pro:

• Uvítací nabídky
• Časově omezené akce
• Důležitá oznámení

Nastavení:

• Zpoždění: 5s, 10s, 30s, 60s, Vlastní
• Opakovat: Jednou, Každou návštěvu, Po X dnech

Při načtení stránky

Zobrazí se okamžitě když se stránka načte:

Nejlepší pro:

• Kritická oznámení
• Získání okamžité pozornosti
• Časově citlivé nabídky

Kliknutí na prvek

Zobrazí se když návštěvník klikne na konkrétní tlačítko nebo odkaz:

Příklad: Kliknutí na "Zjistit více"

Nejlepší pro:

• Rozšířené informace o produktech
• Video obsah
• Formuláře pro stažení

Nastavení:

• CSS selektor: .special-button, #learn-more
• Nebo použijte vizuální výběr

Ruční trigger

Ovládejte pomocí JavaScriptu:

// Otevřít konkrétní modal
window.AI4Shops.modal.open("modal_abc123");

Nejlepší pro:

• Vlastní chování aplikace
• Multi-krokové cesty
• Podmíněná logika

Pravidla cílení

Kontrolujte, KDO vidí váš modal.

Cílení na stránky

Specifické stránky:

• URL obsahuje: /products/
• URL je přesně: /pricing
• URL začíná: /blog/
• URL končí: .html

Vyloučit stránky:

• Nezobrazovat na /checkout
• Nezobrazovat na /thank-you

Cílení zařízení

• Pouze desktop
• Pouze mobil
• Pouze tablet
• Všechna zařízení

Geolokace

Zobrazit pro konkrétní lokace:

• Země: USA, Česká republika, atd.
• Oblasti: Evropa, Severní Amerika
• Vlastní regiony

Nový vs vracející se návštěvníci

• Noví návštěvníci: První návštěva webu
• Vracející se návštěvníci: Byli zde před tím
• Oba: Všichni

Vlastní parametry

Cílte na základě URL parametrů:

?ref=facebook → Zobrazit speciální Facebook nabídku
?coupon=SAVE20 → Zobrazit modal s kupónem

Designování vašeho modalu

Rozvržení

Velikosti:

• Malé: 400px (rychlé zprávy)
• Střední: 600px (formuláře, nabídky)
• Velké: 800px (obsah, videa)
• Celá obrazovka: Překryv celé stránky

Pozice:

• Vycentrované (výchozí)
• Nahoře
• Dole
• Vlevo
• Vpravo

Overlay:

• Tmavý (70% průhlednost)
• Světlý (50% průhlednost)
• Žádný
• Vlastní barva a průhlednost

Obsah

Nadpis

• Krátký a chytlavý
• Jasný přínos
• Příklad: "Získejte 20% slevu na svou první objednávku!"

Popis

• 1-3 věty
• Vysvětlete hodnotu
• Použijte akční jazyk

Obrázky/Videa

• Produktové fotky
• Životní styl obrázky
• Promovídea
• GIFy

Tlačítka

• Primární CTA: "Získat slevu"
• Sekundární: "Ne, děkuji"
• Odkaz zavřít

Styly

Barvy

• Barva pozadí
• Barva textu
• Barva tlačítka
• Barva overlay

Typografie

• Rodina písma
• Velikosti písma
• Váha textu
• Zarovnání

Poloměr okrajů

• Ostré (0px)
• Mírně zaoblené (8px)
• Velmi zaoblené (20px)
• Vlastní

Animace

• Fade in
• Slide up
• Slide down
• Zoom in
• Žádná

Formuláře ve vyskakovacích oknech

Integrujte formuláře do vyskakovacích oken pro sběr leadů.

Rychlé nastavení

1. V editoru modalu klikněte na "Přidat formulář"
2. Vyberte existující formulář nebo vytvořte nový
3. Formulář se vloží do modalu
4. Přizpůsobte styly pro shodu

Běžné vzory formulářů

Přihlášení k newsletteru:

• Email (povinné)
• Jméno (volitelné)
• Tlačítko: "Přihlásit se"

Lead magnet:

• Jméno
• Email
• Firma (pro B2B)
• Tlačítko: "Stáhnout nyní"

Průzkum zpětné vazby:

• Hodnocení (1-5 hvězdiček)
• Komentáře (textová oblast)
• Email (volitelné)
• Tlačítko: "Odeslat zpětnou vazbu"

Analytiky vyskakovacích oken

Sledujte výkon vašich vyskakovacích oken.

Klíčové metriky

Zobrazení

• Kolikrát byl modal zobrazen
• Unikátní vs celkové zobrazení
• Zobrazení podle stránky

Míra konverze

• % návštěvníků, kteří klikli na CTA
• Odeslání formulářů
• Cíle dosaženy

Míra zavření

• % návštěvníků, kteří zavřeli bez akce
• Průměrný čas do zavření
• Kliknutí na "Ne, děkuji"

Míra odskoků

• Návštěvníci, kteří opustili po zobrazení modalu
• Porovnání s návštěvníky, kteří modal neviděli

A/B testování

Testujte různé varianty:

1. Vytvořte 2+ verze modalu
2. Rozdělte návštěvnost 50/50 (nebo vlastní)
3. Spusťte test po dobu 7-14 dnů
4. Analyzujte výsledky
5. Vyberte vítěze

Co testovat:

• Nadpisy
• Obrázky
• Barvy tlačítek
• Text CTA
• Množství požadovaných polí
• Triggery (exit intent vs časové zpoždění)

Osvědčené postupy

Načasování je klíčové

❌ Špatně: Modal okamžitě při načtení ✅ Dobře: Počkejte 10-30 vteřin nebo 50% scroll

Zachovejte jednoduchost

❌ Špatně: 10 polí formuláře, dlouhý text ✅ Dobře: 2-3 pole, stručný text, jasný přínos

Poskytněte snadnou únikovou cestu

❌ Špatně: Žádné tlačítko zavřít, obtížné zavření ✅ Dobře: Jasné X, možnost "Ne, děkuji", kliknutím na overlay

Mobilně responzivní

• Testujte na mobilních zařízeních
• Použijte větší tlačítka
• Kratší text
• Vertikální rozvržení

Nepřehánějte to

• Maximálně 1 modal na návštěvu
• Neotravujte stejného návštěvníka
• Respektujte "Již nezobrazovat"

Příklady vyskakovacích oken

Exit-Intent nabídka

Trigger: Exit intent Nadpis: "Počkejte! Ještě jsme neskončili!" Text: "Získejte 15% slevu na svou první objednávku. Pouze pro vás!" CTA: "Získat slevu" | "Ne, děkuji" Konverzní míra: Obvykle 2-5%

Přihlášení k newsletteru

Trigger: 50% scroll nebo 30s zpoždění Nadpis: "Staňte se vnitřním kruhem" Text: "Získejte exkluzivní tipy, nabídky a aktualizace. Žádný spam, kdykoliv se odhlaste." Formulář: Email CTA: "Přihlásit se" Konverzní míra: Obvykle 3-8%

Slevový kód

Trigger: Při načtení stránky (poprvé) Nadpis: "Vítejte! Máme dárek 🎁" Text: "Použijte kód SAVE20 pro 20% slevu na svou první objednávku" CTA: "Kopírovat kód" (auto-kopíruje) Konverzní míra: Obvykle 10-15%

Oznámení o novém produktu

Trigger: Konkrétní stránky produktů Nadpis: "Nová kolekce je tady!" Obrázek: Produktová fotka Text: "Objevte naši nejnovější kolekci. Časově omezená nabídka!" CTA: "Nakupovat nyní"

Integrace

Email marketing

Odesílat odeslání modalu přímo na:

• Mailchimp: Automatické přidávání předplatitelů
• SendGrid: Triggery email kampaně
• ConvertKit: Tagování a segmentace
• Vlastní: Použijte webhooky

CRM systémy

Synchronizujte leady s:

• HubSpot: Vytvářejte kontakty
• Salesforce: Sledujte leady
• Pipedrive: Přidávejte dealy
• Zapier: 3000+ integrací

Analytics

Sledujte konverze v:

• Google Analytics: Události a cíle
• Facebook Pixel: Vlastní konverze
• Google Ads: Sledování konverzí

Řešení problémů

Modal se nezobrazuje?

• Zkontrolujte, zda je "Publikován"
• Ověřte pravidla cílení (správná stránka?)
• Zkontrolujte triggery (splněny podmínky?)
• Vymažte cache prohlížeče
• Zkuste režim inkognito

Modal se zobrazuje příliš často?

• Nastavte limit frekvence
• Použijte cookies pro "Již nezobrazovat"
• Přidejte zpoždění mezi zobrazeními
• Cílte pouze na nové návštěvníky

Nízká konverze?

• Zjednodušte nabídku
• Zkraťte formulář
• Otestujte různé nadpisy
• Změňte trigger načasování
• Přidejte sociální důkaz
• Vytvořte naléhavost

Modal vypadá špatně na mobilu?

• Použijte responzivní nastavení
• Testujte na skutečných zařízeních
• Zmenšete velikost písma
• Vertikální rozvržení
• Větší tlačítka pro klepnutí

Další kroky

vyskakovací okna jsou mocným nástrojem! Používejte je moudře a uvidíte, jak rostou konverze. ✨🎯