Skip to main content

Widget customization

The Biel.ai widget is highly customizable, allowing you to adjust its behavior and appearance to suit your application's needs. This includes options to modify the button's text to align with your company's tone or support multiple languages (i18n).

This page lists all available properties you can use to configure the Biel.ai widget and ensure it fits within your application.

biel-button

The <biel-button> widget enables a conversational chat powered by AI in your site.

Biel bot

Usage

To customize the properties, you need to set the appropriate attributes on the <biel-button> element in your HTML. For example:

<biel-button project="YOUR_PROJECT_ID" header-title="Biel.ai chatbot" button-style="dark">Ask AI</biel-button>

Chatbot button properties

The table below lists all the available properties that modify the button:

PropertyDescription
Layout
projectRequired
Type: string

The project ID.
button-positionType: string
Default value: default
Available values: default, bottom-right, bottom-left, center-right, center-left, custom

Controls the position of the chat button on your webpage. Use custom to position the button using CSS.
button-styleType: string
Default value: default
Available values: default, dark, light

Defines the visual style of the chat button. dark uses a dark theme, light uses a light theme, and default follows your site's theme.
custom-fontType: boolean
Default value: false

When set to true, disables loading of the Inter font. Use this if your site already uses a different font to improve load time and maintain font consistency.
hide-iconType: boolean
Default value: false

When set to true, the button icon hides.

Chatbot modal properties

The table below lists all the available properties that modify the chatbot modal:

PropertyDescription
Layout
disable-inputType: boolean
Default value: false

When set to true, the user input field is disabled.
emailType: string
Default value: ``
An email address or ID for conversation tracking. This ID will be associated with the chat session in your project dashboard for analytics and user tracking purposes.
expand-modalType: boolean
Default value: false

When set to true, the chat modal opens in its expanded state by default.
hide-close-buttonType: boolean
Default value: false

When set to true, the close icon hides.
hide-expand-buttonType: boolean
Default value: false

When set to true, the expand button icon hides.
hide-refresh-buttonType: boolean
Default value: false

When set to true, the refresh button hides.
hide-feedbackType: boolean
Default value: false

When set to true, removes the feedback options (like thumbs up/down) that users can use to rate AI responses.
modal-positionType: string
Default value: center
Available values: center, top-center, bottom-right, bottom-left

Determines where the chat modal appears on the screen when opened. Choose the position that best fits your website's layout.
show-terms-modalType: boolean
Default value: false

When set to true, displays a terms and conditions modal before starting the chat.
Text
error-message-4-0-3Type: string
Default value: Oops! The request URL does not match the one defined for this project.

403 unauthorized message.
error-message-4-0-4Type: string
Default value: Oops! We could not find the provided project ID.

404 not found message.
error-message-defaultType: string
Default value: Oops! Please try again later.

500 error message.
footer-textType: string
Default value: AI generated answers. Always verify the sources before using them.

Footer text.
header-titleType: string
Default value: Company Name AI

Title text for the chatbot header.
input-placeholder-textType: string
Default value: Type your message

Placeholder text displayed in the chatbot's input field.
send-button-textType: string
Default value: Send

Text displayed on the send button next to the input field.
sources-textType: string
Default value: Sources

Text displayed for introducing sources in messages.
suggested-questionsType: array
Default value: []

An array of strings containing questions that will be shown to users when they open the chat. These questions help guide users on what they can ask the AI.
suggested-questions-titleType: string
Default value: Suggested questions

The heading text that appears above the list of suggested questions in the chat interface.
terms-checkbox-textType: string
Default value: I have read and agree to the Terms & Conditions.

Text displayed next to the terms acceptance checkbox.
terms-descriptionType: string
Default value: Please review our <a href='https://biel.ai/terms' target='_blank' rel='noopener'>Terms & Conditions</a> before proceeding.

Description text shown in the terms and conditions modal.
terms-titleType: string
Default value: Chatbot Terms & Conditions

Title text for the terms and conditions modal.
welcome-messageType: string
Default value: ""

A custom greeting message that appears when users first open the chat. Use this to set the tone and provide initial guidance for the conversation.

biel-search-button

The <biel-search-button> widget offers a search-based interaction that allows users to query documentation or other indexed content.

Biel search

Usage

To customize the properties, you need to set the appropriate attributes on the <biel-search-button> element in your HTML. For example:

<biel-search-button project="YOUR_PROJECT_ID" button-style="rounded" search-placeholder="Search here...">Search</biel-search-button>

Search button properties

The table below lists all the available properties that modify the layout:

PropertyDescription
Layout
projectRequired
Type: string

The project ID.
button-styleType: string
Default value: default
Available values: default, rounded

Style of the button.
custom-fontType: boolean
Default value: false

When set to true, the Inter font will not be loaded. Useful if your site already uses a different font, enabling a quicker load time.
hide-ctrl-kType: boolean
Default value: false

When set to true, the Ctrl+K text hides.
hide-iconType: boolean
Default value: false

When set to true, the button icon hides.

Search modal properties

The table below lists all the available properties that modify the search modal:

PropertyDescription
Layout
hide-filtersType: boolean
Default value: true

When set to true, removes the source filter dropdown from the search modal, simplifying the search interface.
modal-positionType: string
Default value: top-center
Available values: center, top-center, top-right, bottom-left

Position of the modal.
Text
ai-result-fragmentType: string
Default value: "Ask AI to answer your question"

Text displayed in the AI result section of the search modal.
search-placeholderType: string
Default value: "Search..."

Placeholder for the search input.

Search chatbot modal properties

Most properties that can be defined in <biel-button> for configuring the chatbot modal can be set in the biel-search-button.

For details, see Chatbot modal properties.