Зверніть увагу, що додаткові можливості налаштування віджета доступні лише в наших планах підписки Професіональний та Корпоративний.
Ви можете налаштувати свій віджет чату за допомогою спеціальних стилів 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);
}