Styles

Biel.ai offers two main approaches for customizing component styles:

1. CSS custom properties (Recommended) - For standard customization needs
2. CSS parts (Advanced) - For fine-grained control over specific elements

CSS custom properties

This is the standard and recommended way to customize the widget appearance. CSS custom properties provide a simple interface for theming colors, fonts, spacing, and other common design properties.

Usage

To customize these properties, define them in your website's CSS using the :root selector for global changes or a specific selector to target particular areas:

:root {
    --biel-primary-color: #00D68F;
    ...
}

Properties

The tables below lists all the available properties you can override:

:root {
    /* Colors */
    --biel-primary-color: #0070F4;
    --biel-primary-light-color: #3a99ff;
    --biel-primary-hover-color: #005FCC;
    --biel-secondary-color: #f9fafb;
    --biel-secondary-hover-color: #ebebeb;
    --biel-light-color: #ccc;
    --biel-dark-color: #191919;
    --biel-dark-hover-color: #333;
    --biel-text-color: #5f6368;
    --biel-white-color: #fff;
    --biel-white-hover-color: #eee;
    --biel-highlight-color: #ffb422;
    --biel-scrollbar-color: #888888;
    --biel-scrollbar-hover-color: #666666;
    --biel-code-header-color: #3a3a3a;
    --biel-code-body-color: #3b3b3b;
    --biel-table-header-color: #372b2b;


    /* Fonts */
    --biel-font-family: "Inter", "Tahoma", "sans-serif";
    --biel-text-sm-font-size: 12px;
    --biel-text-font-size: 14px;
    --biel-text-lg-font-size: 16px;
    --biel-text-xl-font-size: 18px;
    --biel-text-xxl-font-size: 20px;
    --biel-code-snippet-font-family: "Courier New", "Courier", "monospace";

    /* Biel button */
    --biel-button-border-radius: 20px;
    --biel-button-box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    --biel-button-dark-bg-color: var(--biel-primary-color);
    --biel-button-dark-bg-color-hover: var(--biel-primary-color);
    --biel-button-dark-text-color: var(--biel-white-color);
    --biel-button-icon-size: 20px;
    --biel-button-light-bg-color: var(--biel-white-color);
    --biel-button-light-bg-color-hover: var(--biel-white-color);
    --biel-button-light-text-color: var(--biel-primary-color);
    --biel-button-text-font-size: var(--biel-text-lg-font-size);
    --biel-button-text-font-weight: 400;
    --biel-button-padding: 8px 15px;
    --biel-button-position-top: 15px;
    --biel-button-position-bottom: 15px;
    --biel-button-position-left: 15px;
    --biel-button-position-right: 15px;

    /* Biel bot */
    --biel-bot-close-bg-color: var(--biel-white-color);
    --biel-bot-close-color: var(--biel-dark-color);
    --biel-bot-content-bg-color: var(--biel-white-color);
    --biel-bot-content-border-color: rgba(0, 0, 0, 0.08);
    --biel-bot-content-border-radius: 12px;
    --biel-bot-content-box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);

    --biel-bot-content-font-family: var(--biel-font-family);
    --biel-bot-content-position-bottom: 10px;
    --biel-bot-content-position-left: 10px;
    --biel-bot-content-position-right: 10px;
    --biel-bot-content-position-top: 10px;
    --biel-bot-content-text-color: var(--biel-text-color);
    --biel-bot-content-z-index: 300;

    /* Biel bot chat */
    --biel-chat-scrollbar-color: var(--biel-scrollbar-color);
    --biel-chat-scrollbar-hover-color: var(--biel-scrollbar-hover-color);
    --biel-chat-height: 45vh;
    --biel-chat-embedded-height: 450px;

    /* Biel bot header */
    --biel-header-font-family: var(--biel-font-family);
    --biel-header-font-size: var(--biel-text-xl-font-size);
    --biel-header-font-weight: 600;
    --biel-header-powered-by-font-weight: 400;
    --biel-header-powered-by-text-color: var(--biel-text-color);
    --biel-header-powered-by-link-color: var(--biel-dark-color);
    --biel-header-text-color: var(--biel-dark-color);
    --biel-header-border-color: var(--biel-light-color);

    /* Biel header dropdown */
    --biel-dropdown-bg-color: var(--biel-white-color);
    --biel-dropdown-border-color: var(--biel-light-color);
    --biel-dropdown-hover-bg-color: var(--biel-secondary-color);
    --biel-dropdown-selected-bg-color: var(--biel-white-hover-color);
    --biel-dropdown-selected-hover-bg-color: var(--biel-secondary-hover-color);
    --biel-dropdown-text-color: var(--biel-dark-hover-color);
    --biel-dropdown-text-secondary-color: var(--biel-text-color);

    /* Biel bot message */
    --biel-message-biel-text-color: var(--biel-dark-color);
    --biel-message-user-text-color: var(--biel-white-color);
    --biel-message-biel-bg-color: var(--biel-secondary-color);
    --biel-message-user-bg-color: var(--biel-dark-color);
    --biel-message-avatar-width: 20px;
    --biel-message-avatar-height: 20px;
    --biel-message-padding: 10px;
    --biel-message-avatar-margin-right: 10px;
    --biel-message-border-radius: 10px;
    --biel-message-code-font-size: 14px;
    --biel-message-code-bg-color: var(--biel-code-body-color);
    --biel-message-code-inline-text-color: var(--biel-dark-color);
    --biel-message-code-inline-bg-color: var(--biel-white-hover-color);
    --biel-message-code-inline-border-radius: 4px;
    --biel-message-font-size: var(--biel-text-font-size);
    --biel-message-label-font-size: var(--biel-text-sm-font-size);
    --biel-message-h1-font-size: var(--biel-text-xxl-font-size);
    --biel-message-h2-font-size: var(--biel-text-xl-font-size);
    --biel-message-h3-font-size: var(--biel-text-lg-font-size);
    --biel-message-h4-font-size: var(--biel-text-lg-font-size);
    --biel-message-h5-font-size: var(--biel-text-lg-font-size);
    --biel-message-h6-font-size: var(--biel-text-lg-font-size);
    --biel-message-link-color: var(--biel-primary-light-color);
    --biel-message-source-font-size: 14px;
    --biel-message-source-bg-color: var(--biel-white-hover-color);
    --biel-message-source-bg-hover-color: var(--biel-light-color);
    --biel-message-source-text-color: var(--biel-dark-color);
    /* Biel bot input */
    --biel-input-color: var(--biel-dark-color);
    --biel-input-button-color: var(--biel-white-color);
    --biel-input-button-bg-color: var(--biel-dark-color);
    --biel-input-button-border-color: var(--biel-dark-color);
    --biel-input-button-hover-color: var(--biel-white-color);
    --biel-input-button-hover-bg-color: var(--biel-dark-hover-color);
    --biel-input-button-hover-border-color: var(--biel-dark-color);
    --biel-input-border-color: var(--biel-dark-color);
    --biel-input-border-radius: 6px;
    --biel-input-border-focus-color: var(--biel-dark-color);
    --biel-input-font-family: var(--biel-font-family);
    --biel-input-textarea-max-height: 114px;
    --biel-input-textarea-min-height: 19px;

    /* Biel bot code snippet */
    --biel-code-snippet-header-text-color: var(--biel-light-color);
    --biel-code-snippet-content-text-color: var(--biel-white-color);
    --biel-code-snippet-header-bg-color: var(--biel-code-header-color);
    --biel-code-snippet-content-bg-color: var(--biel-dark-color);
    --biel-code-snippet-font-size: var(--biel-text-font-size);

    /* Biel bot table */
    --biel-table-th-bg-color: var(--biel-table-header-color);
    --biel-table-bg-color: var(--biel-dark-color);
    --biel-table-content-text-color: var(--biel-white-color);

    /* Biel bot suggested questions */
    --biel-suggested-questions-border-radius: 8px;
    --biel-suggested-questions-bg-color: var(--biel-white-color);
    --biel-suggested-questions-bg-hover-color: var(--biel-primary-color);
    --biel-suggested-questions-border-color: var(--biel-primary-color);
    --biel-suggested-questions-padding: 8px 12px;
    --biel-suggested-questions-text-color: var(--biel-dark-color);
    --biel-suggested-questions-text-hover-color: var(--biel-white-color);
    --biel-suggested-questions-title-font-size: var(--biel-text-sm-font-size);
    --biel-suggested-questions-font-size: var(--biel-text-font-size);

    /* Biel bot feedback */
    --biel-feedback-bg-color: var(--biel-white-hover-color);
    --biel-feedback-bg-hover-color: var(--biel-light-color);
    --biel-feedback-background-selected-color: var(--biel-primary-color);
    --biel-feedback-text-color: var(--biel-dark-color);
    --biel-feedback-text-selected-color: var(--biel-white-color);

    /* Biel bot footer */
    --biel-footer-font-size: var(--biel-text-sm-font-size);

    /* Biel search button */
    --biel-search-button-text-display: none;
    --biel-search-button-ctrl-k-display: none;
    --biel-search-button-border-radius: 20px;
    --biel-search-button-border-color: var(--biel-light-color);
    --biel-search-button-bg-color: var(--biel-white-color);
    --biel-search-button-text-color: var(--biel-dark-color);
    --biel-search-button-icon-size: 20px;
    --biel-search-button-width: 100%;
    --biel-search-button-max-width: fit-content;
    --biel-search-button-padding: 8px;
    --biel-search-button-icon-margin-right: 0px;
    --biel-search-button-text-font-size: var(--biel-text-lg-font-size);
    --biel-search-button-text-font-weight: 400;
    --biel-search-button-z-index: 300;

    /* Biel search */
    --biel-search-content-bg-color: var(--biel-white-color);
    --biel-search-content-border-color: rgba(0, 0, 0, 0.08);
    --biel-search-content-border-radius: 12px;
    --biel-search-content-box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
    --biel-search-content-font-family: var(--biel-font-family);
    --biel-search-content-max-width: 700px;
    --biel-search-content-max-height: 100dvh;
    --biel-search-content-position-bottom: 10px;
    --biel-search-content-position-left: 10px;
    --biel-search-content-position-right: 10px;
    --biel-search-content-position-top: 10px;
    --biel-search-content-position-top-center: 50px;
    --biel-search-content-text-color: var(--biel-dark-color);
    --biel-search-content-z-index: 300;
    --biel-search-body-max-height: calc(80dvh - 30px);

    /* Biel search result */
    --biel-search-result-bg-color: var(--biel-secondary-color);
    --biel-search-result-bg-hover-color: var(--biel-secondary-hover-color);
    --biel-search-result-border-radius: 6px;
    --biel-search-result-border-color: var(--biel-light-color);
    --biel-search-result-description-color: var(--biel-scrollbar-hover-color);
    --biel-search-result-mark-color: var(--biel-primary-color);
    --biel-search-result-padding: 10px 8px;
    --biel-search-result-title-color: var(--biel-dark-color);
    --biel-search-result-title-font-size: var(--biel-text-xl-font-size);
    --biel-search-result-description-font-size: var(--biel-text-lg-font-size);

    /* Biel search ask ai button */
    --biel-search-ask-ai-bg-color: var(--biel-primary-color);
    --biel-search-ask-ai-border-radius: 8px;
    --biel-search-ask-ai-color: var(--biel-white-color);
    /* Biel search filters */
    --biel-search-filter-color: var(--biel-dark-color);
    --biel-search-filter-selected-color: var(--biel-white-color);
    --biel-search-filter-bg-color: var(--biel-white-color);
    --biel-search-filter-selected-bg-color: var(--biel-dark-color);
    --biel-search-filter-border-color: var(--biel-white-hover-color);
    --biel-search-filter-hover-color: var(--biel-white-hover-color);
    --biel-search-filter-selected-border-color: var(--biel-white-hover-color);

    /* Biel search footer */
    --biel-search-footer-command-key-border-color: var(--biel-header-border-color);

    /* Biel search toctree */
    --biel-search-toctree-page-bg-color: var(--biel-secondary-color);
    --biel-search-toctree-page-border-color: var(--biel-light-color);
    --biel-search-toctree-page-text-color: var(--biel-dark-color);
    --biel-search-toctree-count-color: var(--biel-scrollbar-hover-color);
    --biel-search-toctree-border-color: var(--biel-light-color);
    --biel-search-toctree-page-title-font-size: var(--biel-text-xl-font-size);
    --biel-search-toctree-page-title-font-weight: 500;
    --biel-search-toctree-count-font-size: var(--biel-text-sm-font-size);
    --biel-search-toctree-title-height: 100%;

    /* Biel terms modal */
    --biel-terms-modal-color: var(--biel-dark-color);
    --biel-terms-modal-bg-color: var(--biel-white-color);
    --biel-terms-modal-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --biel-terms-modal-link-color: var(--biel-primary-light-color);
    --biel-terms-modal-accept-btn-bg-color-disabled: var(--biel-primary-light-color);
    --biel-terms-modal-accept-btn-color-disabled: var(--biel-white-color);
    --biel-terms-modal-accept-btn-bg-color: var(--biel-primary-color);
    --biel-terms-modal-accept-btn-color: var(--biel-white-color);
    --biel-terms-modal-accept-btn-bg-color-hover: var(--biel-primary-hover-color);
    --biel-terms-modal-decline-btn-bg-color: var(--biel-white-hover-color);
    --biel-terms-modal-decline-btn-hover-bg-color: var(--biel-light-color);
    --biel-terms-modal-decline-btn-color: var(--biel-dark-color);
    --biel-terms-modal-close-btn-color: var(--biel-dark-color);
    --biel-terms-modal-close-btn-color-hover: var(--biel-dark-hover-color);

    /* Biel continue button */
    --biel-continue-button-bg-color: var(--biel-white-hover-color);
    --biel-continue-button-bg-color-hover: var(--biel-light-color);
    --biel-continue-button-color: var(--biel-dark-color);
}

[data-theme='dark'] {
    --biel-text-color: #b0b8c4;
    --biel-scrollbar-color: #555555;
    --biel-scrollbar-hover-color: #333333;
    --biel-bot-button-bg-color-active: transparent;
    --biel-bot-button-icon-color: var(--biel-white-color);
    --biel-bot-button-text-color: var(--biel-white-color);
    --biel-header-text-color: var(--biel-white-color);
    --biel-bot-close-bg-color: transparent;
    --biel-bot-close-color: var(--biel-white-color);
    --biel-bot-content-bg-color: var(--biel-dark-color);
    --biel-bot-content-border-color: rgba(255, 255, 255, 0.1);
    --biel-bot-content-text-color: var(--biel-text-color);
    --biel-header-border-color: #363636;
    --biel-header-powered-by-link-color: var(--biel-white-color);
    --biel-dropdown-bg-color: var(--biel-message-biel-bg-color);
    --biel-dropdown-border-color: var(--biel-header-border-color);
    --biel-dropdown-hover-bg-color: var(--biel-feedback-bg-color);
    --biel-dropdown-selected-bg-color: var(--biel-feedback-bg-hover-color);
    --biel-dropdown-selected-hover-bg-color: var(--biel-message-source-bg-hover-color);
    --biel-dropdown-text-color: var(--biel-white-color);
    --biel-dropdown-text-secondary-color: var(--biel-text-color);
    --biel-input-color: var(--biel-white-color);
    --biel-input-border-color: var(--biel-white-color);
    --biel-input-border-focus-color: var(--biel-white-color);
    --biel-input-button-color: var(--biel-dark-color);
    --biel-input-button-bg-color: var(--biel-white-color);
    --biel-input-button-border-color: var(--biel-white-color);
    --biel-input-button-hover-color: var(--biel-dark-color);
    --biel-input-button-hover-bg-color: var(--biel-white-hover-color);
    --biel-input-button-hover-border-color: var(--biel-white-color);
    --biel-message-biel-text-color: var(--biel-white-color);
    --biel-message-biel-bg-color: #2a2a2a;
    --biel-message-user-text-color: var(--biel-white-color);
    --biel-message-user-bg-color: #2a2a2a;
    --biel-message-source-color: var(--biel-white-hover-color);
    --biel-message-source-bg-color: #3a3a3a;
    --biel-message-source-bg-hover-color: #4a4a4a;
    --biel-message-source-text-color: var(--biel-white-color);
    --biel-message-source-link-color: var(--biel-primary-color);
    --biel-suggested-questions-text-color: var(--biel-white-color);
    --biel-suggested-questions-bg-color: var(--biel-dark-color);
    --biel-feedback-bg-color: #3a3a3a;
    --biel-feedback-bg-hover-color: #4a4a4a;
    --biel-feedback-text-color: var(--biel-white-color);
    --biel-search-button-bg-color: var(--biel-dark-color);
    --biel-search-button-text-color: var(--biel-white-color);
    --biel-search-button-border-color: var(--biel-primary-color);
    --biel-search-content-text-color: var(--biel-text-color);
    --biel-search-content-bg-color: var(--biel-dark-color);
    --biel-search-content-border-color: rgba(255, 255, 255, 0.1);
    --biel-search-result-bg-color: #2b2b2b;
    --biel-search-result-bg-hover-color: #3a3a3a;
    --biel-search-result-border-color: #363636;
    --biel-search-result-title-color: var(--biel-white-color);
    --biel-search-result-description-color: var(--biel-text-color);
    --biel-search-result-mark-color: var(--biel-primary-light-color);
    --biel-code-snippet-header-text-color: var(--biel-text-color);
    --biel-code-snippet-text-color: var(--biel-white-color);
    --biel-search-filter-color: var(--biel-white-color);
    --biel-search-filter-selected-color: var(--biel-white-color);
    --biel-search-filter-bg-color: var(--biel-dark-color);
    --biel-search-filter-selected-bg-color: var(--biel-primary-color);
    --biel-search-filter-border-color: #3a3a3a;
    --biel-search-filter-hover-color: #3a3a3a;
    --biel-search-filter-selected-border-color: var(--biel-primary-color);
    --biel-terms-modal-bg-color: var(--biel-dark-color);
    --biel-terms-modal-color: var(--biel-white-color);
    --biel-terms-modal-close-btn-color: var(--biel-white-color);
    --biel-terms-modal-close-btn-color-hover: var(--biel-white-hover-color);
    --biel-search-toctree-page-bg-color: var(--biel-search-result-bg-color);
    --biel-search-toctree-page-border-color: var(--biel-search-result-border-color);
    --biel-search-toctree-page-text-color: var(--biel-white-color);
    --biel-search-toctree-count-color: var(--biel-text-color);
    --biel-search-toctree-border-color: var(--biel-search-result-border-color);
}

@media (min-width: 768px) {
    :root {
        --biel-search-button-text-display: block;
        --biel-search-button-ctrl-k-display: block;
        --biel-search-button-padding: 8px 15px;
        --biel-search-button-icon-margin-right: 5px;
        --biel-search-content-max-height: 80dvh;
        --biel-search-body-max-height: 50dvh;
    }
}

Advanced: CSS parts

For fine-grained control over specific component internals, the widget exposes CSS parts that allow you to style elements within Shadow DOM components using the ::part() pseudo-element.

info

This approach is more advanced and requires familiarity with Web Components and Shadow DOM.

How it works

Biel.ai components expose internal elements via the part attribute. You can target these from your CSS using the ::part() selector.

Basic syntax:

/* Styling a component's own parts */
component-name::part(part-name) {
  /* your styles */
}

/* Styling nested component parts (with prefix) */
parent-component::part(child-component-part-name) {
  /* your styles */
}

Key concepts:

• Main parts use simple names to avoid redundancy:

  • biel-bot::part(modal) (instead of biel-bot-modal)
  • biel-button::part(button) (instead of biel-button-button)

• Child parts use prefixed names for clarity when styled from a parent:

  • biel-bot::part(biel-message-bubble) (clearly from the biel-message component)
  • biel-search::part(biel-search-result-title) (clearly from the results list)

Finding available parts

The easiest way to discover available parts is using your browser's developer tools:

1. Right-click the component you want to style and select Inspect.
2. Locate the component tag (e.g., <biel-bot> or <biel-search>).
3. Expand its #shadow-root.
4. Look for elements with the part="..." attribute.

For example:

• Direct parts: If you see <div part="modal"> directly inside biel-bot, style it with biel-bot::part(modal).
• Nested parts: If you see <div part="bubble"> inside a nested component (e.g., <biel-message>), you must prefix it with the component name: biel-bot::part(biel-message-bubble).

Examples

Custom biel button

/* Square button with custom color */
biel-button::part(button) {
  border-radius: 8px;
  background-color: #ff5722;
  color: white;
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
  transition: all 0.2s ease;
}

/* Hover effect */
biel-button::part(button):hover {
  background-color: #f4511e;
  transform: translateY(-2px);
}

Custom chat message styling

/* Modern chat bubble design */
biel-bot::part(biel-message-bubble) {
  border-radius: 18px 18px 18px 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Message content spacing */
biel-bot::part(biel-message-content) {
  line-height: 1.6;
  padding: 4px 0;
}

Branded search interface

/* Rounded search input */
biel-search::part(biel-search-input-input) {
  border-radius: 50px;
  padding: 12px 20px;
  border: 2px solid #e0e0e0;
}

/* Highlighted results */
biel-search::part(biel-search-result-container) {
  border-left: 3px solid #667eea;
  transition: all 0.2s ease;
}

biel-search::part(biel-search-result-container):hover {
  transform: translateX(4px);
}