Jak działa edytor kodu HTML?

Edytor kodu HTML to zaawansowane narzędzie, które pozwala tworzyć niestandardowe treści marketingowe bez ograniczeń edytora drag&drop. Jest idealny, gdy potrzebujesz pełnej kontroli nad wyglądem i funkcjonalnością treści w kampaniach.

Dzięki niemu:

• Osadzisz zaawansowane elementy interaktywne, takie jak karuzele produktów czy formularze.
• Dodasz własne style CSS i skrypty JavaScript dla wyjątkowych doświadczeń użytkownika.
• Precyzyjnie sformatujesz treści zgodnie z koncepcją marketingową i identyfikacją wizualną Twojej marki.

Interfejs edytora

Edytor kodu składa się z trzech głównych obszarów, które umożliwiają wygodne tworzenie i edytowanie treści:

1. Przestrzeń robocza – to miejsce, w którym wpisujesz kod. Możesz przełączać się między trzema zakładkami:
2. HTML – do definiowania struktury i treści
3. CSS – do stylizacji wyglądu
4. JavaScript – do dodawania interaktywności
5. Podgląd – dynamicznie wyświetla efekt wprowadzonych zmian. Każda modyfikacja w kodzie jest od razu widoczna, co ułatwia testowanie i dostosowywanie treści.
6. Pasek narzędzi – zawiera dodatkowe funkcje wspierające pracę nad kodem:
7. Przełącznik HTML-CSS-JS – pozwala na szybkie przechodzenie między edycją kodu w różnych językach.
8. Biblioteka mediów – zapewnia dostęp do wcześniej przesłanych obrazów, ikon i innych zasobów wizualnych.
9. Treści dynamiczne – umożliwia dostosowanie projektowanych treści do odbiorcy w zależności od danych, takich jak cechy systemowe i niestandardowe.
10. Fragmenty kodu (dostępna tylko dla formularzy) – zawiera gotowe fragmenty kodu, np. pola do wprowadzania danych, dodawanie zgód i przycisków.
11. Rekomendacje (jeśli twój plan to uwzględnia) – zawiera ustawienia wyświetlania polecanych produktów oraz dodatkowe filtry.

Dzięki temu możesz na bieżąco sprawdzać wygląd i działanie e-maili, banerów, pop-upów czy formularzy przed ich wdrożeniem.

Konwersja treści z edytora drag&drop do edytora kodu

Jeśli chcesz użyć treści stworzonej w edytorze drag&drop, wystarczy, że zaznaczysz tę opcję podczas duplikacji danej treści. Tak ten proces będzie wyglądał w przypadku wiadomości e-mail

1. Przejdź do Kampanie > E-mail.
2. Znajdź w tabeli treść, której chcesz użyć w edytorze kodu HTML.
3. Kliknij opcję Duplikuj.
4. Wprowadź nową nazwę wiadomości.
5. Zaznacz opcję Konwertuj wiadomość na format edytora kodu.
6. Kliknij Zduplikuj i edytuj, jeśli chcesz przejść do edycji wiadomości. Jeśli nie chcesz edytować wiadomości w tym momencie, kliknij Tylko zduplikuj.

Stosowanie treści dynamicznych w edytorze HTML

Treści dynamiczne o uproszczonej składni ułatwią Ci personalizację treści tworzonych w edytorze kodu HTML. Z jej pomocą wygodnie wyświetlisz treści na podstawie cech systemowych, cech klienta lub rekomendowane produkty.

Dostępne rodzaje treści dynamicznych

W edytorze kodu możesz korzystać z następujących kategorii treści dynamicznych:

1. Cechy systemowe – podstawowe dane klientów, takie jak:
   • imię i nazwisko
   • adres e-mail
   • numer telefonu
   • data ostatniej aktywności
2. Cechy niestandardowe klienta – unikalne cechy, które definiujesz samodzielnie w Ustawienia > Klienci > Cechy klientów.
3. Kontakt – dane kontaktowe klientów, np. adres e-mail lub numer telefonu.
4. Treść – umożliwiają wyświetlanie:
   • zawartości spoza ECDP
   • treści z innych miejsc w systemie na podstawie ID (np. konkretnego banneru)

Fragmenty kodu dla formularzy

Tworzenie formularzy w kodzie HTML może być wyzwaniem, dlatego przygotowaliśmy gotowe fragmenty kodu, które znacznie uproszczą ten proces.

Są to gotowe do użycia szablony, z pomocą których zbudujesz formularz dopasowany do Twoich potrzeb.

Fragmenty kodu są dostępne na pasku narzędzi pod przyciskiem `</>` (Fragmenty kodu) podczas edycji formularza.

W bibliotece znajdziesz następujące elementy:

1. Cechy systemowe – gotowe pola do zbierania podstawowych danych klienta:
   • imię i nazwisko,
   • data urodzenia,
   • adres e-mail,
   • numer telefonu,
   • płeć.
2. Cechy klienta – pola do zbierania danych istotnych dla Twojego biznesu.
   • Aby z nich skorzystać, najpierw dodaj cechy w Ustawienia > Klienci > Cechy klientów.
   • Przykłady: rozmiar ubrania, preferowany rodzaj produktów, hobby.
3. Zgody – pola wyboru dla zgód marketingowych:
   • Dodaj je wcześniej wUstawienia > Zgody > Zgody.
4. Przyciski – gotowy kod przycisku do wysłania formularza:
   • Możesz łatwo dostosować jego wygląd i treść.
   • Zawiera niezbędne atrybuty zapewniające poprawne działanie.

Niezbędne elementy formularza

Aby formularz działał poprawnie, musi zawierać:

1. Co najmniej jedno pole kontaktowe – adres e-mail lub numer telefonu:

• Pole to musi być oznaczone jako wymagane.
• System wykorzysta te dane do identyfikacji klienta

2. Przycisk wysłania – przycisk, który:

• Zbiera dane z formularza.
• Przesyła je do systemu.