# Раздел "Кнопка" В данном разделе пункта настроек **Кнопки и размещения** Вы можете настроить внешний вид кнопки вызова оператора под свои нужды. Сервис **Webim** предоставляет набор системных кнопок, но Вы также можете использовать свои. Параметр **Показывать офлайн-кнопку** включает или выключает отображение кнопки чата статуса *Офлайн*. ![Раздел "Кнопка"](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/button_view.webp){ style="width: 882px; max-width: 100%" } ## HTML-Кнопка Самая современная кнопка сервиса **Webim**. Кроме большого количества настроек внешнего вида кнопки, у неё есть одна особенность. При нажатии на эту кнопку, если у Вас настроен раздел [Каналы](https://webim.ru/kb/control-panel/buttons-and-locations/channels.html), у пользователя отобразятся кнопки для доступа к Вашим каналам. !!! Note "Наследование оформления кнопки «Чат на сайте»" Если включены альтернативные каналы и HTML-кнопка открывает выпадающий список, пункт «Чат на сайте» в этом списке наследует стиль основной HTML-кнопки, заданный в разделе «Кнопка»: цвет фона, форма и иконка/текст. Отдельной настройки для этого пункта нет. Настройки HTML-кнопки: * **Цвет фона кнопки** — изменяет цвет фона чата. В настройках размещения сохраняется как параметр `button.html.style.background-color`. * **Цвет границы кнопки** — изменяет цвет границы кнопки. В настройках размещения сохраняется как параметр `button.html.style.border-color`. * **Цвет изображения кнопки** — изменяет цвет изображения кнопки. В настройках размещения сохраняется как параметр `button.html.style.image-color`. * **Горизонтальное положение кнопки** — изменяет стандартное положение кнопки чата по горизонтали. * **Вертикальное расположение кнопки** — изменяет стандартное положение кнопки чата по вертикали. * **Возможность перемещения кнопки** — параметр разрешает или запрещает пользователю перемещать кнопку на сайте с помощью drag-n-drop. В настройках размещения сохраняется как параметр `button.html.draggable`. !!! Note "N.B." Начиная с 10.8 для HTML-кнопки можно задать **разные цвета для статусов Онлайн и Офлайн**. * Цвета **онлайн** задаются в блоке настроек HTML-кнопки и применяются всегда, так как кнопка **онлайн** не может быть скрыта опцией. * Цвета **офлайн** настраиваются отдельно и применяются только при включённой опции **“Показывать офлайн-кнопку”**. * Если отдельные цвета для офлайна **не заданы**, то используются цвета онлайна. ## Кнопки-изображения **Загруженные кнопки** Здесь отображаются кнопки, которые были загружены Вами самостоятельно. **Системные кнопки** Стандартные кнопки сервиса **Webim**. В следующей таблице представлены все варианты изображений стандартных кнопок. |Изображение онлайн-кнопки |Изображение офлайн-кнопки | | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | |![Системная кнопка чата: мини-шар, синий (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/baloon_mini_blue.svg) |![Системная кнопка чата: мини-шар, синий (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/baloon_mini_blue_offline.svg) | |![Системная кнопка чата: мини-шар, зелёный (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/baloon_mini_green.svg)|![Системная кнопка чата: мини-шар, зелёный (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/baloon_mini_green_offline.svg)| |![Системная кнопка чата: круг с ободком, синий (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/circle2_blue.svg) |![Системная кнопка чата: круг с ободком, синий (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/circle2_blue_offline.svg) | |![Системная кнопка чата: круг с ободком, зелёный (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/circle2_green.svg) |![Системная кнопка чата: круг с ободком, зелёный (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/circle2_green_offline.svg) | |![Системная кнопка чата: круг, синий (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/circle_blue.svg) |![Системная кнопка чата: круг, синий (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/circle_blue_offline.svg) | |![Системная кнопка чата: круг, зелёный (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/circle_green.svg) |![Системная кнопка чата: круг, зелёный (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/circle_green_offline.svg) | |![Системная кнопка чата: квадрат, бирюзовый (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/square_cyan.svg) |![Системная кнопка чата: квадрат, бирюзовый (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/square_cyan_offline.svg) | |![Системная кнопка чата: квадрат, зелёный (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/square_green.svg) |![Системная кнопка чата: квадрат, зелёный (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/square_green_offline.svg) | |![Системная кнопка чата: овал, синий (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/oval_blue.svg) |![Системная кнопка чата: овал, синий (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/oval_blue_offline.svg) | |![Системная кнопка чата: овал, зелёный (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/oval_green.svg) |![Системная кнопка чата: овал, зелёный (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/oval_green_offline.svg) | |![Системная кнопка чата: овал, синий, смещение влево (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/oval_blue_l.svg) |![Системная кнопка чата: овал, синий, смещение влево (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/oval_blue_l_offline.svg) | |![Системная кнопка чата: овал, зелёный, смещение влево (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/oval_green_l.svg) |![Системная кнопка чата: овал, зелёный, смещение влево (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/oval_green_l_offline.svg) | |![Системная кнопка чата: овал, синий, смещение вправо (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/oval_blue_r.svg) |![Системная кнопка чата: овал, синий, смещение вправо (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/oval_blue_r_offline.svg) | |![Системная кнопка чата: овал, зелёный, смещение вправо (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/oval_green_r.svg) |![Системная кнопка чата: овал, зелёный, смещение вправо (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/oval_green_r_offline.svg) | |![Системная кнопка чата: шар, синий (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/baloon_blue.svg) |![Системная кнопка чата: шар, синий (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/baloon_blue_offline.svg) | |![Системная кнопка чата: шар, зелёный (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/baloon_green.svg) |![Системная кнопка чата: шар, зелёный (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/baloon_green_offline.svg) | |![Системная кнопка чата: скруглённый прямоугольник, бирюзовый (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/foval_cyan.svg) |![Системная кнопка чата: скруглённый прямоугольник, бирюзовый (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/foval_cyan_offline.svg) | |![Системная кнопка чата: скруглённый прямоугольник, фиолетовый (онлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/foval_purple.svg) |![Системная кнопка чата: скруглённый прямоугольник, фиолетовый (офлайн)](https://webim.ru/kb/img/control-panel/buttons-and-locations/button/foval_purple_offline.svg) | ## Загрузка собственной кнопки Чтобы загрузить своё готовое изображение кнопки, которое вы хотите использовать, нажмите **Загрузить свою кнопку**. В появившемся окне загрузите с устройства файл с изображением кнопки в одном из следующих форматов: `jpg`, `gif`, `png`, `jpeg`, `svg`. Размер кнопки не должен превышать 10 Мб. Также осуществите следующие настройки кнопки: * **Тип кнопки:** укажите, должна кнопка быть обычной, выдвигающейся или угловой. * **Позиция:** укажите, в каком углу страницы кнопка будет появляться на сайте. * **Язык кнопки**: укажите, для какого языка будет применяться Ваша кнопка. Если вы выберете в качестве языка кнопки *Русский*, то эта кнопка будет отображаться только для тех размещений, где русский язык указан как используемый. * **Размеры**: размеры кнопки по горизонтали и вертикали, задаются в пикселях. При изменении одного из параметров, второй будет автоматически подогнан для соответствия исходному соотношению сторон. Загрузка файла **не применяет** кнопку к размещению автоматически. Пока кнопка не выбрана в списке, на сайте используется та, что уже сохранена в настройках размещения (системная или ранее выбранная). Чтобы новая кнопка отображалась на сайте: 1. В блоке **Загруженные кнопки** выберите загруженную кнопку. 1. Нажмите **Сохранить** внизу страницы. 1. Очистите кэш браузера. 1. Проверьте отображение кнопки на сайте. --- Источник: https://webim.ru/kb/control-panel/buttons-and-locations/button.html