Стилизация виджета
Пользователь должен быть в группе, у которой есть полномочие Управление каналами
Стилизация виджета возможна в двух вариантах:
- Стилизация окна с сообщениями.
- Стилизация кнопки виджета.
Для стилизации окна с сообщениями требуется:
| 1 | Перейдите в проекте в раздел Каналы | |
| 2 | Перейдите в требуемый Канал с внутренним чатом | |
| 3 | Перейдите в Настройки канала | |
| 4 | Включите стилизацию виджета | |
| 5.1 | Для указания стилей прямо в настройках выберите тип Таблица стилей | ![]() |
| 5.2 | Для указания стилей во внешнем файле выберите тип Ссылка на таблицу стилей | ![]() |
| 6 | Сохраните настройки. |
Для стилизации иконки требуется переопределить стандарные стили кнопки с помощью CSS:
/* Контейнер, в котором показывается переписка */
#iqchannels-widget-container {
position: fixed;
height: 100%;
min-height: 100%;
top: 0;
right: 0;
width: 0;
z-index: 10;
display: none;
}
/* Кнопка виджета */
#iqchannels-widget-icon {
color: #ffffff;
background-color: #ee5c13;
position: fixed;
right: 20px;
bottom: 20px;
width: 48px;
height: 48px;
border-radius: 24px;
line-height: 48px;
margin-right: 2px;
margin-bottom: 2px;
}
/* Икона на кнопке виджета */
#iqchannels-widget-icon svg {
fill: #ffffff;
width: 24px;
height: 24px;
padding: 12px 12px;
}
#iqchannels-widget-icon:hover {
width: 52px;
height: 52px;
border-radius: 26px;
line-height: 52px;
margin-right: 0;
margin-bottom: 0;
}
#iqchannels-widget-icon:hover svg {
width: 28px;
height: 28px;
padding: 12px 12px;
}
@media (max-width: 768px) {
#iqchannels-widget {
width: 100% !important;
}
#iqchannels-widget-container {
width: 100% !important;
height: 100%;
}
}

