Layout

The Biel.ai chatbot 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.

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.