Slide Captcha

Принцип slide to unlock

Как работает капча.

Капча активируется автоматически при наличии параметра ?bot_check=yes в URL (по умолчанию). Пользователю нужно провести слайдер вправо до конца, чтобы подтвердить, что он человек.

Открыть с капчей

Исходный код один файл

Скачать исходный код.

Весь код капчи находится в одном файле — скачайте и подключите к Вашему сайту.

slide-captcha.js

Самодостаточный JavaScript-файл (12 KB)

Скачать JS

Пример подключения.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя страница</title>
</head>
<body>
    <h1>Добро пожаловать.</h1>

    <!-- Подключаем капчу перед закрывающим тегом body -->
    <script src="slide-captcha.js"></script>
</body>
</html>

Установка три варианта

Установка.

Вариант 1: параметры по умолчанию.

Капча активируется при ?bot_check=yes.

<!-- Добавьте скрипт перед закрывающим тегом </body> -->
<script src="slide-captcha.js"></script>

Вариант 2: капча на весь трафик.

Для активации капчи для всех посетителей без параметров в URL:

<!-- Капча будет показываться всегда -->
<script src="slide-captcha.js"
        data-captcha-param="always"
        data-captcha-key=""></script>

Вариант 3: кастомные параметры.

Используйте data-атрибуты для настройки:

<!-- Капча активируется при ?verify=true -->
<script src="slide-captcha.js"
        data-captcha-param="verify"
        data-captcha-key="true"></script>

<!-- Капча активируется при ?utm_source=ads -->
<script src="slide-captcha.js"
        data-captcha-param="utm_source"
        data-captcha-key="ads"></script>

Конфигурация data-атрибуты

Параметры конфигурации.

Атрибут	Описание
data-captcha-param	Название параметра в URL (по умолчанию `bot_check`).
data-captcha-key	Значение параметра для активации (по умолчанию `yes`).
data-ym-counter	ID счётчика Яндекс Метрики (опционально, для внешнего подключения).

Примеры URL для активации.

https://example.com/?bot_check=yes — по умолчанию.
https://example.com/page?bot_check=yes&utm_source=google
https://example.com/?verify=true — с кастомными параметрами.

Особенности что внутри

Особенности.

Минималистичный дизайн

Поддержка мыши и тач-устройств

Адаптивная вёрстка

Плавные анимации

Лёгкая настройка через конфиг

Не требует зависимостей

Интеграция с Яндекс Метрикой

Сохранение состояния в сессии

Аналитика Яндекс Метрика

Интеграция с Яндекс Метрикой.

Капча автоматически отправляет события в Яндекс Метрику, если она установлена:

captcha_shown — капча показана пользователю.
captcha_passed — пользователь успешно прошёл капчу.

Автоматическое определение счётчика.

Скрипт автоматически находит ID счётчика на странице клиента. Настройка не требуется.

Указание ID счётчика для внешнего подключения.

Если скрипт подключается с внешнего домена, укажите ID счётчика явно:

<!-- Подключение с внешнего домена -->
<script src="https://yoursite.com/slide-captcha.js"
        data-ym-counter="12345678"></script>

<!-- С дополнительными параметрами -->
<script src="https://yoursite.com/slide-captcha.js"
        data-captcha-param="bot_check"
        data-captcha-key="yes"
        data-ym-counter="12345678"></script>

Где найти ID счётчика: Яндекс Метрика → выберите сайт → ID в URL metrika.yandex.ru/dashboard?id=12345678. Создайте цели captcha_shown и captcha_passed в интерфейсе Метрики для отслеживания статистики.

Виджет работает целиком в браузере. Состояние прохождения хранится в sessionStorage и не уходит на сервер.