# Свой CSS для виджета чата: как подогнать дизайн под сайт Как через поле «Свой CSS» сменить шрифт, скругления, размер окна и место кнопки виджета: классы, переменные цвета и готовые примеры. Раздел: Виджеты · Обновлено: 2026-11-10 · http://my.lptracker.ru/land/lk/faq/?a=widget-custom-css > **Коротко:** Свой CSS для виджета чата — это поле «Свой CSS» в настройках кнопки «Чат», куда вставляются стили для точной подгонки виджета под сайт: шрифт, скругления, размер окна, место кнопки. Начинайте каждый селектор с #lpt-ai-overlay или #lpt-sw, сохраните настройки и обновите страницу сайта. JavaScript поле не принимает. Свой CSS для виджета чата нужен, когда виджет должен выглядеть частью лендинга, а не чужой вставкой: тот же шрифт, те же углы, а кнопка не закрывает корзину или панель «Наверх». Чат в стиле сайта вызывает больше доверия, посетитель охотнее пишет, и меньше заявок теряется. Особенно это важно агентствам и партнёрам, которые ставят [онлайн-консультанта для сайта](http://my.lptracker.ru/land/lk/faq/?a=widget-chat-messengers&format=md) на лендинги клиентов с готовым дизайном. Свой CSS — это поле «Свой CSS» в настройках кнопки «Чат», куда вставляются правила оформления. Они добавляются на страницу сайта вместе с виджетом и меняют окно чата и кнопки виджета так, как вы напишете. Поле принимает только стили, JavaScript в нём не работает. ## Когда нужен свой CSS, а когда хватит «Оформления чата» Если нужно только поменять цвета, CSS не нужен. Над полем есть блок «Оформление чата»: выберите тему или один свой цвет, остальные цвета подберутся автоматически и останутся читаемыми. Кнопка «Подобрать по сайту» предложит три заметных цвета с вашего лендинга. Свой CSS нужен, когда готовых настроек не хватает: - убрать скругления окна или сообщений; - поставить шрифт сайта; - поднять кнопку виджета, если внизу своя панель или кнопка «Наверх»; - сделать окно чата шире на компьютере; - скрыть скрепку для файлов или пульсацию вокруг кнопки. ## Как добавить свой CSS в виджет 1. **Откройте настройки чата** — «Виджеты» → «Редактировать» → «Кнопки виджета» → кнопка «Чат». Поле «Свой CSS» — под настройками цветов. 2. **Найдите нужный элемент** — Откройте свой сайт, нажмите на виджете правой кнопкой мыши и выберите «Просмотреть код» (или F12). Класс элемента начинается с `lpt-`. 3. **Напишите правило** — Начните селектор с префикса виджета (о нём ниже) и вставьте правило в поле «Свой CSS». 4. **Сохраните настройки** — Нажмите «Сохранить изменения». 5. **Обновите страницу сайта** — Лучше с очисткой кэша, Ctrl+F5. Изменения применятся сразу. > Если что-то пошло не так, очистите поле «Свой CSS» и сохраните настройки ещё раз. Виджет вернётся к обычному виду. ## Главное правило: начинайте селектор с префикса виджета Ваш CSS добавляется на страницу сайта целиком. Правило `body { font-size: 20px; }` изменит весь сайт, а не виджет. Правило `#lpt-ai-overlay .lpt-ai-header { … }` затронет только шапку чата. Начинайте каждый селектор с одного из префиксов: - `#lpt-ai-overlay` — окно чата; - `#lpt-sw` — кнопки виджета и их меню; - `#lpt-sw-callback-overlay` — окно «Обратный звонок»: на странице оно лежит отдельно от кнопок. ## CSS-классы окна чата | Селектор | Что это | | --- | --- | | `.lpt-ai-modal` | Само окно чата | | `.lpt-ai-header` | Шапка чата | | `.lpt-ai-name`, `.lpt-ai-sub` | Заголовок и подзаголовок в шапке | | `.lpt-ai-avatar` | Аватар в шапке | | `.lpt-ai-close` | Крестик закрытия | | `.lpt-ai-messages` | Область переписки | | `.lpt-ai-msg` | Сообщение | | `.lpt-ai-msg.user` | Сообщение посетителя | | `.lpt-ai-time` | Время у сообщения | | `.lpt-ai-welcome-text`, `.lpt-ai-welcome-btn`, `.lpt-ai-welcome-icon` | Приветствие: текст, кнопка под ним и картинка | | `.lpt-ai-input-wrap` | Панель ввода внизу | | `.lpt-ai-input` | Поле ввода | | `.lpt-ai-send` | Кнопка отправки | | `.lpt-ai-attach` | Скрепка для файлов | | `.lpt-ai-typing` | Индикатор «печатает» | | `.lpt-ai-brand` | Подпись внизу чата | ## Селекторы кнопок виджета | Селектор | Что это | | --- | --- | | `#lpt-sw-fab` | Круглая кнопка виджета | | `.lpt-sw-fab-icon` | Иконка на кнопке | | `.lpt-sw-pulse` | Пульсация вокруг кнопки | | `#lpt-sw-menu` | Раскрытое меню кнопок | | `.lpt-sw-menu-btn` | Кнопка в меню | | `.lpt-sw-menu-label` | Подпись кнопки в меню | | `#lpt-sw-tooltip` | Всплывающая подсказка у кнопки | | `#lpt-sw-callback-overlay` | Окно «Обратный звонок» | | `#lpt-sw-cb-phone` | Поле телефона в этом окне | | `#lpt-sw-cb-submit` | Кнопка отправки заявки | > У кнопок виджета почти все стили заданы с `!important`. В правилах для `#lpt-sw` тоже пишите `!important`, иначе правило не сработает. ## Переменные цвета чата Внутри окна чата доступны четыре CSS-переменные. Они берут значения из «Оформления чата»: - `--lpt-accent` — основной цвет: шапка и кнопки; - `--lpt-accent-2` — второй цвет градиента шапки; - `--lpt-bubble` — цвет сообщения посетителя; - `--lpt-body-bg` — фон переписки. Пользуйтесь ими вместо цвета, вписанного вручную. Тогда CSS не придётся переделывать после смены темы, и он не сломается, когда обновится вёрстка чата. Пример: `#lpt-ai-overlay .lpt-ai-send { background: var(--lpt-accent, #3b82f6); }`. Второе значение после запятой — запасное, на случай если цвет не задан. ## Готовые примеры CSS для виджета | Задача | Что вставить в поле | | --- | --- | | Окно чата без скруглений | `#lpt-ai-overlay .lpt-ai-modal { border-radius: 0; }` | | Окно чата шире на компьютере | `@media (min-width: 900px) { #lpt-ai-overlay .lpt-ai-modal { width: 460px; } }` | | Шрифт сайта в чате и кнопках | `#lpt-ai-overlay, #lpt-ai-overlay *, #lpt-sw, #lpt-sw * { font-family: "Montserrat", sans-serif !important; }` | | Поднять кнопку виджета выше | `#lpt-sw { bottom: 96px !important; }` | | Убрать пульсацию вокруг кнопки | `#lpt-sw .lpt-sw-pulse { display: none !important; }` | | Скрыть скрепку для файлов | `#lpt-ai-overlay .lpt-ai-attach { display: none; }` | | Почти квадратные сообщения посетителя | `#lpt-ai-overlay .lpt-ai-msg.user { border-radius: 6px; }` | | Своё место кнопки только на телефонах | `@media (max-width: 640px) { #lpt-sw { bottom: 72px !important; right: 12px !important; } }` | Шрифт должен быть уже подключён на сайте: виджет его не загружает. На телефоне окно чата открывается на весь экран, поэтому ширина и скругления окна действуют только на компьютере. ## Чего нельзя вставить в поле «Свой CSS» - **JavaScript.** Теги `