Custom CSS

For advanced customization, you can use these custom CSS styles. To add them, go Settings → Website Widgets → Your_Widget_name→ Custom CSS , copy-paste the CSS code and Feel free to change all CSS values.

Agent messages text color


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

Notifications text color


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

Tech-messages/days text color


#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;
}

Chat waiting message text color


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

Custom wallpaper for messages block


#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;
}

Set border radius for notifications


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

Set border radius for chat window


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

Set border radius for messages bubble


#helpcrunch-container #helpcrunch-message-container .helpcrunch-message,
#helpcrunch-container #helpcrunch-message-container .helpcrunch-message-agent-wrapper .helpcrunch-message {
border-radius: 0;
}

Set border radius for icon/button/tab


#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;
}

Change text size for icon/button/tab


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

Customize chat-button gradient


#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%)
}

Change chat window size


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

Full-screen chat window


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

Hide “Close chat” button


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

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

Use your custom font


@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;
}

First state bubbles


#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);
}