Publică o landing page HTML pe Cloudflare Workers

Pasul 1 — Ce trebuie să ai pregătit

Înainte să începi, adună trei lucruri:

• Un domeniu — cumpărat de unde vrei (Namecheap, GoDaddy etc.). Nu trebuie să fie deja pe Cloudflare: îl mutăm acolo la Pasul 2.
• Landing page-ul tău în HTML, într-un singur folder pe calculator. De obicei conține:
  • fișierul index.html (pagina)
  • un folder images/ cu imaginile
• Un cont RoyLead în care ești autentificat.

💡 Nu ai încă landing page-ul? Creează-l cu AI în câteva minute: Creează o landing page HTML cu Claude sau ChatGPT ↗. Revino aici cu folderul pregătit.

💡 Tot codul de tracking RoyLead intră în interiorul index.html (îl vedem la Pasul 4): nu ai nevoie de niciun fișier de configurare separat.

💡 Ține toate fișierele într-un singur folder: e cel pe care îl vom încărca pe Cloudflare la Pasul 5. Dacă imaginile sunt într-un subfolder images/, asigură-te că HTML-ul le referențiază cu calea corectă (ex. images/foto.jpg).

Pasul 2 — Pregătește domeniul (două lucruri)

Domeniul tău trebuie să fie pregătit pe două fronturi. Sunt două ghiduri separate — parcurge-le pe amândouă, apoi revino aici:

1. Pe Cloudflare — domeniul trebuie administrat de Cloudflare (nameservers îndreptate spre el), ca să putem găzdui landing page-ul pe el. → Adaugă un domeniu pe Cloudflare ↗
2. Pe RoyLead — domeniul trebuie adăugat și verificat în RoyLead, ca lead-urile și conversiile să fie atribuite corect. → Cum conectezi un domeniu nou ↗

💡 Cele două se leagă bine: înregistrarea de verificare pe care ți-o cere RoyLead (un TXT) o adaugi chiar în DNS-ul Cloudflare, unde acum administrezi domeniul. La tipul site-ului alege HTML / Custom.

💡 Dacă domeniul e deja activ pe Cloudflare și verificat în RoyLead, sari direct la Pasul 3.

Revino aici când domeniul e Activ pe Cloudflare și Verificat în RoyLead.

Pasul 3 — Creează landing page-ul în RoyLead și ia cheile

Aici luăm cele două valori pe care le va folosi tracker-ul: Landing Page ID și API Key-ul tău.

1. Din meniu mergi la Landing page-urile și dă click pe Conectează landing page HTML.
2. Completează Nume (ex. "Promo de Vară") și URL (calea pe care o va avea pe domeniul tău, ex. https://domeniultau.com/promo), selectează domeniul și salvează.
3. În listă, lângă landing page, dă click pe iconița de copiere de lângă ID ca să copiezi Landing Page ID-ul. Ține-l deoparte.

4. Mergi la Setări → API Key și copiază cheia cu iconița de copiere de lângă ea (sau dă click pe Regenerează API Key ca să generezi una nouă).

🔒 API Key-ul îți identifică contul: nu-l distribui. Dacă îl regenerezi, va trebui să-l actualizezi în landing page-urile care îl folosesc.

La finalul acestui pas ai în mână două lucruri: Landing Page ID-ul și API Key-ul. Ai nevoie de amândouă la Pasul 4.

Pasul 4 — Lipește tracker-ul în `index.html`

E singura bucată de "cod", dar e doar copy-paste. Deschide index.html cu un editor de text (merge VS Code, Notepad++, chiar și Notepad).

1. Unde vrei formularul → pune asta unde trebuie să apară formularul (poți și în mai multe puncte ale paginii):

<div class="lp-form-container"></div>

Formularul îl desenează și îl stilizează tracker-ul singur: tu pui doar containerul, unde preferi.

2. Chiar înainte de </body> → lipește blocul tracker și completează-l cu datele de la Pasul 3:

<!-- RoyLead Tracker -->
<script>
  window.RoyLeadConfig = {
    captureUrl: "https://capture.roylead.com",
    apiKey: "API_KEY_UL_TAU",
    landingPageId: "ID_LANDING_PAGE_UL_TAU",
    thankYouPage: "https://domeniultau.com/cale/multumesc"
  };
</script>
<script src="https://capture.roylead.com/tracker.js"></script>

3. Salvează fișierul.

⚠️ Trei lucruri de care să ai grijă: înlocuiește API_KEY_UL_TAU cu cheia de la Pasul 3, ID_LANDING_PAGE_UL_TAU cu ID-ul copiat din listă, și nu uita virgula de la finalul fiecărei linii din interiorul acoladelor (în afară de ultima).

💡 Dacă index.html-ul tău are deja alte scripturi (banner de cookie-uri, pixeli etc.), nicio problemă: important e ca blocul RoyLead Tracker să fie înainte de </body>. Pagina setată în thankYouPage o pregătim la Pasul 7.

Pasul 5 — Creează Worker-ul și încarcă fișierele pe Cloudflare

Acum punem fișierele online pe contul tău Cloudflare. Fără terminal, fără GitHub: încarci pur și simplu folderul.

1. Pe dash.cloudflare.com, în meniul din stânga deschide Compute (Workers) și dă click pe Create.
2. Pe ecranul "Ship something new" alege ultima opțiune: Upload your static files.

3. Se deschide ecranul "Upload and deploy". În casetă dă click pe folder (sau trage și lasă) și selectează întregul folder al landing page-ului tău — ca index.html și subfolderul images/ să fie încărcate împreună, cu structura corectă.

⚠️ Încarcă folderul, nu doar index.html: altfel imaginile (care sunt în images/) nu se încarcă și pagina apare fără poze.

4. Cloudflare listează toate fișierele încărcate (index.html + folderul images/) și propune un nume de Worker deja pregătit: îl poți lăsa așa. Dă click pe Deploy.

5. În câteva secunde landing page-ul e online la o adresă Cloudflare de tipul nume-worker.subdomeniul-tau.workers.dev. Poți s-o deschizi deja cu Visit ca să verifici că arată bine.

💡 Adresa asta .workers.dev funcționează, dar nu e domeniul tău. La Pasul 6 conectăm domeniul tău real.

Pasul 6 — Conectează domeniul tău la Worker

Acum facem ca landing page-ul să fie servit la adresa ta. Pe pagina Worker-ului deschide tab-ul Domains.

Sub "Custom domains and routes" dă click pe Add domain.

💡 Folosește Add domain (domeniu custom), nu "Add route": domeniul custom servește landing page-ul curat, cu imaginile care merg imediat.

Se deschide fereastra "Connect domain" cu lista domeniilor tale de pe Cloudflare. Alege domeniul pe care vrei să publici.

💡 Sfat: conectează landing page-ul la un subdomeniu dedicat, ex. promo.domeniultau.com, în loc de domeniul "gol". Așa poți publica mai multe landing page-uri pe același domeniu (câte unul per subdomeniu: promo., oferta. etc.) și fiecare rămâne independentă.

Se deschide fereastra "Connect to domeniultau.com": în câmpul Subdomain (optional) scrie subdomeniul pe care îl vrei (ex. promo → devine promo.domeniultau.com). Dacă îl lași gol, se folosește domeniul gol. Apoi dă click pe Add domain.

Gata: domeniul apare în lista "Custom domains and routes" cu mediul Production. În câteva minute (timpul certificatului SSL) landing page-ul tău e live la adresa ta.

💡 Adresa landing page-ului tău e acum subdomeniul (ex. https://promo.domeniultau.com). Ține-o minte: ai nevoie de ea pentru pagina de mulțumire (Pasul 7) și pentru teste.

Pasul 7 — Pagina de mulțumire

După trimiterea formularului utilizatorul trebuie să ajungă pe o pagină "Mulțumim": e necesară pentru experiența utilizatorului și pentru că RoyLead folosește acel URL ca referință a conversiei. Din moment ce tu găzduiești fișierele, pui pagina în același folder:

1. Creează un fișier multumesc.html în folderul landing page-ului (ajunge o pagină simplă: "Mulțumim! Te contactăm în curând").
2. În blocul tracker din index.html (Pasul 4) setează thankYouPage cu adresa reală de pe subdomeniul tău:

thankYouPage: "https://promo.domeniultau.com/multumesc.html"

3. Reîncarcă folderul actualizat pe Worker: din pagina Worker-ului dă click pe New deployment → Upload your static files și trage din nou folderul (acum cu index.html actualizat + multumesc.html).

⚠️ Fără thankYouPage setat pe o pagină reală, după trimitere utilizatorul ajunge pe o adresă care nu există (404). Pune mereu o pagină reală de-a ta.

Pasul 8 — Verificarea finală

Aproape gata. Să confirmăm că totul funcționează:

1. Deschide landing page-ul la adresa ta (ex. https://promo.domeniultau.com). Ca să testezi tracking-ul, adaugă un parametru la URL, ex. ?fbclid=test123&utm_source=facebook.
2. Verifică că imaginile se văd și că formularul apare unde ai pus <div class="lp-form-container">.
3. Completează și trimite formularul de test: trebuie să ajungi pe pagina de mulțumire.
4. Mergi la RoyLead → Lead-uri: lead-ul de test trebuie să apară acolo (cu parametrii campaniei, dacă i-ai adăugat la URL).

Mergi la Lead-uri ↗

💡 Dacă lead-ul ajunge și vezi parametrii în Lead-uri, integrarea e completă. De aici încolo, modifici fișierele și reîncarci folderul (Pasul 7, punctul 3) de fiecare dată când actualizezi landing page-ul.

Rezolvarea problemelor

• Pagina se vede fără imagini → ai încărcat doar index.html în loc de întregul folder. Reîncarcă folderul complet (Pasul 5).
• Formularul nu apare → lipsește <div class="lp-form-container"></div> din HTML, sau blocul tracker nu e înainte de </body> (Pasul 4).
• Lead-ul nu ajunge / "neautorizat" → apiKey greșit, sau lăsat ca API_KEY_UL_TAU (Pasul 4).
• După trimitere ajung pe o pagină 404 → thankYouPage nesetat sau adresă greșită (Pasul 7).
• Domeniul nu se deschide → certificatul SSL poate dura câteva minute după conectarea domeniului (Pasul 6); încearcă din nou în scurt timp.