Základní kostra a struktura oken v HTML
Vynechání této struktury dojde k zobrazení kampaně, ale řada pokročilých vlastností Mailocatoru (validace formuláře, preloadery, odhalení překlepů a jiných) bude nedostupná.
Toto je základní struktura okna, kde jsou použity povinné tagy pro řízení obsahu pozorování okna na stránce.
<ml-object class="tpx-[fullscreen|sticky] tpx-[vertical]-[horizontal]">
<ml-main style="width:500px; height:auto">
<ml-close></ml-close>
</ml-main>
</ml-object>
Fullscreen
- třída
tpx-fullscreen
- element s (průhledným) pozadím přes celou obrzovaku
- obsah stránky je 100% překrytý
Sticky
- třída
tpx-sticky
- samostatný element přilepený na defionvané místo na stránce
- ostatní obsah stránky je dostupný, lze klikat na odkazy atd.
Pozicování
.tpx-t-l .tpx-t-c .tpx-t-r
.tpx-m-l .tpx-m-c .tpx-m-r
.tpx-b-l .tpx-b-c .tpx-b-r
Hlášky
Chybové hlášky
Vypisují se do kontejneru s třídou .mlctr-message-error
Obsah pro poděkování
Vypíše po úspěšném volání akce subscribe
do .mlctr-message-success
Pokud není tato třída použita, poděkování nahradí obsah kontejneru ml-main
Obsah dalšího kroku
Vypíše po volání akce next
do .mlctr-next-step
Pokud není tato třída použita, obsah kroku nahradí obsah kontejneru ml-main
Příklad celého okna:
<ml-object class="tpx-fullscreen tpx-m-c">
<ml-main style="width:500px; height:auto" class="mailocator-default">
<ml-close></ml-close>
<div class="mlctr-next-step mlctr-message-success">
<h2>Subscribe Now!</h2>
<input type="email" name="email" value="" placeholder="you@example.tld">
<div class="mlctr-message-error"></div>
<button onclick="mailocator.do('subscribe')">Subscribe</button>
</div>
</ml-main>
</ml-object>