Lestis for Developers, Analytics & Marketing

This section is designed for developers looking to customize design via code, as well as for those managing ad campaigns or integrating web analytics and tracking tools.

🎨

Custom Design

📈

Analytics & ADS

🍪

GDPR Ready

Code Block Management

Custom CSS

Enter your styling rules here. This block is injected into the Head before any scripts.


                            <style>

                              .hero-custom { ... }

                            </style>

✔ Must include tags <style>
✔ Perfect for Tailwind overrides

JS Global Head

Scripts loaded immediately. Ideal for external libraries or analytics that do not require consent.


                            <script>

                              // Global Logic

                            </script>

✔ Requires tags <script>
✔ Loaded before the body

GDPR JS Widget

Code entered here is executed only after the user accepts cookies.


                            fbq('track', 'PageView');

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

                            chat.init();

❌ Do NOT include tags<script>
✔ Executed in a try/catch sandbox

How the code is executed

Custom CSS: The CSS block is applied last to ensure maximum priority.

JS Global Head: Injected last so it can interact with other loaded scripts if needed.

GDPR JS Widget:

Fires only after clicking "Accept and Enable Widgets" or if consent was previously given.

🚀 Try it Now!

Copy and paste these examples into your backend blocks to instantly transform your site into a "Luxury Gold" version.

🎨 Paste in: Custom CSS

<style>
/* Import di 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. Global & Fonts */
body {
    font-family: 'Inter', sans-serif;
}
h1, h2, h3, .font-extrabold {
    font-family: 'Playfair Display', serif !important;
    letter-spacing: -0.02em;
}

/* 2. Menu & 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. Buttons & UI */
.bg-indigo-600 {
    background-color: var(--primary-gold) !important;
    border-radius: 0px !important; /* Look sharp */
    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. Spacing */
.container { padding-left: 2rem; padding-right: 2rem; }
main { gap: 4rem; }

/* 5. Winner Box Style */
#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>

⚡ Paste in: JS Global Head

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // BOX "WINNERS"
    if (!document.getElementById('winner-box')) {
        const winnerBox = document.createElement('div');
        winnerBox.id = 'winner-box';
        winnerBox.innerHTML = '<small>20% DISCOUNT CODE:</small> WINNERS';
        document.body.appendChild(winnerBox);

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

<script>
  document.addEventListener("DOMContentLoaded", function() {
    console.log("Lestis Custom Mode Active!");
    const footerConcat = document.querySelector('footer p');
    footerConcat.innerHTML += " - <b>Proudly Customized</b>";
  });
</script>

⚠️ Widget Best Practices

Place external scripts in the global block where the tag is required, and move the logic into the block that runs ONLY IF the visitor has accepted cookies, to ensure legal compliance.

Dev FAQ

Can I execute server-side code?

No, the code is saved as a string and injected directly into your website's head.

What happens if my script fails?

Code triggered by cookie consent is wrapped in a try-catch block. Errors will be logged in the browser console without breaking the site.

Lestis cannot monitor every possible edge case: inserting code is done at the site owner's own risk.

Do you support external scripts (src)?

Absolutely. In the JS Head box, you can insert the standard tag <script src=".."></script>