Publier une landing HTML sur Cloudflare Workers

Étape 1 — Ce qu'il vous faut avoir prêt

Avant de commencer, réunissez trois choses :

• Un domaine — acheté où vous voulez (Namecheap, GoDaddy, etc.). Pas besoin qu'il soit déjà sur Cloudflare : on le déplace à l'Étape 2.
• Votre landing en HTML, dans un dossier sur votre PC. Il contient typiquement :
  • le fichier index.html (la page)
  • un dossier images/ avec les images
• Un compte RoyLead sur lequel vous êtes connecté.

💡 Vous n'avez pas encore la landing ? Créez-la avec l'IA en un rien de temps : Créer une landing HTML avec Claude ou ChatGPT ↗. Revenez ici avec le dossier prêt.

💡 Tout le code de tracking RoyLead va à l'intérieur de index.html (on le voit à l'Étape 4) : aucun fichier de configuration séparé n'est nécessaire.

💡 Gardez tous les fichiers dans un seul dossier : c'est celui qu'on uploadera sur Cloudflare à l'Étape 5. Si les images sont dans un sous-dossier images/, vérifiez que le HTML les référence avec le bon chemin (ex. images/photo.jpg).

Étape 2 — Préparez le domaine (deux choses)

Votre domaine doit être prêt sur deux fronts. Ce sont deux guides à part entière — faites les deux, puis revenez ici :

1. Sur Cloudflare — le domaine doit être géré par Cloudflare (nameservers pointés), pour qu'on puisse y héberger la landing. → Ajouter un domaine à Cloudflare ↗
2. Sur RoyLead — le domaine doit être ajouté et vérifié dans RoyLead, pour que les leads et les conversions soient attribués correctement. → Comment connecter un nouveau domaine ↗

💡 Les deux s'emboîtent bien : l'enregistrement de vérification que RoyLead vous demande (un TXT) s'ajoute directement dans le DNS de Cloudflare, où vous gérez désormais le domaine. Pour le type de site, choisissez HTML / Custom.

💡 Si le domaine est déjà actif sur Cloudflare et vérifié dans RoyLead, passez directement à l'Étape 3.

Revenez ici une fois le domaine Actif sur Cloudflare et Vérifié dans RoyLead.

Étape 3 — Créez la landing dans RoyLead et récupérez les clés

On récupère ici les deux valeurs qu'utilisera le tracker : le Landing Page ID et votre API Key.

1. Dans le menu, allez sur Landing Pages et cliquez sur Connecter une landing HTML.
2. Remplissez Nom (ex. "Promo Été") et URL (le chemin qu'elle aura sur votre domaine, ex. https://votredomaine.com/promo), sélectionnez le domaine et enregistrez.
3. Dans la liste, à côté de la landing, cliquez sur l'icône de copie près de son ID pour copier le Landing Page ID. Gardez-le de côté.

4. Allez dans Paramètres → API Key et copiez la clé avec l'icône de copie à côté (ou cliquez sur Régénérer l'API Key pour en générer une nouvelle).

🔒 L'API Key identifie votre compte : ne la partagez pas. Si vous la régénérez, vous devrez la mettre à jour dans les landings qui l'utilisent.

À la fin de cette étape, vous avez en main deux choses : le Landing Page ID et l'API Key. Vous en avez besoin des deux à l'Étape 4.

Étape 4 — Collez le tracker dans `index.html`

C'est le seul morceau de "code", mais c'est du copier-coller. Ouvrez index.html avec un éditeur de texte (VS Code, Notepad++, même le Bloc-notes conviennent).

1. Là où vous voulez le formulaire → placez ceci là où le formulaire doit apparaître (à plusieurs endroits de la page aussi) :

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

Le formulaire est dessiné et stylé par le tracker lui-même : vous placez juste le conteneur, où vous préférez.

2. Juste avant </body> → collez le bloc tracker et remplissez-le avec les données de l'Étape 3 :

<!-- RoyLead Tracker -->
<script>
  window.RoyLeadConfig = {
    captureUrl: "https://capture.roylead.com",
    apiKey: "VOTRE_API_KEY",
    landingPageId: "ID_DE_VOTRE_LANDING",
    thankYouPage: "https://votredomaine.com/chemin/merci"
  };
</script>
<script src="https://capture.roylead.com/tracker.js"></script>

3. Enregistrez le fichier.

⚠️ Trois choses auxquelles faire attention : remplacez VOTRE_API_KEY par la clé de l'Étape 3, ID_DE_VOTRE_LANDING par l'ID copié depuis la liste, et n'oubliez pas la virgule à la fin de chaque ligne à l'intérieur des accolades (sauf la dernière).

💡 Si votre index.html a déjà d'autres scripts (bannière cookies, pixels, etc.), pas de problème : ce qui compte, c'est que le bloc RoyLead Tracker soit avant </body>. On prépare la page indiquée dans thankYouPage à l'Étape 7.

Étape 5 — Créez le Worker et uploadez les fichiers sur Cloudflare

Maintenant on met les fichiers en ligne sur votre compte Cloudflare. Pas de terminal, pas de GitHub : vous uploadez simplement le dossier.

1. Sur dash.cloudflare.com, dans le menu de gauche ouvrez Compute (Workers) et cliquez sur Créer.
2. Sur l'écran "Ship something new", choisissez la dernière option : Upload your static files.

3. L'écran "Uploader et déployer" s'ouvre. Dans le cadre, cliquez sur dossier (ou glissez-déposez) et sélectionnez le dossier entier de votre landing — ainsi index.html et le sous-dossier images/ sont uploadés ensemble, avec la bonne structure.

⚠️ Uploadez le dossier, pas seulement index.html : sinon les images (qui se trouvent dans images/) ne sont pas uploadées et la page s'affiche sans photos.

4. Cloudflare liste tous les fichiers uploadés (index.html + le dossier images/) et suggère un nom de Worker déjà prêt : vous pouvez le laisser tel quel. Cliquez sur Déployer.

5. En quelques secondes, la landing est en ligne à une adresse Cloudflare du type nom-worker.votre-sous-domaine.workers.dev. Vous pouvez déjà l'ouvrir avec Visiter pour vérifier qu'elle s'affiche bien.

💡 Cette adresse .workers.dev fonctionne mais ce n'est pas votre domaine. À l'Étape 6, on connecte votre vrai domaine.

Étape 6 — Connectez votre domaine au Worker

Maintenant on fait servir la landing sur votre adresse. Sur la page du Worker, ouvrez l'onglet Domaines.

Dans "Domaines personnalisés et routes", cliquez sur Ajouter un domaine.

💡 Utilisez Ajouter un domaine (domaine personnalisé), pas "Ajouter une route" : le domaine personnalisé sert la landing proprement, avec les images qui fonctionnent tout de suite.

La fenêtre "Connecter le domaine" s'ouvre avec la liste de vos domaines sur Cloudflare. Choisissez le domaine sur lequel vous voulez publier.

💡 Astuce : connectez la landing à un sous-domaine dédié, ex. promo.votredomaine.com, plutôt qu'au domaine "nu". Vous pouvez ainsi publier plusieurs landings sur le même domaine (une par sous-domaine : promo., soldes., etc.) et chacune reste indépendante.

La fenêtre "Connecter à votredomaine.com" s'ouvre : dans le champ Sous-domaine (facultatif), tapez le sous-domaine que vous voulez (ex. promo → devient promo.votredomaine.com). Si vous le laissez vide, c'est le domaine nu qui est utilisé. Puis cliquez sur Ajouter un domaine.

Fait : le domaine apparaît dans la liste "Domaines personnalisés et routes" avec l'environnement Production. En quelques minutes (le temps du certificat SSL), votre landing est en ligne à votre adresse.

💡 L'adresse de votre landing est désormais le sous-domaine (ex. https://promo.votredomaine.com). Gardez-le en tête : vous en avez besoin pour la page de remerciement (Étape 7) et pour les tests.

Étape 7 — Page de remerciement

Après l'envoi du formulaire, l'utilisateur doit atterrir sur une page "Merci" : c'est nécessaire pour l'expérience utilisateur et parce que RoyLead utilise cette URL comme référence de la conversion. Comme vous hébergez vous-même les fichiers, vous placez la page dans le même dossier :

1. Créez un fichier merci.html dans le dossier de la landing (une page simple suffit : "Merci ! Nous vous contactons sous peu").
2. Dans le bloc tracker à l'intérieur de index.html (Étape 4), réglez thankYouPage sur l'adresse réelle de votre sous-domaine :

thankYouPage: "https://promo.votredomaine.com/merci.html"

3. Ré-uploadez le dossier mis à jour vers le Worker : depuis la page du Worker, cliquez sur New deployment → Upload your static files et glissez à nouveau le dossier (maintenant avec index.html mis à jour + merci.html).

⚠️ Sans thankYouPage réglé sur une page réelle, après l'envoi l'utilisateur atterrit sur une adresse qui n'existe pas (404). Mettez toujours une vraie page à vous.

Étape 8 — Vérification finale

Presque terminé. Vérifions que tout fonctionne :

1. Ouvrez la landing à votre adresse (ex. https://promo.votredomaine.com). Pour tester le tracking, ajoutez un paramètre à l'URL, ex. ?fbclid=test123&utm_source=facebook.
2. Vérifiez que les images s'affichent et que le formulaire apparaît là où vous avez placé le <div class="lp-form-container">.
3. Remplissez et envoyez le formulaire de test : vous devez atterrir sur la page de remerciement.
4. Allez sur RoyLead → Leads : le lead de test doit y apparaître (avec les paramètres de campagne, si vous les avez ajoutés à l'URL).

Aller sur Leads ↗

💡 Si le lead arrive et que vous voyez les paramètres dans Leads, l'intégration est complète. À partir de là, il vous suffit de changer les fichiers et de ré-uploader le dossier (Étape 7, point 3) chaque fois que vous mettez à jour la landing.

Résolution de problèmes

• La page s'affiche sans images → vous avez uploadé seulement index.html au lieu du dossier entier. Ré-uploadez le dossier complet (Étape 5).
• Le formulaire n'apparaît pas → le <div class="lp-form-container"></div> manque dans le HTML, ou le bloc tracker n'est pas avant </body> (Étape 4).
• Le lead n'arrive pas / "non autorisé" → apiKey incorrecte, ou laissée comme VOTRE_API_KEY (Étape 4).
• Après l'envoi, j'obtiens une page 404 → thankYouPage non réglé ou adresse incorrecte (Étape 7).
• Le domaine ne s'ouvre pas → le certificat SSL peut prendre quelques minutes après la connexion du domaine (Étape 6) ; réessayez sous peu.