Vyzkoušejte přednastavené kampaně a získejte první konverze do 15 minut.
Mailocator Engage / Vlastní HTML a JavaScript 2024-05-10 20:29:57

Vytvoření vlastního okna

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>