Lestis pour les Développeurs, Analytics & Marketing

Cette section est dédiée aussi bien aux développeurs souhaitant personnaliser le design via le code, qu'à ceux voulant gérer leurs campagnes publicitaires ou intégrer des outils de web analytics.

🎨

Design Custom

📈

Analytics & ADS

🍪

Prêt pour le RGPD

Gestion des blocs de code

CSS Personnalisé

Insère tes règles de style ici. Ce bloc est injecté dans l’en-tête HTML avant tout script.


                            <style>

                              .hero-custom { ... }

                            </style>

✔ Doit contenir les balises <style>
✔ Idéal pour les overrides Tailwind

JS Global Head

Scripts chargés immédiatement. Idéal pour les bibliothèques externes ou les outils d'analyse sans consentement.


                            <script>

                              // Logique globale

                            </script>

✔ Nécessite les balises <script>
✔ Chargé avant le body

Widget JS (RGPD)

Le code inséré ici est exécuté uniquement après l'acceptation des cookies par l'utilisateur.


                            fbq('track', 'PageView');

                            gtag('event', 'conversion', {...});

                            chat.init();

❌ Ne PAS inclure de balises<script>
✔ Exécuté dans un sandbox try/catch

Comment le code est exécuté

CSS Personnalisé : Le bloc CSS est appliqué en dernier pour garantir une priorité maximale.

JS Global Head : Injecté en dernier pour pouvoir interagir avec les autres scripts chargés si besoin.

Widget JS (RGPD) :

S'exécute seulement après avoir cliqué sur "Accepter et Activer les Widgets" ou si le consentement a déjà été donné.

🚀 Essaie-le maintenant !

Copie et colle ces exemples dans tes blocs backend pour transformer instantanément le look de ton site en version "Luxury Gold".

🎨 À coller dans : CSS Personnalisé

<style>
/* Importer une police élégante */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600&display=swap');

:root {
    --primary-gold: #d4af37;
    --dark-bg: #1a1a1a;
}

/* 1. Styles globaux et polices */
body {
    font-family: 'Inter', sans-serif;
}
h1, h2, h3, .font-extrabold {
    font-family: 'Playfair Display', serif !important;
    letter-spacing: -0.02em;
}

/* 2. Menu et navigation */
header {
    background-color: var(--dark-bg) !important;
    border-bottom: 2px solid var(--primary-gold);
}
header nav a {
    font-family: 'Playfair Display', serif;
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}
header nav a:hover { color: var(--primary-gold) !important; }

/* 3. Boutons et interface */
.bg-indigo-600 {
    background-color: var(--primary-gold) !important;
    border-radius: 0px !important; /* Bords nets */
    font-family: 'Playfair Display', serif;
    transition: all 0.3s ease;
}
.bg-indigo-600:hover {
    background-color: #b8962e !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* 4. Espacement */
.container { padding-left: 2rem; padding-right: 2rem; }
main { gap: 4rem; }

/* 5. Animation du bloc contenant le code de réduction */
#winner-box {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--primary-gold);
    color: black;
    padding: 15px 25px;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 9999;
    display: none;
    font-family: 'Playfair Display', serif;
}
</style>

⚡ À coller dans : JS Global Head

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Affiche le bloc contenant le code de réduction WINNERS
    if (!document.getElementById('winner-box')) {
        const winnerBox = document.createElement('div');
        winnerBox.id = 'winner-box';
        winnerBox.innerHTML = "\u003Csmall\u003ECODE DE RÉDUCTION DE 20 % :\u003C\/small\u003E WINNERS";
        document.body.appendChild(winnerBox);

        setTimeout(() => {
            winnerBox.style.display = 'block';
            winnerBox.classList.add('animate-bounce');
        }, 1000);
    }
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Ajoute une mention de personnalisation au pied de page
    console.log("Lestis Custom Mode Active!");
    const footerConcat = document.querySelector('footer p');
    footerConcat.innerHTML += " - \u003Cb\u003EPersonnalisé avec soin\u003C\/b\u003E";
  });
</script>

⚠️ Bonnes pratiques pour les Widgets

Insère les scripts externes dans le bloc global nécessitant la balise et déplace la logique dans le bloc qui s'exécute SI ton visiteur a accepté les cookies, afin d'éviter tout problème juridique.

FAQ Développeurs

Puis-je exécuter du code côté serveur ?

Non, le code est sauvegardé en tant que chaîne et injecté directement dans l’en-tête HTML de ton site web.

Que se passe-t-il si mon script contient une erreur ?

Le code lié au consentement des cookies est enveloppé dans un bloc try-catch. L'erreur sera logguée dans la console du navigateur sans bloquer le chargement du site.

Lestis ne peut pas surveiller tous les cas de figure : l'insertion de code se fait aux risques et périls du propriétaire du site.

Lestis prend-il en charge les scripts externes (src) ?

Absolument. Dans la zone JS Head, tu peux insérer la balise classique <script src=".."></script>