📚 Документация DEKST JS (v7.0)
DEKST — это высокотехнологичный встраиваемый JavaScript-виджет для вебмастеров. Он позволяет в пару кликов добавить на сайт праздничные эффекты (снег, гирлянды), настраиваемые маркетинговые баннеры-слайдеры и удобную панель управления для посетителей.
Архитектура скрипта работает по принципу «Слияния с приоритетом локального». Это значит, что ядро библиотеки уже содержит идеальные настройки по умолчанию. Вам не нужно копировать огромные куски кода — достаточно прописать в настройках только те параметры, которые вы хотите изменить (например, ваши ссылки или картинки).
🚀 Быстрый старт (Установка)
Для работы виджета со стандартными настройками достаточно вставить этот код перед закрывающим тегом </body>:
<script src="https://dekst.com/api/libraries/dekst/v3/dekst.js?v=7.0" async></script>Чтобы настроить виджет под себя, необходимо объявить объект window.DEKST строго до подключения самого скрипта:
<script>
window.DEKST = {
// Ваши индивидуальные настройки
slider: {
mainLink: "https://t.me/your_channel"
}
};
</script>
<!-- Подключение ядра -->
<script src="https://dekst.com/api/libraries/dekst/v3/dekst.js?v=7.0" async></script>⚙️ Справочник конфигурации (window.DEKST)
Все настройки делятся на 4 логических блока: modules, settings, slider и extensions.
1. Блок modules (Эффекты и Расписание)
Управляет включением компонентов и их автоматическим расписанием.
Форматы дат:
-
"ММ-ДД" (например, "12-15") — эффект будет включаться автоматически каждый год в этот период.
-
"ГГГГ-ММ-ДД" (например, "2026-11-20") — разовая акция в конкретном году.
modules: {
globalSnow: { enabled: true, startDate: "12-01", endDate: "02-28" }, // Снег на фоне сайта
garland: { enabled: true, startDate: "12-15", endDate: "01-15" }, // Гирлянда сверху
promoSlider: { enabled: true }, // Показывать ли блок с баннерами
fireworks: { enabled: true }, // Разрешить эффект салюта в баннерах
snow: { enabled: true }, // Разрешить эффект снега в баннерах
zoom: { enabled: true }, // Разрешить эффект приближения картинок
socials: { enabled: true } // Выводить ли кнопки соцсетей на баннере
}2. Блок settings (Внешний вид и Позиционирование)
Отвечает за визуальный стиль виджета управления и размеры баннеров.
settings: {
enableLibrary: true, // Выключатель всей библиотеки (false - отключит всё)
// --- ВИДЖЕТ УПРАВЛЕНИЯ ---
controlsTheme: "univers", // Темы: "univers" (премиальное темное стекло), "light" (светлая), "auto"
widgetPosition: "bottom-right", // Позиция на экране: "bottom-right", "bottom-left", "top-right", "top-left"
// --- ПОЗИЦИЯ БАННЕРА ---
sliderSelector: "body", // Куда встраивать баннер. По умолчанию "body" (поверх сайта). Можно указать ID своего блока (например, "#my-banner")
// --- СТИЛИ ЭФФЕКТОВ ---
globalSnowStyle: "magic", // Виды снега: "gentle", "realistic", "storm", "pixel", "magic", "heavy"
garlandStyle: "sticky", // Виды гирлянд: "sticky", "real", "warm", "vintage", "stars", "ice", "cyber"
garlandZIndex: 2147483647, // CSS z-index гирлянды
// --- РАЗМЕРЫ БАННЕРА ---
heightDesktop: "400px", // Высота на ПК
heightMobile: "250px", // Высота на телефонах
maxWidth: "1400px", // Макс. ширина контента баннера
// --- СТИЛИ ВНУТРИ БАННЕРА ---
fireworkStyle: "colorful", // Салюты: "colorful" или "gold"
snowStyle: "gentle", // Снег: "gentle" или "blizzard"
zoomStyle: "in", // Зум: "in" или "out"
}3. Блок slider (Баннеры, Тексты и Ссылки)
Управляет маркетинговой частью. Здесь используется умное наследование: параметры (ссылки или размеры шрифта), указанные конкретно для одного слайда, переопределяют общие параметры блока.
slider: {
interval: 6000, // Время показа 1 слайда (6000 = 6 сек)
mainLink: "https://mysite.com", // Глобальная ссылка (применяется ко всем картинкам, у которых нет своей ссылки)
// Глобальные размеры текста (адаптивные)
titleSize: "clamp(30px, 15vw, 30px)",
subtitleSize: "clamp(16px, 2.5vw, 20px)",
// Социальные сети (левый нижний угол)
socials:[
{
url: "https://t.me/dekst",
image: "https://mysite.com/img/telegram.svg" // Прямая ссылка на любую картинку
}
],
// --- Базовые баннеры (крутятся, когда нет активных праздников) ---
slides:[
{
url: "https://mysite.com/promo1.jpg",
effect: "zoom",
title: "ОБЫЧНАЯ АКЦИЯ",
subtitle: "Скидки 10%",
link: "https://mysite.com/sale" // Уникальная ссылка только для этого слайда
}
],
// --- Праздничные кампании (включаются строго в свои даты, перекрывая обычные slides) ---
campaigns:[
{
name: "Черная Пятница",
startDate: "11-20",
endDate: "11-30",
slides:[
{
url: "https://mysite.com/bf.jpg",
effect: "fireworks",
title: "BLACK FRIDAY",
titleSize: "60px" // Переопределит глобальный titleSize только для этого текста
}
]
}
]
}Параметры объекта отдельного слайда:
-
url (обязательный) — ссылка на фоновую картинку.
-
effect — эффект слайда ("zoom", "snow", "fireworks").
-
title — главный заголовок.
-
subtitle — подзаголовок.
-
link — уникальная ссылка при клике (если не указана, берется глобальная mainLink).
-
titleSize / subtitleSize — CSS размер шрифта (например "40px", переопределяет глобальный размер).
4. Блок extensions (API для кастомных функций)
Уникальная особенность DEKST v7.0: вы можете добавлять в меню виджета собственные переключатели, не меняя ядро библиотеки!
Виджет сам отрисует ползунок, запомнит его состояние при перезагрузке страницы и вызовет ваш код.
extensions:[
{
id: "music-player", // Уникальный ID (для сохранения в память браузера)
label: "Новогодняя музыка", // Текст ползунка
icon: "🎵", // Иконка или эмодзи
defaultState: false, // Состояние по умолчанию
// Функция вызывается при загрузке страницы и при каждом клике пользователя
onChange: function(isActive) {
let audio = document.getElementById('my-audio');
if (!audio) {
audio = document.createElement('audio');
audio.id = 'my-audio';
audio.src = 'https://mysite.com/music.mp3';
document.body.appendChild(audio);
}
if (isActive) {
audio.play();
} else {
audio.pause();
}
}
},
{
id: "dark-mode",
label: "Темная тема сайта",
icon: "🌙",
defaultState: false,
onChange: function(isActive) {
if (isActive) document.body.classList.add('dark-theme');
else document.body.classList.remove('dark-theme');
}
}
]💡 Важные особенности и FAQ
1. Почему виджет отображается в виде маленькой кнопки с надписью "▼ СВЕРНУТЬ / DEKST"?
Это эргономичное "свернутое" состояние виджета (формат таблетки), чтобы не перекрывать контент сайта. Скрипт запоминает выбор пользователя. Чтобы развернуть панель, просто кликните по свернутой кнопке.
2. Почему виджет вообще не появился на сайте?
Умная логика DEKST не показывает пустой виджет. Если на сегодняшнюю дату не запланировано ни одной кампании, отключен глобальный снег и гирлянды, а также нет активных extensions, виджет просто не загрузится, чтобы не занимать место.
3. Как встроить баннер внутрь моей статьи, а не наверх сайта?
Добавьте на свой сайт пустой div (например, <div id="my-banner"></div>), а в настройках DEKST укажите: settings: { sliderSelector: "#my-banner" }. Баннер встроится ровно в указанный блок.
4. Я поменял настройки, но на сайте ничего не изменилось.
Ваш браузер закэшировал старую версию файла.
-
В HTML-коде, где вы подключаете скрипт, измените параметр версии: <script src=".../dekst.js?v=7.1"></script>
-
Нажмите Ctrl + F5 (для Windows) или Cmd + Shift + R (для Mac), чтобы жестко сбросить кэш.
5. Защита авторских прав (Anti-cheat)
Библиотека защищена системой непрерывного мониторинга. Если скрипт обнаружит, что ссылка DEKST в виджете была удалена, скрыта через CSS (display: none, opacity: 0, font-size: 0) или изменена, работа всех эффектов будет немедленно заблокирована, а на экране появится окно о нарушении лицензии.