Свой CSS для виджета чата: как подогнать дизайн под сайт

Свой CSS для виджета чата нужен, когда виджет должен выглядеть частью лендинга, а не чужой вставкой: тот же шрифт, те же углы, а кнопка не закрывает корзину или панель «Наверх». Чат в стиле сайта вызывает больше доверия, посетитель охотнее пишет, и меньше заявок теряется. Особенно это важно агентствам и партнёрам, которые ставят онлайн-консультанта для сайта на лендинги клиентов с готовым дизайном.

Свой CSS — это поле «Свой CSS» в настройках кнопки «Чат», куда вставляются правила оформления. Они добавляются на страницу сайта вместе с виджетом и меняют окно чата и кнопки виджета так, как вы напишете. Поле принимает только стили, JavaScript в нём не работает.

Когда нужен свой CSS, а когда хватит «Оформления чата»

Если нужно только поменять цвета, CSS не нужен. Над полем есть блок «Оформление чата»: выберите тему или один свой цвет, остальные цвета подберутся автоматически и останутся читаемыми. Кнопка «Подобрать по сайту» предложит три заметных цвета с вашего лендинга.

Свой CSS нужен, когда готовых настроек не хватает:

• убрать скругления окна или сообщений;
• поставить шрифт сайта;
• поднять кнопку виджета, если внизу своя панель или кнопка «Наверх»;
• сделать окно чата шире на компьютере;
• скрыть скрепку для файлов или пульсацию вокруг кнопки.

Как добавить свой CSS в виджет

1. 1
   Откройте настройки чата

   «Виджеты» → «Редактировать» → «Кнопки виджета» → кнопка «Чат». Поле «Свой CSS» — под настройками цветов.
2. 2
   Найдите нужный элемент

   Откройте свой сайт, нажмите на виджете правой кнопкой мыши и выберите «Просмотреть код» (или F12). Класс элемента начинается с lpt-.
3. 3
   Напишите правило

   Начните селектор с префикса виджета (о нём ниже) и вставьте правило в поле «Свой CSS».
4. 4
   Сохраните настройки

   Нажмите «Сохранить изменения».
5. 5
   Обновите страницу сайта

   Лучше с очисткой кэша, Ctrl+F5. Изменения применятся сразу.

Главное правило: начинайте селектор с префикса виджета

Ваш CSS добавляется на страницу сайта целиком. Правило body { font-size: 20px; } изменит весь сайт, а не виджет. Правило #lpt-ai-overlay .lpt-ai-header { … } затронет только шапку чата. Начинайте каждый селектор с одного из префиксов:

• #lpt-ai-overlay — окно чата;
• #lpt-sw — кнопки виджета и их меню;
• #lpt-sw-callback-overlay — окно «Обратный звонок»: на странице оно лежит отдельно от кнопок.

CSS-классы окна чата

Селекторы кнопок виджета

Переменные цвета чата

Внутри окна чата доступны четыре CSS-переменные. Они берут значения из «Оформления чата»:

• --lpt-accent — основной цвет: шапка и кнопки;
• --lpt-accent-2 — второй цвет градиента шапки;
• --lpt-bubble — цвет сообщения посетителя;
• --lpt-body-bg — фон переписки.

Пользуйтесь ими вместо цвета, вписанного вручную. Тогда CSS не придётся переделывать после смены темы, и он не сломается, когда обновится вёрстка чата. Пример: #lpt-ai-overlay .lpt-ai-send { background: var(--lpt-accent, #3b82f6); }. Второе значение после запятой — запасное, на случай если цвет не задан.

Готовые примеры CSS для виджета

Шрифт должен быть уже подключён на сайте: виджет его не загружает. На телефоне окно чата открывается на весь экран, поэтому ширина и скругления окна действуют только на компьютере.

Чего нельзя вставить в поле «Свой CSS»

• JavaScript. Теги <script>, javascript: и expression() вырезаются при сохранении. Нужен свой скрипт — разместите его на самом сайте: виджет встроен в страницу, и скрипт сайта видит его элементы.
• Закрытие тега <style>. Такие конструкции тоже вырезаются. Это защита: если доступ к кабинету получит посторонний, он не сможет через настройки виджета внедрить код на ваш сайт.
• Больше 20 000 символов. Это предел длины поля.

Читайте также: виджет для сайта: установка и кнопки, AI чат-бот для сайта.