Customize your widget with custom CSS styling

Want to take your widget customization game to the next level?
Written by Konstantine
Updated 1 month 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;
}

Media CSS

Media CSS is useful when you want to modify widget styles by defining specific classes, depending on the browser viewport size.
Standard CSS media queries won’t work properly, as HelpCrunch widget is inside an iframe, it’s important to track the browser viewport size, not the iframe

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

Example:

#helpcrunch-container.max-width-800-class .helpcrunch-status-bar .helpcrunch-widget-icon-wrapper {       
  color: tomato;
}

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?