Внешний вид виджета dCAPTCHA и модального окна с заданием можно адаптировать под дизайн сайта с помощью data-атрибутов в контейнере dCAPTCHA.
Атрибуты задаются в контейнере с классом ddg-captcha-container
Принцип работы
- Вы добавляете в контейнер dCAPTCHA атрибуты с префиксами
data-ddg-trigger-*иdata-ddg-modal-* - Скрипт dCAPTCHA считывает их при отрисовке виджета
- Значения преобразуются в CSS-переменные внутри iframe
Атрибуты с префиксом data-ddg-trigger-* управляют внешним видом виджета с чекбоксом.
Атрибуты с префиксом data-ddg-modal-* управляют внешним видом модального окна с проверкой (вводом букв с картинки или слайдером).
Пример
<div
class="ddg-captcha-container"
data-sitekey="YOUR_SITEKEY"
data-ddg-trigger-bg="#f8fafc"
data-ddg-trigger-radius="8px"
data-ddg-trigger-label-color="#1e293b"
data-ddg-modal-bg="#ffffff"
data-ddg-modal-font-family="Inter, Arial, sans-serif"
data-ddg-modal-submit-radius="8px"
></div>
Стилизация виджета с чекбоксом
Эти атрибуты управляют внешним видом iframe с чекбоксом «Нажмите, чтобы продолжить».
| Атрибут | Описание | Значение по умолчанию |
|---|---|---|
data-ddg-trigger-border | Граница виджета | 2px solid #b9b9b9 |
data-ddg-trigger-bg | Фон виджета | #ffffff |
data-ddg-trigger-border-hover | Цвет границы виджета при наведении | #0077ff |
data-ddg-trigger-shadow | Тень виджета | none |
data-ddg-trigger-radius | Радиус скругления углов виджета | 10px |
data-ddg-trigger-font-family | Семейство шрифта виджета | "Open Sans", Arial, Helvetica, sans-serif |
data-ddg-trigger-checkbox-border | Граница чекбокса | 2px solid #b9b9b9 |
data-ddg-trigger-checkbox-border-hover | Цвет границы чекбокса при наведении | #0077ff |
data-ddg-trigger-checkbox-bg | Фон чекбокса | #ffffff |
data-ddg-trigger-checkbox-radius | Радиус скругления углов чекбокса | 5px |
data-ddg-trigger-status-size | Размер чекбокса и индикатора состояния | 35px |
data-ddg-trigger-status-loading-bg | Цвет индикатора загрузки | #0077ff |
data-ddg-trigger-status-success-bg | Цвет индикатора успешного прохождения | #00a860 |
data-ddg-trigger-label-font-family | Шрифты подписи | "Open Sans", Arial, Helvetica, sans-serif |
data-ddg-trigger-label-font-size | Размер (кегль) шрифта подписи | 14px |
data-ddg-trigger-label-font-weight | Насыщенность (вес) шрифта подписи | 400 |
data-ddg-trigger-label-line-height | Межстрочный интервал подписи | 17px |
data-ddg-trigger-label-color | Цвет подписи | #333333 |
Стилизация модального окна
Эти атрибуты управляют внешним видом всплывающего окна с ручной проверкой. Оно появляется, если браузер не прошел проверку JS challenge или если она отключена в настройках ключа.
| Атрибут | Описание | Значение по умолчанию |
|---|---|---|
data-ddg-modal-bg | Фон модального окна | #ffffff |
data-ddg-modal-border | Граница всплывающего окна | 1px solid #e7e7e7 |
data-ddg-modal-radius | Радиус скругления углов окна | 15px |
data-ddg-modal-shadow | Тень всплывающего окна | 0px 0px 10px 0px #0000001a |
data-ddg-modal-shadow-padding | Отступ для тени | 10px |
data-ddg-modal-font-family | Семейство шрифта всплывающего окна | "Open Sans", Arial, Helvetica, sans-serif |
data-ddg-modal-title-font-size | Размер шрифта заголовка | 15px |
data-ddg-modal-title-line-height | Межстрочный интервал заголовка | 20px |
data-ddg-modal-title-font-weight | Насыщенность (вес) шрифта заголовка | 600 |
data-ddg-modal-title-color | Цвет заголовка | #2b2f33 |
data-ddg-modal-label-color | Цвет подписи | #3399e0 |
data-ddg-modal-input-bg | Фон поля для ответа | #f5f5f5 |
data-ddg-modal-input-border | Граница поля | 1px solid transparent |
data-ddg-modal-input-border-focus | Граница поля при фокусе | 1px solid #d7dce0 |
data-ddg-modal-input-error-border | Граница поля при ошибке | 1px solid transparent |
data-ddg-modal-input-radius | Радиус скругления углов поля | 5px |
data-ddg-modal-input-color | Цвет текста ответа | #333333 |
data-ddg-modal-placeholder-color | Цвет заполнителя (плейсхолдера) поля | #7a7a7a |
data-ddg-modal-error-color | Цвет сообщения об ошибке | #f60416 |
data-ddg-modal-success-color | Цвет сообщения об успехе | #28a000 |
data-ddg-modal-tail-size | Размер указателя окна | 16px |
data-ddg-modal-slider-thumb-bg | Цвет ползунка слайдера | #5282ff |
data-ddg-modal-slider-thumb-bg-hover | Цвет ползунка слайдера при наведении | #4272ef |
data-ddg-modal-submit-radius | Радиус скругления углов кнопки «Продолжить» | 5px |
data-ddg-modal-image-block-radius | Радиус скругления углов картинки с заданием | 10px |