/
Редактирование внешнего вида LGT при помощи HTML, CSS, JavaScript

Редактирование внешнего вида LGT при помощи HTML, CSS, JavaScript

UA

US

RU

UA

US

RU

1. Введение

Определение

«Редактирование внешнего вида LGT через HTML/CSS/JavaScript» — функциональность платформы Leeloo.AI, позволяющая через «Пользовательский HTML-блок» добавлять кастомный код для изменения внешнего вида форм, виджетов и всплывающих окон LGT на вашем сайте. Используется на стадиях Привлечение (Attract) и Вовлечение (Engage) — превращает стандартный LGT в брендированный лендинг с анимациями и интерактивными элементами.

Контекст: блок добавляется во вкладке «Содержимое» через + Блок → Пользовательский HTML-блок. Код выполняется в браузере подписчика. Платформа предоставляет 10 готовых шаблонов для типовых задач (кнопки, карусели, таймеры, FAQ-блоки).

B2B оператор (маркетолог, web-дизайнер или разработчик) копирует код шаблона, вставляет в LGT, при необходимости настраивает параметры (цвета, тексты, даты, ссылки). Может комбинировать несколько шаблонов на одном LGT.

B2C клиент (потенциальный подписчик) видит на LGT кастомизированный интерфейс — анимированные кнопки, карусели, таймеры обратного отсчёта. Это повышает время на странице и конверсию.

К Client's Card напрямую ничего не пишется — кастомизация работает на клиентской стороне. Однако повышение CTR и Conversion Rate LGT отражается в Analytics платформы.

После ознакомления вы поймёте:

  • как добавить «Пользовательский HTML-блок» в LGT;

  • какие 10 готовых шаблонов доступны и для каких задач каждый из них;

  • как кастомизировать кнопку оффера (статичная и анимированная);

  • как использовать карусели и слайдеры для нескольких предложений;

  • как настроить таймер обратного отсчёта до даты вебинара или акции;

  • как реализовать интерактивные элементы (кнопка копирования, раскрывающиеся блоки, карточки).

Назначение

«Редактирование внешнего вида LGT через HTML/CSS/JS» — главный механизм визуальной кастомизации мини-лендинга под бренд, превращающий типовой LGT в уникальный конверсионный инструмент.

Привлечение (Attract): анимированные CTA, светящиеся кнопки, эффект бегущего блика и таймер обратного отсчёта повышают визуальный вес действия и создают urgency. Брендирование под основной сайт снижает диссонанс перехода с рекламы. Задача — повышать CTR и Conversion Rate LGT через визуальное усиление точек действия.

Вовлечение (Engage): карусели, печатающий текст и раскрывающиеся блоки удерживают внимание и последовательно раскрывают ценностное предложение, FAQ снимает возражения, кнопка копирования упрощает шеринг реферальных ссылок. Задача — удерживать внимание подписчика на LGT через интерактивные элементы.

2. Как добавить внешний скрипт на LGT

  1. Откройте ваш LGT и перейдите во вкладку «Содержимое».

  2. Нажмите «+ Блок» и выберите «Пользовательский HTML-блок».

  3. Выберите один из шаблонов ниже и скопируйте код.

  4. Вставьте код во вкладку «Содержимое» в поле «HTML-код».

3. Готовые шаблоны

3.1. Кастомизированная кнопка покупки

Демо: просмотр

Описание: Этот код изменяет стандартную кнопку оффера — добавляет радужную подсветку при наведении.

Предварительная настройка LGT:

  1. Перейдите на LGT во вкладку «Содержимое».

  2. Добавьте блок «Offer button».

  3. Укажите название кнопки.

  4. Выберите предложение.

Вставьте код в поле «Пользовательский HTML-блок»:

<style> .form-button { width: 220px; height: 50px; border: none; outline: none; color: #fff; background: #111; cursor: pointer; position: relative; z-index: 0; border-radius: 10px; display: block; margin: 0 auto; } .form-button:before { content: ''; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); position: absolute; top: -2px; left:-2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity .3s ease-in-out; border-radius: 10px; } .form-button:active { color: #000 } .form-button:active:after { background: transparent; } .form-button:hover:before { opacity: 1; } .form-button:after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #111; left: 0; top: 0; border-radius: 10px; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } </style>

3.2. Анимированная кнопка покупки

Демо: просмотр

Описание: Этот код изменяет стандартную кнопку оффера — добавляет бегущий блик света поверх кнопки.

Предварительная настройка LGT:

  1. Перейдите на LGT во вкладку «Содержимое».

  2. Добавьте блок «Offer button».

  3. Укажите название кнопки.

  4. Выберите предложение.

Вставьте код в поле «Пользовательский HTML-блок»:

<style> body { background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(https://images.pexels.com/photos/2166927/pexels-photo-2166927.jpeg?cs=srgb&dl=animal-aquarium-aquatic-2166927.jpg&fm=jpg) no-repeat center center/cover; font-family: Arial, Helvetica, sans-serif; } .form-button { text-decoration: none; border: 1px solid rgb(146, 148, 248); position: relative; overflow: hidden; } .form-button:before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(146, 148, 248, 0.4), transparent); animation: moving-light 2s infinite linear; } @keyframes moving-light { 0% { left: -100%; } 100% { left: 100%; } } </style>

3.3. Карусель

Демо: просмотр

Описание: Этот код создаёт интерактивный слайдер с тремя шагами. Каждый слайд содержит иконку, заголовок и описание. Пользователь может переключаться между слайдами с помощью стрелок.

Вставьте код в поле «Пользовательский HTML-блок»:

<style> .container { position: relative; width: 385px; margin: 0 auto; } .step { background: white; padding: 20px; text-align: center; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: opacity 0.5s, transform 0.5s; } .icon { font-size: 40px; margin-bottom: 10px; } .title { font-size: 18px; font-weight: bold; color: #2c3e50; margin-bottom: 10px; } .description { font-size: 14px; color: #7f8c8d; } .hidden { opacity: 0; transform: scale(0.9); } .visible { opacity: 1; transform: scale(1); } .arrow { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; background: black; width: 14px; height: 14px; border: none; clip-path: polygon(100% 50%, 0 100%, 0 0); } .arrow-left { left: -20px; transform: translateY(-50%) rotate(180deg); } .arrow-right { right: -20px; } </style> <div class="container"> <div class="arrow arrow-left" onclick="prevSlide()"></div> <div class="step visible" id="slide"> <div class="icon">📲</div> <div class="title"></div> <div class="description"></div> </div> <div class="arrow arrow-right" onclick="nextSlide()"></div> </div> <script> const slidesData = [ { icon: "📲", title: "Why Crypto Investments Are #1 Opportunity? 🚀", description: "<p>🔹 Cryptocurrency is the financial future!</p>" }, { icon: "💳", title: "What Will You Learn in the Course? 🎓", description: "<p>✅ How to buy and sell cryptocurrency without risks</p>" }, { icon: "🌍", title: "The Course Starts Soon! ⏳", description: "<p>📅 The course starts on February 25, 2025!</p>" } ]; let currentSlide = 0; const slideElement = document.getElementById('slide'); function updateSlide() { slideElement.classList.remove('visible'); slideElement.classList.add('hidden'); setTimeout(() => { const data = slidesData[currentSlide]; slideElement.querySelector('.icon').textContent = data.icon; slideElement.querySelector('.title').textContent = data.title; slideElement.querySelector('.description').innerHTML = data.description; slideElement.classList.remove('hidden'); slideElement.classList.add('visible'); }, 500); } function nextSlide() { currentSlide = (currentSlide + 1) % slidesData.length; updateSlide(); } function prevSlide() { currentSlide = (currentSlide - 1 + slidesData.length) % slidesData.length; updateSlide(); } updateSlide(); </script>

3.4. Печатающий текст

Демо: просмотр

Описание: Этот код создаёт анимированный текстовый блок с эффектом «печати», который плавно выводит заголовок и описание. Анимация начинается автоматически при загрузке страницы.

Вставьте код в поле «Пользовательский HTML-блок»:

<style> .container { position: relative; width: 385px; margin: 0 auto; } .step { background: white; padding: 20px; text-align: center; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .icon { font-size: 40px; margin-bottom: 10px; } .title { font-size: 18px; font-weight: bold; color: #2c3e50; margin-bottom: 10px; } .description { font-size: 14px; color: #7f8c8d; min-height: 80px; } </style> <div class="container"> <div class="step" id="slide"> <div class="icon">📲</div> <div class="title" id="title"></div> <div class="description" id="description"></div> </div> </div> <script> const slideData = { icon: "📲", title: "Why Crypto Investments Are #1 Opportunity? 🚀", description: "🔹 Cryptocurrency is the financial future!\n\n🔹 Bitcoin, Ethereum, altcoins.\n\n🔹 No experience? No problem!\n\n📢 Don't wait!" }; document.querySelector(".icon").textContent = slideData.icon; function typeEffect(element, text, speed, callback) { let i = 0; function type() { if (i < text.length) { element.innerHTML += text.charAt(i); i++; setTimeout(type, speed); } else if (callback) { callback(); } } type(); } function startTyping() { document.getElementById("title").innerHTML = ""; document.getElementById("description").innerHTML = ""; typeEffect(document.getElementById("title"), slideData.title, 50, () => { typeEffect(document.getElementById("description"), slideData.description, 30); }); } startTyping(); </script>

3.5. Бегущая строка

Демо: просмотр

Описание: Этот код создаёт бегущую строку с анимацией, плавно перемещающей текст справа налево.

Вставьте код в поле «Пользовательский HTML-блок»:

<style> .container { position: relative; width: 385px; margin: 0 auto; overflow: hidden; white-space: nowrap; } .marquee { display: inline-block; font-size: 18px; font-weight: bold; color: #2c3e50; animation: marquee 10s linear infinite; } @keyframes marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } } </style> <div class="container"> <div class="marquee">Why Crypto Investments Are #1 Opportunity? 🚀 Cryptocurrency is the financial future!</div> </div>

3.6. Таймер отсчёта

Демо: просмотр

Описание: Этот код создаёт таймер, который отсчитывает время до определённой даты. Таймер отображает количество оставшихся дней, часов, минут и секунд, обновляя информацию каждую секунду.

Вставьте код в поле «Пользовательский HTML-блок»:

<style> .timer { display: flex; justify-content: space-between; align-items: center; margin: 20px auto; padding: 10px; background: #f7f7f7; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); width: 350px; text-align: center; } .timer .time-section { flex: 1; } .timer .time { font-size: 24px; font-weight: bold; color: #2c3e50; } .timer .label { display: block; font-size: 12px; color: #7f8c8d; } </style> <div class="timer" id="timer"> <div class="time-section"><span class="time" id="days">00</span><span class="label">Дни</span></div> <div class="time-section"><span class="time" id="hours">00</span><span class="label">Часы</span></div> <div class="time-section"><span class="time" id="minutes">00</span><span class="label">Минуты</span></div> <div class="time-section"><span class="time" id="seconds">00</span><span class="label">Секунды</span></div> </div> <script> const targetDate = new Date("2025-02-25T00:00:00"); function updateTimer() { const now = new Date(); const diff = targetDate - now; if (diff <= 0) { document.getElementById('days').textContent = "00"; document.getElementById('hours').textContent = "00"; document.getElementById('minutes').textContent = "00"; document.getElementById('seconds').textContent = "00"; return; } const days = Math.floor(diff / (1000 * 60 * 60 * 24)); const hours = Math.floor((diff / (1000 * 60 * 60)) % 24); const minutes = Math.floor((diff / (1000 * 60)) % 60); const seconds = Math.floor((diff / 1000) % 60); document.getElementById('days').textContent = days < 10 ? "0" + days : days; document.getElementById('hours').textContent = hours < 10 ? "0" + hours : hours; document.getElementById('minutes').textContent = minutes < 10 ? "0" + minutes : minutes; document.getElementById('seconds').textContent = seconds < 10 ? "0" + seconds : seconds; } updateTimer(); setInterval(updateTimer, 1000); </script>

3.7. Вертикальная карусель

Демо: просмотр

Описание: Этот код создаёт вертикальный карусельный слайдер с 7 элементами, который автоматически прокручивает текстовые сообщения. Каждое сообщение появляется с анимацией, создавая динамичное и плавное отображение.

Вставьте код в поле «Пользовательский HTML-блок»:

<style> *, *::before, *::after { box-sizing: border-box; } .font { color: #fff; } .wrapper { background: #1C1C1C; height: 600px; width: 450px; display: flex; justify-content: center; align-items: center; border-radius: 20px; } .carousel { position: relative; width: 100%; max-width: 500px; display: flex; justify-content: center; flex-direction: column; } .carousel__item { display: flex; align-items: center; position: absolute; width: 100%; padding: 0 12px; opacity: 0; filter: drop-shadow(0 2px 2px #555); will-change: transform, opacity; animation: carousel-animate-vertical 27s linear infinite; color: rgb(0, 0, 0); } .carousel__item:nth-child(n) { animation-delay: calc(3s * (var(--index) - 1)); } .carousel__item-head { border-radius: 50%; background-color: #d7f7fc; width: 90px; height: 90px; padding: 14px; display: flex; align-items: center; justify-content: center; font-size: 50px; } .carousel__item-body { width: 100%; background-color: #fff; border-radius: 20px; padding: 16px 20px 16px 20px; color: rgb(0, 0, 0); } .title { text-transform: uppercase; font-size: 20px; margin-top: 10px; } @keyframes carousel-animate-vertical { 0% { transform: translateY(-100%) scale(0.5); opacity: 0; visibility: hidden; } 3%, 11.11% { transform: translateY(-100%) scale(0.7); opacity: 0.4; visibility: visible; } 14.11%, 22.22% { transform: translateY(0) scale(1); opacity: 1; visibility: visible; } 25.22%, 33.33% { transform: translateY(100%) scale(0.7); opacity: 0.4; visibility: visible; } 36.33% { transform: translateY(100%) scale(0.5); opacity: 0; visibility: visible; } 100% { transform: translateY(100%) scale(0.5); opacity: 0; visibility: hidden; } } </style> <div class='wrapper'> <div class='carousel'> <div class='carousel__item' style='--index:1'><div class='carousel__item-body'><p>Cryptocurrency is a digital asset that uses cryptography for secure transactions.</p></div></div> <div class='carousel__item' style='--index:2'><div class='carousel__item-body'><p>Blockchain ensures transparency and security in cryptocurrency transactions.</p></div></div> <div class='carousel__item' style='--index:3'><div class='carousel__item-body'><p>Mining is the process of verifying transactions on the blockchain.</p></div></div> <div class='carousel__item' style='--index:4'><div class='carousel__item-body'><p>DeFi allows users to perform financial operations without banks.</p></div></div> <div class='carousel__item' style='--index:5'><div class='carousel__item-body'><p>NFTs are unique digital assets that verify ownership of digital content.</p></div></div> <div class='carousel__item' style='--index:6'><div class='carousel__item-body'><p>The metaverse is a virtual space where people interact through avatars.</p></div></div> <div class='carousel__item' style='--index:7'><div class='carousel__item-body'><p>Crypto trends for 2025 include stablecoins, Layer-2, DeFi, integration with traditional finance.</p></div></div> </div> </div>

3.8. Кнопка копирования

Демо: просмотр

Описание: Этот код создаёт стильную кнопку, при нажатии на которую копируется текст в буфер обмена. Используется для реферальных ссылок или промокодов.

Вставьте код в поле «Пользовательский HTML-блок»:

<style> .button-container { position: relative; display: flex; flex-direction: column; align-items: center; } .copy-button { display: flex; align-items: center; justify-content: center; background-color: #0c0c0c; color: white; font-size: 18px; font-weight: bold; padding: 15px 25px; border: none; border-radius: 10px; cursor: pointer; text-decoration: none; width: 350px; position: relative; z-index: 1; box-shadow: 0 10px 20px rgba(39, 39, 39, 0.9); transition: transform 0.2s ease-in-out; } .copy-button:hover { background-color: #020202; } .copy-button img { width: 24px; height: 24px; margin-right: 10px; } .notification { display: none; margin-top: 10px; font-size: 16px; color: green; } </style> <div class="button-container"> <button class="copy-button" id="copyButton"> <img src="https://img.icons8.com/ios-filled/50/ffffff/telegram.png" alt="Telegram"> Copy Referral Link 📋 </button> <div id="notification" class="notification">Link copied! ✅</div> </div> <script> document.getElementById('copyButton').addEventListener('click', function() { const referralLink = 'https://t.me/your_channel?ref=your_referral_code'; navigator.clipboard.writeText(referralLink).then(function() { const notification = document.getElementById('notification'); notification.style.display = 'block'; setTimeout(function() { notification.style.display = 'none'; }, 2000); }).catch(function(err) { console.error('Не удалось скопировать ссылку: ', err); }); }); </script>

3.9. Раскрывающийся текст

Демо: просмотр

Описание: Этот код создаёт страницу с несколькими стильными кнопками-заголовками. При клике на заголовок соответствующий блок с контентом плавно раскрывается, благодаря чему текст становится видимым. Подходит для FAQ.

Вставьте код в поле «Пользовательский HTML-блок»:

<style> :root { --color-bg: #34304c; --color-bg2: #534d7a; --color-highlight: #fff; } body { padding: 7.5vh 10px 0 10px; background: var(--color-bg); color: var(--color-highlight); } .title { cursor: pointer; color: var(--color-highlight); font-weight: bold; font-size: 1.5rem; background: var(--color-bg2); padding: 0.5rem 1rem; border-radius: 8px; margin: 2px 0; display: block; text-align: center; max-width: 400px; margin-left: auto; margin-right: auto; transition: background 0.3s ease-in-out; } .title:hover { background: #675c99; } .content { display: block; margin: 10px 2px; padding: 0 10px; background: var(--color-bg2); border-left: 4px solid #2b293d; border-radius: 8px; opacity: 0; max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, padding 0.5s ease-in-out; } .content.active { opacity: 1; max-height: 500px; padding: 10px; } .title::before, .title::after { content: '↓'; margin-right: 10px; font-size: 1.2rem; } .title::after { margin-left: 10px; } </style> <h2 class="title">Code is Magic! 🧙‍♂️</h2> <div class="content"><p>Programming is an art ✨ where lines of code turn into powerful apps 🚀.</p><p>Bugs? 🐞 No worries! Debugging is our best friend 🔍.</p></div> <h2 class="title">From Idea to Reality 🚀</h2> <div class="content"><p>Coding transforms ideas into reality 🎨💡.</p></div> <h2 class="title">0s and 1s Rule the World 🌍</h2> <div class="content"><p>Behind every app, game, and website lies the power of binary 🖥️⚡.</p></div> <h2 class="title">Code, Coffee, Repeat ☕</h2> <div class="content"><p>Late nights, countless lines of code, and endless cups of coffee ☕.</p></div> <h2 class="title">Change the World with Code 💻</h2> <div class="content"><p>Every great invention starts with a single line of code 📜.</p></div> <h2 class="title">Think. Code. Innovate. 🚀</h2> <div class="content"><p>Coding is not just about writing syntax — it's about solving problems 🧩.</p></div> <h2 class="title">The Power of Programming 🖥️</h2> <div class="content"><p>Code runs the world 🌍 — from smartphones 📱 to AI 🤖.</p></div> <script> document.querySelectorAll('.title').forEach(title => { title.addEventListener('click', () => { const content = title.nextElementSibling; content.classList.toggle('active'); }); }); </script>

3.10. Блоки для текста

Демо: просмотр

Описание: Этот код создаёт страницу с несколькими карточными блоками текста, каждый со своим лейблом-меткой.

Вставьте код в поле «Пользовательский HTML-блок»:

<div class="container"> <div class="card" data-label="Java Course 🚀"> <div class="card__container"> <h1 class="card__header">Learn Java Programming ☕</h1> <p class="card__body">Master the fundamentals of Java, one of the most popular programming languages.</p> </div> </div> <div class="card" data-label="Web Development 🌍"> <div class="card__container"> <h1 class="card__header">Web Development with JavaScript</h1> <p class="card__body">Dive into front-end and back-end development with JavaScript.</p> </div> </div> <div class="card" data-label="Mobile Development 📱"> <div class="card__container"> <h1 class="card__header">Android Development with Java</h1> <p class="card__body">Learn how to create native Android applications using Java.</p> </div> </div> </div> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto&display=swap'); *, *::before, *::after{ padding: 0; margin: 0; box-sizing: border-box; } .container { margin: 10px; display: flex; justify-content: center; align-items: center; background: #f3f3f3; flex-wrap: wrap; gap: 20px; } .card { width: 25rem; border-radius: 1rem; background: white; box-shadow: 4px 4px 15px rgba(0,0,0,0.15); position: relative; color: #434343; } .card .card__container { padding: 2rem; width: 100%; height: 100%; background: white; border-radius: 1rem; position: relative; } .card .card__header { margin-bottom: 1rem; font-family: 'Playfair Display', serif; } .card .card__body { font-family: 'Roboto', sans-serif; } .card::before { position: absolute; top: 2rem; right: -0.5rem; content: ''; background: #283593; height: 28px; width: 28px; transform: rotate(45deg); } .card::after { position: absolute; content: attr(data-label); top: 11px; right: -14px; padding: 0.5rem; width: 10rem; background: #3949ab; color: white; text-align: center; font-family: 'Roboto', sans-serif; box-shadow: 4px 4px 15px rgba(26, 35, 126, 0.2); } </style>

Сопутствующие инструкции

Название инструкции

Назначение

Название инструкции

Назначение

Основные функции инструментов лидогенерации

Основные функции LGT — настройки каналов связи, чекбоксы переподписки и другие базовые параметры LGT.

https://leelooai.atlassian.net/wiki/spaces/DOC/pages/2478440506

Динамические данные в LGT — готовые JS-скрипты (дата, счётчик, таймер) без необходимости полной HTML-вёрстки.

Блок "Инструмент лидогенерации"

Блок «Инструмент лидогенерации» — где в туннеле настраивается LGT с кастомным HTML/CSS/JS.

Источники трафика (Traffic sources), UTM-метки

Источники трафика и UTM — атрибуция подписчиков, пришедших через кастомизированный LGT.

Основные термины

Термин

Пояснение

Термин

Пояснение

«Редактирование внешнего вида LGT»

Функциональность Leeloo.AI для добавления HTML/CSS/JS кода в LGT через «Пользовательский HTML-блок»; превращает стандартный LGT в брендированный лендинг.

«Пользовательский HTML-блок»

Блок в редакторе LGT во вкладке «Содержимое» для вставки кастомного HTML/CSS/JS кода.

LGT (Lead Generation Tool)

Инструмент захвата подписчика; форма, лендинг, виджет, всплывающее окно или QR-код на сайте.

Шаблон

Готовый HTML/CSS/JS код для типовой задачи (кнопка, карусель, таймер, FAQ).

Offer button

Стандартный блок LGT для кнопки оффера; модифицируется через CSS-класс .form-button.

CSS keyframes

Описание визуальной анимации через @keyframes в CSS.

Carousel / Slider

Компонент для последовательного показа слайдов (горизонтально или вертикально).

Marquee

Бегущая строка с горизонтальной анимацией текста.

Conversion Rate

Доля посетителей LGT, ставших подписчиками; ключевая метрика эффективности кастомизации.