Treść popupu powinna być przygotowana w postaci kodu HTML. Nie chodzi tu jednak o całą kompletną stronę z tagami HTML, BODY, HEAD a jedynie o fragment kodu HTML, który zostanie w odpowiednim momencie wstrzyknięty jako zawartość wyświetlającego się popupu. O sam fakt wyświetlenia popupu dba system YouLead, nie należy zatem w szczególności umieszczać w przygotowywanym kodzie HTML obramowania samego popupu, animacji związanych ze sposobem wyświetlania itp.
Kod HTML popupu wstrzyknięty w źródło strony zostanie umieszczony bezpośrednio w strukturzeHTML konkretnej strony serwisu – nie w postaci ramki. W związku z tym możliwe jest wykorzystanie styli oraz bibliotek zdefiniowanych globalnie na stronie. Należy jednak pamiętać o potencjalnych konfliktach styli, które mogą tutaj powstać. Należy również mieć na uwadze, aby w stylach wykorzystanych w popupie nie definiować żadnych atrybutów związanych z samym wyświetlaniem popupu jako całości, np. position, display itp.
W treści popupu nie powinny znajdować się żadne linkowania do zasobów zewnętrznych javascript oraz css. Można natomiast założyć wykorzystanie tego typu zasobów, jeśli są one podlinkowane do strony, na której wyświetli się popup. Można również umieszczać definicje styli oraz kod javascript na zasadzie „inline” (co może okazać się szczególnie przydatne, np. przy walidacji pól w ewentualnym formularzu zawartym w popupie).
Jeśli w popupie przewidziane są elementy graficzne (obrazki), rekomendowaną opcją jest umieszczenie ich na serwerze, na którym znajduje się strona www, na której będzie wyświetlany popup. W treści popupu należy w takim wypadku posłużyć się odpowiednimi adresami url obrazków, by były one pobierane właśnie z serwera, na którym hostowana jest strona. Jeśli umieszczenie obrazków na serwerze ze stroną www nie jest możliwe – należy je przekazać razem z treścią popupu (w pliku zip). Zostaną one umieszczone w odpowiednim CDN.
Jeśli w popupie przewidziany jest formularz – należy przygotować wewnątrz popupu element zawierający podziękowanie za wypełnienie, który domyślnie jest niewidoczny. Element ten (np. DIV) zostanie pokazany przez system YouLead w tym samym popupie po wypełnieniu formularza (w miejsce z kolei ukrywanego przez system YouLead formularza).
Przykład kodu HTML popupu do osadzenia w YouLead:
<!-- blok styli css -->
<style>
#popup-container{
font-family: 'Arial' !important;
}
#popup-container input{
border:1px solid #ADADAD;
}
...
</style>
<!-- koniec blok styli css -->
<!-- blok znaczników html -->
<div id="popup-container" style="width:600px;height:400px;padding:20px;background:#fff; color:#000;">
<img alt="baner1" src="baner1.jpg" style="float:left;" />
<img alt="border" src="border.png" style="float:left;margin:10px 40px 0px 40px;" />
<form id="popup-form" style="margin-top:15px;">
<label style="font-size:12px;color:#000;display:block;margin:0px;">Imię</label>
<input type=”text” value=”” class=”yl-imie” />
<label style="font-size:12px;color:#000;display:block;margin:0px;">E-mail</label>
<input type=”text” value=”” class=”yl-email” />
<button type="button">Wyślij zapytanie</button>
</form>
</div>
<!-- koniec blok znaczników html -->