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Í

Scénář v Mailocatoru

Scénář Mailocatoru představuje klíčový nástroj pro nastavení správného fungování vašich kampaní. Podívejte se, co všechno a jak snadno lze nastavit.

Předání dat z Mailocatoru do nástroje pro e-mail marketing

Někdy se hodí předat i doplňující údaje z Mailocatoru, obvykle stát, gender, oblíbené kategorie, slevový kód nebo jméno a příjmení. Jak na to?

Slevové kódy získávané z API v reálném čase

Mailocator umožňuje kromě zásobníků kódů číst slevové kódy v reálném čase z externího API, zobrazit je v děkovné stránce a předat do e-mailového nástroje.

Slevové kódy

Mailocator umožňuje předávání slevových a promočních kódů do e-mailových kampaní

Příprava výherního kalendáře (Adventní kalendář)

Mailocator obsahuje předpřipravené šablony pro akční kalendáře, které uživatelům odkryjí výhru pro konkrétní den výměnou za e-mailovou adresu. Jednoduše tak připravíte třeba adventní kalendář se slevou nebo akcí na každý den.

Stírací los

Stírací los je kampaň, u které je marketingový obsah (sleva, upozornění, kupón...) zakrytý obrázkem, který lze setřít kurzorem myši nebo prstem na obrazovce chytrého zařízení. Po setření a odkrytí obsahu lze automaticky spustit akci, například získat e-mailovou adresu.

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.