Hello 👋 How can we help?

Custom CSS

Want to take your widget customization game to the next level?
Written by Anastasiia
Updated 1 week ago

Please note that advanced widget customization is only available in our Premium and Enterprise subscription plans.

You can customize your chat widget with custom CSS to make it match your website’s design even better.

Go to Settings → Website Widgets → Your Website→ 'Custom CSS' tab and copy-paste the following CSS code snippets:

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

Set border radius for avatars and logo:

#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);
}
Did this answer your question?