Lestis per gli Sviluppatori, Analytics & Marketing

Questa sezione è dedicata sia agli sviluppatori che desiderano personalizzare il design tramite codice, sia a chi vuole gestire in autonomia campagne pubblicitarie o integrare strumenti di web analytics e tracciamento.

🎨

Design Custom

📈

Analytics & ADS

🍪

GDPR Ready

Gestione dei blocchi di codice

Custom CSS

Inserisci qui le tue regole di stile. Questo blocco viene iniettato nell'Head prima di ogni script.


                            <style>

                              .hero-custom { ... }

                            </style>

✔ Deve contenere i tag <style>
✔ Ideale per override di Tailwind

JS Global Head

Script caricati immediatamente. Ideale per librerie esterne o analytics che non richiedono consenso.


                            <script>

                              // Logica globale

                            </script>

✔ Richiede i tag <script>
✔ Caricato prima del body

GDPR JS Widget

Il codice inserito qui viene eseguito solo dopo l'accettazione dei cookie da parte dell'utente.


                            fbq('track', 'PageView');

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

                            chat.init();

❌ NON inserire tag<script>
✔ Eseguito in una sandbox try/catch

Come viene eseguito il codice

Custom CSS: Il blocco contenente le regole CSS viene applicato come ultimo per avere la massima priorità.

Js Global Head: Viene iniettato come ultimo in modo da poter usare, se necessario, gli altri script caricati.

GDPR JS Widget:

Eseguito solo dopo il clic su "Accetta e Abilita Widget" o con consenso già ottenuto

🚀 Provalo Adesso!

Copia e incolla questi esempi nei tuoi blocchi nel backend per trasformare istantaneamente il look del tuo sito in una versione "Luxury Gold".

🎨 Da incollare in: Custom CSS

<style>
/* Importa un font elegante */
@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. Stili globali e font */
body {
    font-family: 'Inter', sans-serif;
}
h1, h2, h3, .font-extrabold {
    font-family: 'Playfair Display', serif !important;
    letter-spacing: -0.02em;
}

/* 2. Menu e navigazione */
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. Pulsanti e interfaccia */
.bg-indigo-600 {
    background-color: var(--primary-gold) !important;
    border-radius: 0px !important; /* Bordi netti */
    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. Spaziatura */
.container { padding-left: 2rem; padding-right: 2rem; }
main { gap: 4rem; }

/* 5. Animazione del riquadro con il codice sconto */
#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>

⚡ Da incollare in: JS Global Head

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Mostra il riquadro con il codice sconto WINNERS
    if (!document.getElementById('winner-box')) {
        const winnerBox = document.createElement('div');
        winnerBox.id = 'winner-box';
        winnerBox.innerHTML = "\u003Csmall\u003ECODICE SCONTO DEL 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() {
    // Aggiungi una nota di personalizzazione nel footer
    console.log("Lestis Custom Mode Active!");
    const footerConcat = document.querySelector('footer p');
    footerConcat.innerHTML += " - \u003Cb\u003EPersonalizzato con cura\u003C\/b\u003E";
  });
</script>

⚠️ Best Practices per i Widget

Inserisci gli script esterni nel blocco globale dove è necessario il tag e sposta la logica all'interno del blocco che si esegue SE il tuo visitatore ha accettato i cookie, per evitare problemi legali.

Domande Frequenti per Dev

Posso eseguire codice lato server?

No, il codice viene salvato come stringa e iniettato direttamente all'interno dell'head del tuo sito web.

Cosa succede se il mio script va in errore?

Il codice che viene eseguito se i cookie vengono accettati, o sono stati accettati precedentemente, è avvolto in un blocco try-catch. L'errore verrà loggato nella console del browser senza bloccare il caricamento del sito.

Non è possibile monitorare e gestire tutti gli errori e le casistiche da parte di Lestis: inserire del codice è a rischio e pericolo del proprietario del sito

Supportate script esterni (src)?

Certamente. Nel box JS Head puoi inserire il classico tag <script src=".."></script>