Wytyczne dotyczące przygotowania elementów dynamicznych

Poniższe wytyczne opisują sposób przygotowywania elementów dynamicznych (np. popupów), tak aby mogły zostać poprawnie zaimplementowane w systemie YouLead.

1. Forma dostarczanych materiałów
Treść elementu dynamicznego (np. popupu) powinna być przygotowana w postaci fragmentu kodu HTML, który zostanie w odpowiednim momencie wstrzyknięty w stronę.
Nie należy dostarczać pełnej struktury dokumentu (HTML, HEAD, BODY). Wystarczy sam fragment odpowiedzialny za zawartość popupu lub komponentu dynamicznego.
System YouLead odpowiada za sposób wyświetlania elementu (np. otwarcie popupu, overlay, animację). Dlatego w kodzie HTML nie należy umieszczać stylów odpowiedzialnych za samo wyświetlenie warstwy popupowej, takich jak:

• position (szczególnie fixed/absolute),
• display,
• visibility,
• elementy obramowania samego popupu,
• animacje wejścia/wyjścia.

2. Wstrzyknięcie kodu w strukturę strony
Wstrzyknięty HTML będzie umieszczony bezpośrednio w strukturze DOM strony, a nie w iframe. Oznacza to:

• można korzystać z globalnych stylów i bibliotek przypiętych do strony,
• mogą wystąpić konflikty stylów, dlatego zaleca się używanie unikalnych klas i prefiksów, np. yldyn-cta-btn, yldyn-popup-container.

Nie należy nadpisywać globalnych stylów strony.

3. Style i JavaScript
W treści popupu nie powinny pojawiać się zewnętrzne linkowania do CSS lub JS, takich jak:

<link rel="stylesheet" ...>
<script src="..."> 

Dozwolone jest natomiast:

• inline CSS umieszczony w <style>...</style>,
• inline JavaScript umieszczony w <script>...</script> (np. walidacja formularza),
• korzystanie z bibliotek dostępnych globalnie na stronie.

Należy unikać styli i skryptów ingerujących w zachowanie samego popupu jako kontenera (patrz punkt 1).

4. Grafiki i zasoby
Jeśli w elemencie dynamicznym znajdują się obrazki:

• preferowane jest umieszczenie ich na serwerze, na którym działa strona klienta,
• w kodzie popupu należy wskazać pełne adresy URL do hostowanych grafik,
• jeśli nie jest to możliwe, obrazki należy dostarczyć w paczce ZIP — zostaną umieszczone w odpowiednim CDN.

5. Formularze w elementach dynamicznych
Jeśli element dynamiczny zawiera formularz:

• należy przygotować ukryty element z treścią podziękowania, który system YouLead pokaże po wysłaniu formularza (zastąpi on część formularzową),
• formularz powinien być zbudowany w sposób prosty i semantyczny,
• można dodać walidację client-side za pomocą inline JavaScript.

6. Responsywność (RWD)
Element dynamiczny powinien być zaprojektowany z myślą o różnych rozdzielczościach ekranu:

• Projekt graficzny: rekomendowane jest przygotowanie co najmniej dwóch wariantów widoku (desktop + mobile), ewentualnie także tablet.
• Szerokości i jednostki: zamiast sztywnych szerokości w px, warto stosować jednostki procentowe lub max-width oraz elastyczne odstępy (np. padding w % lub rem).
• Czytelność na mobile: należy zadbać, aby tekst był odpowiednio duży, przyciski miały wygodne pole klikalne, a formularze nie wymagały przewijania w poziomie.
• Testy: po wdrożeniu zaleca się sprawdzenie zachowania elementu przynajmniej na kilku typowych rozdzielczościach (np. ~360px szerokości dla smartfonów, ~768px dla tabletów, >1200px dla desktopów).

Jeżeli kluczowe są konkretne progi szerokości (breakpointy), warto je z góry wskazać w materiałach (np. 480/768/1024/1440).

7. Przykładowy kod HTML elementu dynamicznego
Poniżej znajduje się przykładowy fragment, zgodny ze stylem przygotowania dla systemu YouLead:

<!-- blok styli css -->
<style>
#yldyn-popup-container {
  font-family: 'Arial' !important;
  background: #fff;
  color: #000;
}
#yldyn-popup-container input {
  border: 1px solid #ADADAD;
}
</style>
<!-- koniec bloku styli css -->
<!-- blok html -->
<div id="yldyn-popup-container" style="width:600px; padding:20px;">
<img alt="baner1" src="https://example.com/img/baner1.jpg" style="float:left;" />
<img alt="border" src="https://example.com/img/border.png" style="float:left; margin:10px 40px;" />
<form id="yldyn-popup-form" style="margin-top:15px;">
<label style="font-size:12px; display:block;">Imię</label>
<input type="text" class="yl-imie" />
<label style="font-size:12px; display:block;">E-mail</label>
<input type="text" class="yl-email" />
<button type="button">Wyślij zapytanie</button>
</form>
  <!-- ukryty blok podziękowania -->
<div id="yldyn-thanks" style="display:none;">
<p>Dziękujemy za przesłanie formularza!</p>
</div>
</div>
<!-- koniec bloku html -->