Перейти к основному содержимому
Версия: Последняя

Стилизация виджета

Пользователь должен быть в группе, у которой есть полномочие Управление каналами

Стилизация виджета возможна в двух вариантах:

  • Стилизация окна с сообщениями.
  • Стилизация кнопки виджета.

Для стилизации окна с сообщениями требуется:

1Перейдите в проекте в раздел Каналы
2Перейдите в требуемый Канал с внутренним чатом
3Перейдите в Настройки канала
4Включите стилизацию виджета
5.1Для указания стилей прямо в настройках выберите тип Таблица стилейScreenshot 2019-12-23 at 13.49.52.png
5.2Для указания стилей во внешнем файле выберите тип Ссылка на таблицу стилейScreenshot 2019-12-23 at 13.51.56.png
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%;
}
}