Custom Styling of User Interfaces via CSS

Description

This documentation provides guidance on how to utilize custom classes for the chat , chat widget, navigator, and search user interfaces.

Web Components: Our user interfaces are designed as web components. Web components are a suite of different technologies that allow you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. For further details, refer to the MDN documentation on Web Components.
Style Inheritance: These user interfaces are capable of inheriting certain style elements from the page they are embedded in, such as font-size and font-family. This is intentionally done to ensure the user interface integrates seamlessly with the host page's design. We use style inheritance only for fields that display your own content. Styles (with the exception of font-family) are not inherited for branchly-defined components.
Customization with CSS: To tailor the look of our user interfaces according to your preferences, you can apply custom CSS styles to the pre-defined container listed below for each separate User Interface.
Applying Custom Styles: You can insert your custom styles within a <style> tag directly in your HTML document or include them in an external .css file. When defining your styles, you may need to use the !important declaration to override the default styling. For example, font-size: 0.7rem !important; ensures that your size specification will take precedence over the existing style.

By following these instructions, you can effectively customize the appearance of the chat , chat widget, navigator, and search to match the aesthetic of your website or application.

Text color for white-background elements

Some elements (suggested-question bubbles, reset buttons) have a fixed white background. Their text color automatically adapts for readability: if your configured font_color is too light against white, a readable fallback color is used instead. This ensures text is always visible regardless of your font_color choice. To override this behavior, target the element's class (e.g., .suggested-question { color: your-color !important; }).

Specify styles when embedding

You can customize and specify styles already when embedding the Container on your website. More about this option here.

Chat (chat embed)

#branchly-chat-embed-container {
}

.embed-title {
  /* alias: .welcome-heading */
}

.welcome-heading {
  /* alias: .embed-title */
}

.welcome-heading-container {
}

.home-button {
  /* alias: .reset-button */
}

.reset-button {
  /* alias: .home-button */
}

.next-nodes-container {
}

.next-node {
}

.assistant-name {
}

.assistant-message {
}

.user-name {
}

.user-message {
}

.chat-container {
}

.chat-button {
}

.chat-input {
}

.chat-input::-webkit-input-placeholder {
  /* WebKit browsers */
}

.chat-input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
}

.chat-input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
}

.chat-input:-ms-input-placeholder {
  /* Internet Explorer 10 */
}

.suggested-questions-container {
}

.suggested-question {
}

.carousel-button-left {
}

.carousel-button-right {
}

Chat Widget (Chat Widget)

#branchly-chat-widget-container {
}

.chat-widget-container {
}

.widget-header-container {
}

.widget-interaction-container {
}

.close-widget-button {
}

.welcome-message {
  /* alias: .welcome-heading */
}

.welcome-heading {
  /* alias: .welcome-message */
}

.widget-welcome-message-container {
  /* alias: .welcome-heading-container */
}

.welcome-heading-container {
  /* alias: .widget-welcome-message-container */
}

.chat-bubble-container {
}

.next-nodes-container {
}

.next-node {
}

.assistant-name {
}

.assistant-message {
}

.user-name {
}

.user-message {
}

.chat-container {
}

.chat-button {
}

.chat-input {
}

.chat-input::-webkit-input-placeholder {
  /* WebKit browsers */
}

.chat-input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
}

.chat-input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
}

.chat-input:-ms-input-placeholder {
  /* Internet Explorer 10 */
}

.chat-entry-suggestions-container {
}

.suggested-question {
}

.close-suggested-questions-container-button {
}

.reset-button {
}

.carousel-button-left {
}

.carousel-button-right {
}

Navigator (Embed)

#branchly-embed-container {
}

.embed-title {
  /* alias: .welcome-heading */
}

.welcome-heading {
  /* alias: .embed-title */
}

.welcome-heading-container {
}

.next-nodes-container {
}

.next-node {
}

.search-container {
}

.search-button {
}

.home-button {
}

.content-container {
}

.selected-node {
}

.selected-nodes-container {
}

.search-input {
}

.search-input::-webkit-input-placeholder {
  /* WebKit browsers */
}

.search-input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
}

.search-input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
}

.search-input:-ms-input-placeholder {
  /* Internet Explorer 10 */
}

Search (Search Interface)

#branchly-search-interface-container {
}

.search-app-container {
}

.search-entry-point {
}

.branchly-heading-bubble {
}

.branchly-search-bubble {
}

.heading-message-container {
  /* alias: .welcome-heading-container */
}

.welcome-heading-container {
  /* alias: .heading-message-container */
}

.searchbar-container {
}

.searchbar {
}

.searchbar-form {
}

.searchbar-submit-button {
}

.reset-search-button {
  /* alias: .reset-button */
}

.reset-button {
  /* alias: .reset-search-button */
}

.ai-message-container {
}

.ai-message {
}

.search-results-container {
}

.search-result-card {
}

.search-result-card-image {
}

.search-result-card-content {
}

.search-result-card-accordion-content {
}

.suggested-questions-container {
}

.suggested-questions {
}

.suggested-question {
}

.welcome-heading {
}

Search Interface - Custom Style Cases

Styling the entry point button:

Initially, the entry point button (enabled using the attribute data-view-mode="search-button") displays a search icon alongside the text "Search... | ⌘ + K" or "Search... | Ctrl + K". This second part of the text indicates the keyboard shortcut to open the interface, depending on whether you are using macOS or Windows.

If you wish to render only the search icon without the accompanying text, you can achieve this using CSS with the following rules:

.search-entry-point {
    border: none; /* Removes border */
    padding: 10px; /* Adjusts padding, set your individual value here */
    svg {
      margin: 0; /* Removes default icon margin */
    }
  }

  .search-entry-point span {
    display: none; /* Removes the element with text */
  }

This will result in the following appearance:

Of course, you can adjust different styles for various devices. To achieve this, utilize the @media query option like the following example:

/* showing only the search icon for smaller devices */

@media (max-width: 768px) { /* Set your own breakpoint here  */
  .search-entry-point {
    border: none; /* Removes border */
    padding: 10px; /* Adjusts padding, set your individual value here */
    svg {
      margin: 0;
      font-size: 30px; /* Adjusts the icon size, set your individual value here */
    }
  }

  .search-entry-point span {
    display: none; /* Removes the element with text */
  }
}

Moving the widget 120px up:

If the widget overlaps elements at the bottom of your page (for example a cookie banner or a sticky footer), you can move the whole widget up with CSS. The following example lifts every widget UI element — the entry bubble, the suggested questions, the opened chat panel and the close button — by 120px, on desktop and on mobile. On mobile the opened panel keeps its default full-screen position, so on phones only the entry bubble and the suggested questions are lifted.

Add the rules to a <style> tag on your page or to your external .css file:

/*
 * Moves the chat widget 120px up - on desktop and mobile:
 * - entry bubble and suggested questions (while the widget is closed)
 * - opened chat panel and its close button
 *
 * On mobile the opened panel keeps its default full-screen position;
 * there, only the entry bubble and suggested questions are lifted.
 */

/*
 * Widget container, anchored to the bottom-right corner. Lifting this
 * container moves the opened panel on desktop and the entry bubble +
 * suggested questions on mobile. Use margin-bottom (not
 * transform/translate) so the widget's own positioning keeps working.
 */
#branchly-chat-widget-container {
  margin-bottom: 120px !important;
}

/*
 * Desktop and tablet only: below 471px the widget renders its mobile
 * layout. On large screens the entry bubble, the suggested questions
 * popup and the close button are anchored independently of the
 * container, so each needs its own 120px lift.
 */
@media (min-width: 471px) {
  /*
   * Entry bubble (shown while the widget is closed). The :not() guard
   * leaves the welcome bubble inside the opened panel untouched - the
   * same class is used for both, so keep the guard when copying this
   * rule.
   */
  .chat-bubble-container:not(.widget-interaction-container *) {
    margin-bottom: 120px !important;
  }

  /* Suggested questions popup with its question buttons */
  .chat-entry-suggestions-container {
    margin-bottom: 120px !important;
  }

  /* Close button of the opened chat panel */
  .close-widget-button {
    margin-bottom: 120px !important;
  }

  /*
   * Keeps the opened panel inside the viewport on short screens after
   * the lift. 170px = the widget's default 50px gap above the bottom
   * edge + the 120px shift - adjust it together with the shift value
   * above. Has no effect on screens tall enough to fit the full panel.
   */
  .chat-widget-container {
    max-height: calc(100svh - 170px) !important;
  }
}

/*
 * Mobile only. On phones the opened panel would inherit the 120px lift
 * from the container above. This pins it back to the bottom of the
 * screen at its default full-screen size, so on mobile only the entry
 * bubble and the suggested questions are lifted.
 */
@media (max-width: 470px) {
  .chat-widget-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100svw !important;
    height: 100svh !important;
  }
}

To move the widget by a different distance, replace the 120px values. Note that the 170px in the max-height rule is the sum of the widget's default 50px gap above the bottom edge and the 120px shift — adjust it together with the shift value.

Description​

Text color for white-background elements​

Specify styles when embedding​

Chat (chat embed)​

Chat Widget (Chat Widget)​

Navigator (Embed)​

Search (Search Interface)​

Search Interface - Custom Style Cases​

Chat Widget - Custom Style Cases​