Layout

The Biel.ai widget is highly customizable, allowing you to customize its behavior to suit your application's needs. This page lists all available properties you can use to adjust the behavior and appearance of the Biel.ai button in your application.

biel-button

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

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>

Properties

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

Property	Description
project	Required Type: string The project ID.
button-position	Type: string Default value: default Available values: default, bottom-right, center-right Position of the button.
button-style	Type: string Default value: default Available values: default, dark, light Style of the button.
custom-font	Type: 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.
disable-input	Type: boolean Default value: false When set to true, the user input field is disabled.
error-message-4-0-3	Type: string Default value: Oops! The request URL does not match the one defined for this project. 403 unauthorized message.
error-message-4-0-4	Type: string Default value: Oops! We could not find the provided project ID. 404 not found message.
error-message-default	Type: string Default value: Oops! Please try again later. 500 error message.
expand-modal	Type: boolean Default value: false When set to true, the modal opens expanded.
footer-text	Type: string Default value: AI generated answers. Always verify the sources before using them. Footer text.
header-title	Type: string Default value: Company Name AI Title text for the chatbot header.
hide-expand-button	Type: boolean Default value: false When set to true, the expand button icon hides.
hide-feedback	Type: boolean Default value: false When set to true, feedback options for the user are hidden.
hide-icon	Type: boolean Default value: false When set to true, the button icon hides.
initial-messages	Type: array Default value: [] Array of initial messages to be displayed in the chat. Each message should include text and sender (either user or ai).
modal-position	Type: string Default value: center Available values: center, bottom-right, bottom-left Position of the modal.

biel-search-button

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

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>

Properties

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

Property	Description
project	Required Type: string The project ID.
button-style	Type: string Default value: default Available values: default, rounded Style of the button.
search-placeholder	Type: string Default value: "Search..." Placeholder for the search input.
footer-text	Type: string Default value: AI generated answers. Always verify the sources before using them. Footer text.
header-title	Type: string Default value: Company Name AI Title text for the chatbot header.
hide-ctrl-k	Type: boolean Default value: false When set to true, the Ctrl+K text hides.
hide-feedback	Type: boolean Default value: false When set to true, feedback options for the user are hidden.
hide-icon	Type: boolean Default value: false When set to true, the button icon hides.
error-message-4-0-3	Type: string Default value: Oops! The request URL does not match the one defined for this project. 403 unauthorized message
error-message-4-0-4	Type: string Default value: Oops! We could not find the provided project ID. 404 not found message.
error-message-default	Type: string Default value: Oops! Please try again later. 500 error message.