For Developers
Web Chat
Styling your Web Chat
Chat Header

Chat Header

Styling Webchat

You can Customize the Chatbot Header using below CSS


  1. Styles the Header Icon
/* This block of CSS code styles a header icon element */
.bpw-header-icon {
  /* Remove border */
  border: none;
  /* Remove background color */
  background: none;
  /* Remove padding */
  padding: 0;
  /* Remove margin */
  margin: 0;
  /* Set text color to a variable named shark */
  color: var(--shark);
  /* Set line-height to zero */
  line-height: 0;
  /* Set left margin to a variable named spacing-large */
  margin-left: var(--spacing-large);
  /* Align text to the right */
  text-align: right;
  /* Align element vertically in the middle */
  vertical-align: middle;
  /* Set cursor to a pointer */
  cursor: pointer;
  /* Set fill color to a variable named shark */
  fill: var(--shark);
  /* Set width to 16 pixels */
  width: 16px;
  /* Set height to 16 pixels */
  height: 16px;
  /* Set fill transition duration to 0.3 seconds */
  transition: fill 0.3s;
}
 
/* Apply the same fill color and fill transition to the icon's SVG and path elements */
.bpw-header-icon svg,
.bpw-header-icon svg path {
  /* Set fill color to a variable named shark */
  fill: var(--shark);
  /* Set fill transition duration to 0.3 seconds */
  transition: fill 0.3s;
}
 
/* When the icon is hovered over, change the fill color to a variable named reef for the icon, SVG and path elements */
.bpw-header-icon:hover,
.bpw-header-icon:hover svg,
.bpw-header-icon:hover svg path {
  fill: var(--reef);
}

  1. Styles the Header Title & Subtitle
.bpw-header-title-flexbox {
    /* sets the overflow behavior of the element */
    overflow: hidden;
    /* sets the text overflow behavior of the element */
    text-overflow: ellipsis;
    /* sets the flexbox properties of the element for webkit browsers */
    -webkit-box-flex: 1;
    /* sets the flexbox properties of the element for Microsoft browsers */
    -ms-flex: 1 1 auto;
    /* sets the flexbox properties of the element */
    flex: 1 1 auto;
}
 
.bpw-header-title-container {
    /* sets the vertical alignment of the element */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* sets the display of the element to use flexbox for webkit browsers */
    display: -webkit-box;
    /* sets the display of the element to use flexbox for Microsoft browsers */
    display: -ms-flexbox;
    /* sets the display of the element to use flexbox */
    display: flex;
}
 
.bpw-header-title-container .bpw-bot-avatar {
    /* sets the display of the element to none */
    display: none;
}
 
.bpw-header-title-container .bpw-bot-avatar svg {
    /* sets the zoom level of the element */
    zoom: 0.6;
}
 
.bpw-header-name {
    /* sets the font weight of the element */
    font-weight: 500;
    /* sets the font size of the element */
    font-size: 14px;
    /* sets the color of the element */
    color: var(--zinc-600);
}
 
.bpw-header-subtitle {
    /* sets the overflow behavior of the element */
    overflow: hidden;
    /* sets the white space handling of the element */
    white-space: nowrap;
    /* sets the text overflow behavior of the element */
    text-overflow: ellipsis;
    /* sets the font weight of the element */
    font-weight: 300;
    /* sets the font size of the element */
    font-size: 12px;
    /* sets the color of the element */
    color: var(--zinc-400);
}
 
.bpw-header-unread {
    /* sets the display of the element to none */
    display: none;
}
 
.sr-only {
    /* sets the position of the element to absolute */
    position: absolute;
    /* sets the width of the element */
    width: 1px;
    /* sets the height of the element */
    height: 1px;
    /* sets the padding of the element */
    padding: 0;
    /* sets the margin of the element */
    margin: -1px;
    /* sets the overflow behavior of the element */
    overflow: hidden;
    /* clips the element to the given rectangle */
    clip: rect(0, 0, 0, 0);
    /* sets the border of the element */
    border: 0;
}

  1. Menu items. (Use these values in the init object)
Customization VariableVariable typeDefault valueDescription
showConversationsButtonbooleantrueIf false, will hide the conversation list pane
enableTranscriptDownloadbooleantrueAllows the user to download the conversation history
enableConversationDeletionbooleanfalseAllows the user to delete its conversation history
showCloseButtonbooleantrueDisplay's the web chat close button when the web chat is opened

  1. Styles the Header Container
.bpw-header-container {
    /* sets the border radius of the element */
    border-radius: var(--spacing-large);
    /* sets the background color of the element */
    background: var(--white);
    /* sets the border of the element */
    border: 1px solid var(--zinc-200);
    /* sets the border radius of the element (repeated declaration) */
    border-radius: var(--spacing-medium);
    /* sets the padding of the element */
    padding: var(--spacing-large) var(--spacing-x-large);
}