Кастомизация Landing¶

Внешний вид страницы проверки SmartBot Protection можно изменить с помощью собственного HTML-шаблона. Настройки позволяют изменить тексты, цвета, шрифты, изображения и подключить аналитику, сохранив работу механизма проверки.

Если шаблон не изменять, страница сохраняет стандартный внешний вид.

Какой шаблон используется¶

Шаблон задаётся параметром landing_page в конфигурационном файле ноды:

/opt/wallarm/etc/antibot/config

По умолчанию используется файл:

/opt/wallarm/etc/antibot/html/landing.html

В том же каталоге находится файл landing.html.example с поясняющими комментариями.

Порядок настройки¶

1. Скопируйте шаблон по новому пути.

   Используйте копию файла landing.html или landing.html.example. Штатный файл изменять не требуется.

   Если используете landing.html.example, после внесения изменений удалите поясняющие комментарии, иначе они будут доступны пользователям.

2. Внесите изменения в копию.

   Доступные настройки и ограничения описаны ниже.

3. Настройте права доступа для процессов nginx/angie.

   Назначьте файлу группу wallarm и права 0640:

   chown :wallarm /path/to/custom-landing.html
   chmod 0640 /path/to/custom-landing.html
   

   Все вышестоящие каталоги в пути к файлу должны быть доступны процессам nginx/angie для поиска (бит x). Иначе файл не откроется даже при корректных правах доступа.

   Проверьте права на всём пути:

   namei -l /path/to/custom-landing.html
   

   При необходимости настройте права доступа к каталогам:

   chmod o+x /path /path/to
   

4. Укажите новый путь в конфигурации.

   В файле /opt/wallarm/etc/antibot/config задайте новое значение параметра landing_page.

Навигация по шаблону¶

Связанные настройки отмечены тегами в комментариях. Чтобы найти нужный блок, используйте поиск по файлу.

Что можно изменять¶

В шаблоне допускается изменять:

• Тексты заголовков и описаний.
• Значения CSS-переменных в #custom-styles.
• Значения переменных тёмной темы.
• Шрифт.
• Цвет и изображение фона.
• SVG-изображения с сохранением указанных классов.
• Favicon.
• Код аналитики в предусмотренных местах.

Не изменяйте идентификаторы экранов, служебные классы, элемент altcha-widget и стили внутри #layout. Эти части используются кодом агента и отвечают за расположение элементов, адаптивность и переключение экранов.

Заголовок вкладки¶

Найдите тег #page-header и измените текст заголовка страницы.

Этот текст отображается во вкладке браузера.

Тема страницы¶

Режим темы задаётся в блоке #page-theme:

const theme = 'light';

Поддерживаются три значения:

По умолчанию используется light.

Постоянная тёмная тема¶

1. Укажите const theme = 'dark'.

2. Раскомментируйте блок html[data-theme='dark'].

3. Укажите в нём необходимые значения CSS-переменных.

Автоматическая тема¶

1. Укажите const theme = 'auto'.

2. Раскомментируйте и настройте блок html[data-theme='dark'].

Если переменные тёмной темы не заданы, атрибут темы изменится, но страница продолжит использовать значения светлой темы из :root.

Подключение шрифта¶

Настройки шрифта отмечены тегом #custom-font.

Шрифт с CDN¶

Раскомментируйте предварительную загрузку шрифта и замените адрес файла.

Затем раскомментируйте @font-face и укажите тот же адрес:

@font-face {
    font-family: 'CustomFont';
    src: url('https://cdn.example.com/fonts/CustomFont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

Для загрузки шрифта с CDN необходимы:

• HTTPS.
• Разрешение CORS на сервере шрифта.
• Разрешение домена CDN в директиве CSP font-src, если используется CSP.

Шрифт отдельным файлом¶

Файл шрифта можно разместить в каталоге fonts рядом с итоговым HTML-файлом:

landing.html
fonts/
└── CustomFont.woff2

В @font-face укажите относительный путь:

src: url('./fonts/CustomFont.woff2') format('woff2');

Сервер должен отдавать файл по указанному адресу.

Применение шрифта¶

В блоке #custom-styles измените переменную:

--font-family: 'CustomFont', system-ui, sans-serif;

Значение CustomFont должно совпадать со значением font-family в @font-face.

Значения system-ui и sans-serif задают резервный системный шрифт на случай, если пользовательский шрифт не загрузится.

Favicon¶

Найдите тег #favicon. По умолчанию PNG-иконка встроена непосредственно в атрибут href.

Чтобы использовать отдельный файл, измените значение href. При необходимости также измените атрибуты type и sizes.

Сервер должен отдавать файл по указанному адресу.

Основные стили¶

Изменяемые CSS-переменные находятся в :root после тега #custom-styles.

Общие настройки¶

Пример настройки фонового изображения:

--page-background-color: #ffffff;
--page-background-image: url('./background.png');
--page-background-position: center;
--page-background-size: cover;
--page-background-repeat: no-repeat;

Экран без JavaScript¶

Экран без cookies¶

CAPTCHA¶

Тексты и изображения экранов¶

Экран без JavaScript (#noscript)¶

Экран отображается, когда JavaScript отключён в браузере.

Можно изменить:

• SVG-изображение.
• Заголовок.
• Текст описания.

При замене изображения необходимо сохранить класс noscript__icon.

Экран проверки соединения (#landing)¶

Экран отображается во время проверки безопасности соединения.

Можно изменить:

• SVG-индикатор загрузки.
• Текст описания.

При замене индикатора необходимо сохранить класс landing__spinner.

Идентификатор секции id="landing" изменять нельзя.

Экран без cookies (#nocookies)¶

Экран отображается, когда cookies отключены в браузере.

Можно изменить:

• SVG-изображение.
• Заголовок.
• Текст описания.

При замене изображения необходимо сохранить класс nocookies__icon.

Идентификатор секции id="nocookies" изменять нельзя.

Экран ошибки (#error)¶

Экран отображается при ошибке в работе агента.

Можно изменить:

• SVG-изображение.
• Стандартный текст ошибки.

При замене изображения необходимо сохранить класс error__icon.

Не изменяйте идентификаторы:

• id="error".
• id="error-description".

Эти идентификаторы используются кодом агента.

Экран дополнительной проверки (#captcha)¶

Экран отображается, когда пользователю требуется дополнительная проверка.

SVG-логотип рядом с виджетом можно заменить, сохранив класс captcha__logo.

Не удаляйте и не переименовывайте:

• Секцию id="captcha".
• Элемент altcha-widget.
• Класс captcha__widget.
• Атрибуты hidefooter, hidelogo и language.

Аналитика¶

Для подключения аналитики предусмотрены два места с тегом #analytics:

1. Основной JavaScript-код.

2. Код для браузеров без JavaScript.

В шаблоне приведён закомментированный пример Яндекс Метрики.

Для подключения замените XXXXXXXX на номер счётчика во всех местах шаблона и раскомментируйте основной JavaScript-код.