Ви можете налаштувати свій віджет чату за допомогою спеціальних стилів CSS, щоб він ще краще відповідав дизайну вашого веб-сайту.

Для цього перейдіть у Налаштування → Канали → Веб-віджети → [Ваш віджет] і оберіть вкладку «Власний CSS». У цій статті ви можете скопіювати кілька корисних фрагментів коду CSS і вставити їх в налаштуваннях:

Колір тексту повідомлень оператора:

#helpcrunch-container .hcw-message__main {
  color: #649ce0;
}

Колір тексту сповіщень:

#helpcrunch-container .helpcrunch-notifications-block .helpcrunch-notification-wrapper .helpcrunch-notification-text {
color: #649ce0;
}

Колір тексту технічних повідомлень/днів:

#helpcrunch-container .hcw-tech-message,
#helpcrunch-container .hcw-chat-day__title {
  color: #5483dc;
}

Колір тексту повідомлення очікування відповіді:

#helpcrunch-container .hcw-widget-notification__content {
  color: #1f8e71;
}

Власні фони для блоку повідомлень:

#helpcrunch-container .hcw-main-section._chat {
  background-color: #fff;
  background-image: url('https://helpcrunch.com/img/wallpapers/1.png') !important;
  background-size: cover;
  background-position: center;
}

Встановіть радіус краю для аватарів та логотипу:

#helpcrunch-container .hcw-avatar,
#helpcrunch-container .hcw-avatar__image, 
#helpcrunch-container .hcw-avatar:not(._square) > svg,
#helpcrunch-container .hcw-content-preloader._round {
  border-radius: 4px;
}

Встановіть радіус краю для сповіщень:

#helpcrunch-container .helpcrunch-notifications-block .helpcrunch-notification-wrapper {
border-radius: 0;
}

Установіть радіус краю для вікна чату:

#helpcrunch-container .helpcrunch-chat,
#helpcrunch-container .helpcrunch-chat .helpcrunch-chat-header {
border-radius: 0;
}

Встановити радіус краю для бульбашки повідомлення:

#helpcrunch-container .hcw-message__main,
#helpcrunch-container .hcw-message__main._from-customer {
  border-radius: 0;
}

#helpcrunch-container .hcw-content-preloader._post {
  border-radius: 0;
}

Встановити радіус краю для іконки/кнопки/вкладки:

#helpcrunch-container .hcw-widget-button._style-squared,
#helpcrunch-container .hcw-widget-button._style-rounded,
#helpcrunch-container .hcw-widget-button._style-circle {
  border-radius: 2px;
}

Змінити розмір тексту для іконки/кнопки/вкладки:

#helpcrunch-container .hcw-widget-button-label,
#helpcrunch-container .hcw-widget-button__text {
  font-size: 16px;
}

Налаштуйте градієнт кнопки чату:

#helpcrunch-container .hcw-widget-button._add-gradient::before {
  background-image: linear-gradient(0deg, transparent 0, rgba(255, 255, 255, 0.3) 90%);
}

Змінити розмір вікна чату:

#helpcrunch-container .hcw-chat {
  width: 400px;
}

#helpcrunch-container .hcw-widget {
  height: 400px;
}

Медіа CSS

Медіа CSS корисний, коли ви хочете змінити стилі віджетів, визначивши певні класи, залежно від розміру вікна перегляду браузера.

Стандартні медіа-запити CSS не працюватимуть належним чином, оскільки віджет HelpCrunch знаходиться всередині iframe, тому важливо відстежувати розмір області перегляду браузера, а не iframe.

HelpCrunch('setMediaCSS', {
  maxWidth: {
    800: 'max-width-800-class',
    320: 'max-width-320-class'
  },
  maxHeight: {
    400: 'max-height-400-class'
  }
})

Приклад:

#helpcrunch-container.max-width-800-class .hcw-widget-button._has-text > .hcw-widget-button__icon {
  color: yellow;
}

Повноекранне вікно чату

Для того щоб вікно віджета було повноекранне треба додати стилі які нижче та виставити «Зміщення кнопки» в значення 0, для того щоб знайти ці налаштування пройдіть в Налаштування → Веб-віджети  → Налаштування віджета → Кнопка віджета.

#helpcrunch-container .hcw-chat {
  width: 100%;
  border-radius: 0;
}

#helpcrunch-container .hcw-widget__chat {
  width: 100%;
  padding: 0;
  z-index: 501;
}

#helpcrunch-container .hcw-widget {
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
}

#helpcrunch-container .hcw-header {
  border-radius: 0;
}

Приховати кнопку «Закрити чат»:

#helpcrunch-container .hcw-footer__actions + .hcw-footer__branding-wrapper .hcw-footer__branding {
  right: 50%;
  transform: translate(50%, -50%);
}

#helpcrunch-container .hcw-footer__end-chat {
  display: none;
}

Використовуйте власний шрифт:

@import url('https://fonts.googleapis.com/css?family=Lobster');

#helpcrunch-container {
  font-family: 'Lobster', serif !important;
}