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

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

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

#helpcrunch-container #helpcrunch-message-container .helpcrunch-message-agent-text {
color: #649ce0;
}

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

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

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

#helpcrunch-container #helpcrunch-message-container .helpcrunch-message-tech-wrapper,
#helpcrunch-container .helpcrunch-chat .helpcrunch-chat-messages-container .helpcrunch-chat-messages .helpcrunch-chat-day .helpcrunch-chat-day-title span {
color: #5483dc;
}

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

#helpcrunch-container .helpcrunch-chat .helpcrunch-chat-messages-container .helpcrunch-chat-waiting-message {
color: #1f8e71;
}

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

#helpcrunch-container .helpcrunch-chat .helpcrunch-chat-messages-container {
background: #fff url('http://helpcrunch.dev-alex/blog/wp-content/uploads/2018/09/Live-chat-tricks-featured-e1537455308398.png');
background-size: cover;
}

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

#helpcrunch-container .helpcrunch-avatar-chat,
#helpcrunch-container .helpcrunch-notifications-block .helpcrunch-notification-wrapper .helpcrunch-notification-header .helpcrunch-avatar img,
#helpcrunch-container .helpcrunch-chat .helpcrunch-chat-header .helpcrunch-chat-general-data-wrapper .helpcrunch-chat-online-agents-block figure img,
#helpcrunch-container .helpcrunch-chat .helpcrunch-chat-header .helpcrunch-logo-wrap .helpcrunch-logo {
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 #helpcrunch-message-container .helpcrunch-message,
#helpcrunch-container #helpcrunch-message-container .helpcrunch-message-agent-wrapper .helpcrunch-message {
border-radius: 0;
}

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

#helpcrunch-container .helpcrunch-status-bar .helpcrunch-button-wrap,
#helpcrunch-container .helpcrunch-status-bar .helpcrunch-widget-type-icon-label,
#helpcrunch-container .helpcrunch-status-bar.helpcrunch-widget-type-icon .helpcrunch-widget-icon-block {
border-radius: 0 !important;
}

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

#helpcrunch-container .helpcrunch-status-bar .helpcrunch-widget-type-icon-text,
#helpcrunch-container .helpcrunch-status-bar .helpcrunch-button-wrap .helpcrunch-button span {
font-size: 17px;
}

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

#helpcrunch-container .helpcrunch-status-bar.helpcrunch-widget-gradient .helpcrunch-button-wrap,
#helpcrunch-container .helpcrunch-status-bar.helpcrunch-widget-gradient.helpcrunch-widget-type-icon .helpcrunch-widget-icon-block {
background-image: linear-gradient(0deg, transparent 0,rgba(255,255,255,0.3) 90%)
}

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

#helpcrunch-container .helpcrunch-chat {
max-width: 500px;
max-height: 500px;
}

Медіа 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 .helpcrunch-status-bar .helpcrunch-widget-icon-wrapper {       
  color: tomato;
}

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

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

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

#helpcrunch-container .helpcrunch-chat .helpcrunch-end-chat {
display: none !important;
}

#helpcrunch-container .helpcrunch-chat .helpcrunch-chat-powered {
right: 50%;
transform: translate(50%,0);
}

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

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

#helpcrunch-container,
#helpcrunch-container #helpcrunch-message-container .helpcrunch-message-text, #helpcrunch-container .helpcrunch-notifications-block .helpcrunch-notification-text,
#helpcrunchChatTextarea,
#helpcrunchChatTextarea::placeholder,
#helpcrunch-container input,
#helpcrunch-container input::placeholder,
#helpcrunch-container textarea,
#helpcrunch-container .helpcrunch-status-bar .helpcrunch-button-wrap,
#helpcrunch-container .helpcrunch-status-bar .helpcrunch-widget-type-icon-label {
font-family: 'Lobster', serif !important;
}

Бульбашки повідомлень на першому екрані:

#helpcrunch-container .helpcrunch-chat .helpcrunch-chat-header .helpcrunch-logo-wrap .helpcrunch-logo-message:before {
background-image: url(INSERT_YOUR_URL);
}

#helpcrunch-container .helpcrunch-chat .helpcrunch-chat-header .helpcrunch-logo-wrap .helpcrunch-logo-message:after {
background-image: url(INSERT_YOUR_URL);
}