Chat Header

Styling Webchat

You can Customize the Chatbot Header using below CSS

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

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

Menu items. (Use these values in the init object)

Customization Variable	Variable type	Default value	Description
`showConversationsButton`	boolean	`true`	If false, will hide the conversation list pane
`enableTranscriptDownload`	boolean	`true`	Allows the user to download the conversation history
`enableConversationDeletion`	boolean	`false`	Allows the user to delete its conversation history
`showCloseButton`	boolean	`true`	Display's the web chat close button when the web chat is opened

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

Chatbot Button User Input Area