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 .hcw-message__main {
  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 .hcw-tech-message,
#helpcrunch-container .hcw-chat-day__title {
  color: #5483dc;
}

Chat waiting message text color:

#helpcrunch-container .hcw-widget-notification__content {
  color: #1f8e71;
}

Custom wallpaper for messages block:

#helpcrunch-container .hcw-main-section._chat {
  background-color: #fff;
  background-image: url('https://helpcrunch.com/img/wallpapers/1.png') !important;
  background-size: cover;
  background-position: center;
}

Set border radius for avatars and logo:

#helpcrunch-container .hcw-avatar,
#helpcrunch-container .hcw-avatar__image, 
#helpcrunch-container .hcw-avatar:not(._square) > svg,
#helpcrunch-container .hcw-content-preloader._round {
  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 .hcw-message__main,
#helpcrunch-container .hcw-message__main._from-customer {
  border-radius: 0;
}

#helpcrunch-container .hcw-content-preloader._post {
  border-radius: 0;
}

Set border radius for icon/button/tab:

#helpcrunch-container .hcw-widget-button._style-squared,
#helpcrunch-container .hcw-widget-button._style-rounded,
#helpcrunch-container .hcw-widget-button._style-circle {
  border-radius: 2px;
}

Change text size for icon/button/tab:

#helpcrunch-container .hcw-widget-button-label,
#helpcrunch-container .hcw-widget-button__text {
  font-size: 16px;
}

Customize chat-button gradient:

#helpcrunch-container .hcw-widget-button._add-gradient::before {
  background-image: linear-gradient(0deg, transparent 0, rgba(255, 255, 255, 0.3) 90%);
}

Change chat window size:

#helpcrunch-container .hcw-chat {
  width: 400px;
}

#helpcrunch-container .hcw-widget {
  height: 400px;
}

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 .hcw-widget-button._has-text > .hcw-widget-button__icon {
  color: yellow;
}

Full-screen chat window

To display the chat window in full-screen you have to add styles below and set "Button offset" values to 0, in order to find this setting navigate to Settings  → Website Widgets  → Widget customization → Widget button

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

#helpcrunch-container .hcw-widget__chat {
  width: 100%;
  padding: 0;
  z-index: 501;
}

#helpcrunch-container .hcw-widget {
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
}

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

Hide “Close chat” button:

#helpcrunch-container .hcw-footer__actions + .hcw-footer__branding-wrapper .hcw-footer__branding {
  right: 50%;
  transform: translate(50%, -50%);
}

#helpcrunch-container .hcw-footer__end-chat {
  display: none;
}

Use your custom font:

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

#helpcrunch-container {
  font-family: 'Lobster', serif !important;
}