Přejít k obsahu  Přejít k hlavnímu menu

Blog / Knowledge base

Aktualizace: 1. srpen 2020

Jak nakódovat vlastní pop-up na míru?

V Mailocatoru můžete používat vlastní HTML/CSS kód tak, aby bylo možné postavit pop-up (nebo jakýkoli objekt) bez omezení a na míru.

Pro vytvoření pop-upu můžete využít následující minimální kostru, která obsahuje základní sémantiku objektů používaných v Mailocatoru. Tento postup lze použít pro aktuální PROAGENCY verzi nebo původní verzi Mailocatoru.

Vzorový pop-up včetně poděkování a chybových hlášek si můžete stáhnout a vyzkoušet v Mailocator Designeru.


Základní povinná HTML struktura pop-upu

<main class="mlctr-underlayer">
     <div class="mlctr-popup">
          <img src="https://static.mailocator.com/img/icon/close.png" class="mlctr-close-button"
               onclick="return mailocator.action.do('close')">

              <div class="mlctr-message-success mlctr-next-step">
                  <form onsubmit="return mailocator.action.do('subscribe')">
                      <input type="email" name="email" value="" placeholder="your email">
                      <div class="mlctr-message-error" data-edit="mark text"></div>
                      <button >Subscribe</button>
                 </form>
             </div>

     </div>
</main>



Popis povinné struktury

Tag MAIN a element s třídou .mlctr-popup vyznačují základní kontejnery pro překrytí obrazovky poloprůhledným pozadím a umístění obsahu okna.
Pokud chcete mít v rohu okna zavírací křížek, obrázek nebo libovolně umístěné tlačítko, je třeba přidat akci Mailocatoru mailocator.action.do('close') , která vynutí zavření okna.
Pro odeslání formuláře použijte event javascriptu onsubmit a akci Mailocatoru mailocator.action.do('subscribe')
Obsah elementu s třídou .mlctr-message-success je přepsaný poděkováním v případě, že došlo k úspěšnému předání sebraných dat.
Obsah elementu s třídou .mlctr-message-error je naplněný chybovou hláškou v případě, že došlo k nějaké chybě (duplicitní kontakt atd.)
Pokud používáte více kroků (multistep), pak jsou jednotlivé kroky zobrazené v kontejneru s třídou .mlctr-next-step



Doporučené minimální CSS

.mlctr-underlayer {
   position: fixed;
   z-index: 9999999;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   background-color:rgba(0, 0, 0, 0.65)";
}

.mlctr-popup {
   width: 500px;
   height: 400px;
   background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
}
 
.mlctr-close-button {
   position:absolute;
   width: 28px;
   height: 28px;
   right: -14px;
   top: -14px;
   z-index: 9999999
}




nastavení pozadí .mlctr-underlayer
výchozí nastavení okna .mlctr-popup
pozice zavíracího křížku .mlctr-close-button





Ke stažení:

Funkční Mailocator package si můžete stáhnout zde - Popup basic skeleton.mlctr

POMOHL VÁM TENTO ČLÁNEK?

SOUVISEJÍCÍ

Návod na vlastní design pro kolo štěstí

Postup pro vytvoření kola štěstí s vlastním HTML a CSS kódem

Jak na Thank you page v Mailocatoru?

Podívejte se jak lépe přivést své budoucí zákazníky zpátky na svůj web pod dokončení ověřovacího procesu.

Kolo štěstí

Oblíbeným gamifikačním prvkem je kolo štěstí, ve kterém je uživateli nabídnutá odměna za poskytnutí údajů nebo přihlášení odběru k newsletterů.

Označení konverze kampaně pomocí akcí

Kde nedochází k automatickému označení kampaně jako konvertované (např. přihlášení k newsletteru), je možné konverzi přidat pomocí akce a lépe tak vyhodnotit úspěšnost kampaně.

Laboratoř pro testování scénářů

Snadná cesta, jak si ověřit funkčnost scénáře v Mailocatoru je spustit laboratoř, kde vidíte celý průběh zpracování v čase včetně vyhodnocení podmínek a akcí uživatele

Vypnutí a zapnutí Mailocatoru parametrem v URL

Pokud potřebujete načas omezit kampaně a není k dispozici UTM parametr, můžete použít interní parametr Mailocatoru

Stojíte na začátku?

Individuální poradenství

Nevíte, jak zlepšit výsledky vašich kampaní, anebo máte pochybnosti o efektivitě vaší práce? Rádi vám poradíme přímo s vašimi daty a ve vašich kampaních.

Vyberte si, s čím chcete poradit, která data vašich kampaní zlepšit a které novinky vás zajímají.

Zeptejte se...

Školení

Vyberte si z nabídky našich školení, nejsou omezená platformou, mohou být pojatá obecně ale i přesně zacílená na vaše potřeby. Místo školení nerozhoduje.

- obecné školení
- školení na míru
- on-line školení

Nabídka školení

Technická podpora

Pracovníci naší technické podpory jsou vám ochotni kdykoli poradit s vašimi dotazy. Ať již se týkají vlastního nastavení nebo jeho kontroly.

Jsme vám k dispozici on-line - e-mail, instant messaging - i prostřednictvím telefonu.