Tilda Publishing

Que fait Tilda Publishing ?

Aperçu

Tilda est un constructeur de sites web basé sur des blocs — glissez des blocs sur une page, personnalisez-les visuellement et publiez. Pas de backend à gérer, pas d'hébergement à configurer. Pour les développeurs : injectez du HTML/CSS/JS personnalisé dans n'importe quel bloc, utilisez l'API Tilda pour gérer le contenu par programmation, connectez des formulaires à n'importe quel backend et créez des intégrations personnalisées. Parfait pour les sites marketing, les landing pages et les petites boutiques e-commerce où le personnel non technique doit mettre à jour le contenu de manière autonome.

Quand l'utiliser

• Construire rapidement des sites marketing et des landing pages
• Besoin d'un CMS que le personnel non technique peut facilement mettre à jour
• Petite à moyenne e-commerce (boutique intégrée de Tilda)
• Landing pages personnalisées avec animations avancées
• Sites qui nécessitent à la fois une édition visuelle et du code personnalisé

Instructions

Structure du site

Les sites Tilda sont organisés comme suit :

• Projet → contient des pages
• Page → contient des blocs (sections)
• Bloc → section pré-conçue (hero, fonctionnalités, tarifs, galerie, etc.)
• Zero Block — bloc personnalisé où vous avez une liberté de conception totale

HTML/CSS/JS personnalisé dans les blocs

<!-- Ajoutez du code personnalisé via : Paramètres → Plus → Code HTML dans <head> ou Avant </body> -->

<!-- CSS personnalisé (head) -->
<style>
  /* Remplacer les valeurs par défaut de Tilda */
  .t-title {
    font-family: 'Inter', sans-serif !important;
  }

  /* Animations personnalisées */
  .t-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
  }
  .t-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Remplacements responsifs */
  @media (max-width: 640px) {
    .t-cover__wrapper {
      min-height: 60vh !important;
    }
  }
</style>

<!-- JavaScript personnalisé (avant </body>) -->
<script>
  // Intersection Observer pour les animations de défilement
  document.addEventListener('DOMContentLoaded', () => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
        }
      });
    }, { threshold: 0.1 });

    document.querySelectorAll('.t-animate').forEach((el) => observer.observe(el));
  });

  // Gestion de formulaire personnalisée — envoyer vers votre propre API
  document.querySelector('.t-form')?.addEventListener('submit', async (e) => {
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);

    // Envoyer à votre backend en parallèle de la gestion intégrée de Tilda
    await fetch('https://api.myapp.com/leads', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  });
</script>

Zero Block (Conception personnalisée)

Zero Block vous offre un contrôle de type Artboard — placez des éléments avec précision avec un positionnement, des animations et des points de rupture responsifs personnalisés.

<!-- Zero Block avec éléments interactifs personnalisés -->
<div class="custom-calculator" id="price-calc">
  <h3>Calculateur de prix</h3>
  <div class="calc-row">
    <label>Nombre d'utilisateurs</label>
    <input type="range" id="users" min="1" max="1000" value="10">
    <span id="users-count">10</span>
  </div>
  <div class="calc-row">
    <label>Forfait</label>
    <select id="plan">
      <option value="starter">Starter — 5$/utilisateur</option>
      <option value="pro">Pro — 12$/utilisateur</option>
      <option value="enterprise">Entreprise — 25$/utilisateur</option>
    </select>
  </div>
  <div class="calc-result">
    Total : <span id="total">50$</span>/mois
  </div>
</div>

<script>
  const prices = { starter: 5, pro: 12, enterprise: 25 };
  const usersInput = document.getElementById('users');
  const planSelect = document.getElementById('plan');

  function updatePrice() {
    const users = parseInt(usersInput.value);
    const price = prices[planSelect.value];
    document.getElementById('users-count').textContent = users;
    document.getElementById('total').textContent = '$' + (users * price).toLocaleString();
  }

  usersInput.addEventListener('input', updatePrice);
  planSelect.addEventListener('change', updatePrice);
</script>

API Tilda

// api/tilda.ts — Gérer le contenu Tilda par programmation
const TILDA_PUBLIC_KEY = process.env.TILDA_PUBLIC_KEY;
const TILDA_SECRET_KEY = process.env.TILDA_SECRET_KEY;
const BASE_URL = "https://api.tildacdn.info/v1";

// Obtenir tous les projets
async function getProjects() {
  const res = await fetch(
    `${BASE_URL}/getprojectslist/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}`
  );
  return res.json(); // { status: "FOUND", result: [{ id, title, ... }] }
}

// Obtenir toutes les pages d'un projet
async function getPages(projectId: number) {
  const res = await fetch(
    `${BASE_URL}/getpageslist/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}&projectid=${projectId}`
  );
  return res.json();
}

// Obtenir le contenu complet d'une page (HTML + CSS + JS)
async function getPageFull(pageId: number) {
  const res = await fetch(
    `${BASE_URL}/getpagefull/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}&pageid=${pageId}`
  );
  return res.json();
  // Retourne : { html, css, js, images[], title, descr, ... }
}

// Exporter la page vers votre propre hébergement
async function exportPage(pageId: number) {
  const page = await getPageFull(pageId);
  const { html, css, js } = page.result;

  // Construire HTML autonome
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <style>${css}</style>
    </head>
    <body>
      ${html}
      <script>${js}</script>
    </body>
    </html>
  `;
}

Gestion des formulaires et webhooks

// webhook/tilda-form.ts — Recevoir les soumissions de formulaires Tilda
/**
 * Configuration dans Tilda : Paramètres du bloc → Formulaire → URL du webhook
 * Tilda envoie une requête POST avec les données du formulaire à chaque soumission.
 */
export async function handleTildaForm(req: Request) {
  const formData = await req.formData();
  const data = Object.fromEntries(formData);

  // data : { Name: "Kai", Email: "[email protected]", Phone: "+1234567890", ... }

  // Enregistrer dans le CRM
  await fetch("https://api.mycrm.com/leads", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      name: data.Name,
      email: data.Email,
      phone: data.Phone,
      source: "tilda-landing",
    }),
  });

  // Envoyer à Telegram
  await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      chat_id: CHAT_ID,
      text: `🔔 Nouveau lead !\nNom : ${data.Name}\nEmail : ${data.Email}\nTéléphone : ${data.Phone}`,
    }),
  });

  return new Response("OK");
}

E-commerce (Boutique Tilda)

<!-- Améliorations personnalisées de page produit -->
<script>
  // Ajouter au panier avec gestion personnalisée
  document.addEventListener('DOMContentLoaded', () => {
    // Suivre les événements d'ajout au panier
    document.querySelectorAll('.js-store-buttons-buy-btn').forEach((btn) => {
      btn.addEventListener('click', () => {
        const productName = btn.closest('.js-product')
          ?.querySelector('.js-product-name')?.textContent;

        // Envoyer aux analytiques
        if (window.dataLayer) {
          window.dataLayer.push({
            event: 'add_to_cart',
            product_name: productName,
          });
        }
      });
    });
  });
</script>

Configuration SEO et analytiques

<!-- Ajouter dans Paramètres → Plus → Code HTML dans <head> -->

<!-- Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

<!-- Facebook Pixel -->
<script>
  !function(f,b,e,v,n,t,s){/* ... Code Facebook Pixel ... */}();
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

<!-- Données structurées personnalisées -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "My Company",
  "url": "https://mycompany.com",
  "logo": "https://mycompany.com/logo.png",
  "contactPoint": { "@type": "ContactPoint", "telephone": "+1-234-567-8900" }
}
</script>

Exemples

Exemple 1 : Construire une landing page marketing

Demande de l'utilisateur : "Crée une landing page pour un produit SaaS avec hero, fonctionnalités, tarifs, FAQ et formulaire de contact — le personnel doit pouvoir mettre à jour le texte et les images."

L'agent concevra la page avec des blocs Tilda, configurera les webhooks de formulaire, ajoutera du CSS personnalisé pour la cohérence de la marque et mettra en place le suivi analytique.

Exemple 2 : Éléments interactifs personnalisés sur Tilda

Demande de l'utilisateur : "Ajoute un calculateur de prix et un tableau de comparaison de produits interactif à notre site Tilda."

L'agent créera des mises en page Zero Block avec du HTML/JS personnalisé pour le calculateur et le tableau de comparaison, stylisés pour correspondre au thème Tilda.

Exemple 3 : Connecter les formulaires Tilda au CRM

Demande de l'utilisateur : "Envoie chaque soumission de formulaire à notre CRM et notifie l'équipe commerciale sur Telegram."

L'agent configurera les webhooks Tilda, créera une fonction serverless pour recevoir les soumissions et transmettra les données au CRM + Telegram.

Directives

• Blocs pour la structure, Zero Block pour le personnalisé — utilisez les blocs prédéfinis pour la rapidité, Zero Block pour un contrôle total
• Code personnalisé dans Paramètres — HTML dans <head> pour CSS/meta, avant </body> pour JS
• Les formulaires ont des webhooks intégrés — envoyez les soumissions à n'importe quelle URL
• L'API Tilda est en lecture seule — exportez le contenu, impossible de créer des pages via l'API
• Paramètres SEO par page — titre, description, balises OG dans les paramètres de la page
• Domaine personnalisé — pointez le DNS vers Tilda, SSL automatique
• E-commerce intégré — catalogue produits, panier, checkout, paiements
• Responsive par défaut — les blocs s'adaptent, mais testez et ajustez les points de rupture
• Le personnel peut tout modifier — texte, images, blocs, ordre des pages via l'éditeur visuel
• Export pour auto-hébergement — l'API retourne le HTML/CSS/JS complet pour un déploiement autonome
• Ne remplacez pas les classes critiques de Tilda — préfixez votre CSS personnalisé avec votre espace de nom
• Google Tag Manager — utilisez GTM pour les configurations de suivi complexes au lieu de scripts en ligne