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Í

Spuštění kampaně po najetí kurzorem nebo dotykem na konkrétní místo ve stránce

Označte místo, které spustí kampaň ve chvíli, kdy na něj uživatel umístí kurzor nebo se jej dotkne na dotykovém zařízení

Rozesílejte e-maily profesionálně: s přesným trackingem a segmentací

Špičkový e-mailingový nástroj nabízí maximální doručitelnost, přesnou segmentaci a vysokou míru automatizace.

Zkopírování dárkového kódu do clipboardu

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.

Mailocator Events

Pomocí událostí můžete chytře řídit sled kampaní v celém workflow scénáře a zobrazovat mnohem relevantnější a přesně cílený obsah v reálném čase.

Notifikace

Nastavení zobrazení notifikací ve vašich stránkách pomocí Mailocatoru

Zpracování formuláře (kampaně) vložené do stránky

Jak na odeslání dat z formuláře umístěného ve vašich stránkách do 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.