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Í

Tagy pro nahrazení obsahu

Propisování libovolných polí do obsahu kampaní, včetně ovlivnění jmen CSS tříd, lze v Mailocatoru udělat několika způsoby.

Akce setval – změna hodnot ve formulářích Mailocatoru

Pro dynamické změny výchozí hodnoty v pop-upech lze použít akci setval

Automatické opravy překlepů v e-mailových adresách

Mailocator dokáže na základě strojového učení opravit řadu běžných překlepů v e-mailové adrese a upozornit na ně uživatele.

Změny v importu slevových kódů od 1. 12. 2020

Pokud používáte v Mailocatoru slevové kódy, prosím, věnujte pozornost následující informaci

E-mailing: Fénix, který povstal z popela

Pokud byste se v roce 2009 zeptali marketingových specialistů na budoucnost e-mailingu, nepochybně by řada odpovědí předvídala ústup ze slávy a nevalnou perspektivu.

Losování náhodného slevového kódu

Potřebujete losovat náhodnou výhru anebo kód ke gamifikačnímu pop-upu? Mailocator umožňuje jednoduše nastavit pravděpodobnost na setinu procenta, náhodně vybrat výhru a doručit ji do e-mailového nástroje.

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.