Назад к витрине

Игровые виджеты для сайта

Рулетки, слоты и лотереи для сбора Email и телефонов. Дарите скидки за контакты в игровой форме. Встраивается на любой сайт за 5 минут.

Превью
Поздравляем! 🎉
-15%

Большая Рулетка (Яркая)

Крупное, красочное колесо с вашими надписями. Идеально для распродаж, акций и интернет-магазинов.

const prizes = ["10%", "15%", "Беспл. Доставка", "Скидка на 2-й заказ", "Ещё раз", "Не повезло"];
function spin() { wheel.style.transform = `rotate(${deg}deg)`; }
790 ₽
Превью
Выиграно:
Скидка на 2-й заказ

Вертикальный Спиннер (Слот)

Механика "Однорукого бандита". Залипательная вертикальная прокрутка подарков. Высокая вовлеченность.

let isSpinning = false;
function spinSlot() {
  track.style.transform = `translateY(-${targetY}px)`;
}
890 ₽
Превью (8 секторов)
Ваш бонус 🎁
Бесплатная доставка

Премиум Рулетка (8 секторов)

Темный дизайн с золотом, больше вариантов призов. Идеально для инфобизнеса, услуг и премиум брендов.

<!-- 8 настраиваемых секторов -->
fetch(`https://api.telegram.org/bot${TOKEN}/sendMessage`, {
  method: 'POST',
  body: JSON.stringify({text: "Выиграл: " + prize})
});
790 ₽
Превью (Жми на билет)
15%
Увы :(
Беспл. Доставка
Твой приз: 🎉
15%

Лото (Счастливый билет)

Пользователь сам выбирает карточку, которая эффектно переворачивается. Альтернатива поднадоевшим рулеткам.

function pickCard(card) {
  card.classList.add('flipped');
  setTimeout(() => showForm(), 800);
}
890 ₽

Как интегрировать виджет на ваш сайт

Шаг 1. Распаковка архива

После успешной оплаты вас автоматически перенаправит на скачивание ZIP-архива. Распакуйте его — внутри находится файл widget-code.txt с готовым скриптом.

Шаг 2. Настройка призов и Telegram

Откройте текстовый файл. В самом начале (между тегами <script>) вы увидите блок "НАСТРОЙКИ". Измените названия призов (например, "Скидка 10%") на свои, а также впишите токен вашего Telegram-бота для получения лидов.

Шаг 3. Добавление блока на сайт

Зайдите в редактор страницы на Тильде. Нажмите "Добавить блок" -> перейдите в раздел "Другое" -> выберите блок T123 (HTML-код).

Шаг 4. Публикация

Скопируйте весь код из текстового файла, вставьте его в блок T123, нажмите "Сохранить и закрыть", а затем опубликуйте страницу. Виджет появится на сайте!

Шаг 1. Получение кода

Скачайте архив после оплаты, распакуйте его и откройте файл widget-code.txt в любом текстовом редакторе. Скопируйте всё содержимое.

Шаг 2. Настройка Telegram-уведомлений

Найдите в верхней части кода строки с настройками призов и Telegram-бота. Впишите свои токены и актуальные скидки для колеса/слота.

Шаг 3. Вставка через Elementor

Если вы используете Elementor: добавьте базовый виджет "HTML-код" в то место на странице, где должен появиться игровой виджет, и вставьте скопированный текст.

Шаг 4. Вставка через стандартный редактор (Gutenberg)

В стандартном редакторе нажмите плюсик "+" и выберите блок "Произвольный HTML". Вставьте код и нажмите кнопку "Обновить страницу".

Шаг 1. Подготовка

Откройте файл index.html (или другой нужный файл вашего сайта) в любом удобном редакторе кода (VS Code, Notepad++).

Шаг 2. Вставка кода

Скопируйте наш код из скачанного файла и вставьте его внутри тега <body>. Код полностью автономен, стили не сломают вашу верстку.

<!-- Игровой блок -->
<section id="promo-widget">
  <!-- ВСТАВИТЬ КОД ВИДЖЕТА СЮДА -->
</section>

Шаг 3. Настройка параметров

Прямо в HTML-коде найдите переменные JS, отвечающие за названия призов (массив prizes) и отправку в Telegram (TELEGRAM_BOT_TOKEN). Измените их под ваши нужды и сохраните файл.

Помощь по скриптам

ИИ-инженер подскажет, как изменить доли вероятности выигрыша или поменять цвета.

Привет! Я помогу с настройкой кода игровых виджетов. Задавайте вопросы!

Нужна разработка сложной рулетки с привязкой к базе данных или вашей CRM-системе?

Связаться с менеджером
Made on
Tilda