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.

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.
email	Type: string Default value: `` An email address or ID to identify the user initiating the conversation. This value is displayed under "Email" in the project dashboard.
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).
input-placeholder-text	Type: string Default value: Type your message Placeholder text displayed in the chatbot's input field.
modal-position	Type: string Default value: center Available values: center, top-center, bottom-right, bottom-left Position of the modal.
send-button-text	Type: string Default value: Send Text displayed on the send button next to the input field.
suggested-questions-title	Type: string Default value: Suggested questions Title text displayed above the suggested questions section.
show-terms-modal	Type: boolean Default value: false When set to true, displays a terms and conditions modal before starting the chat.
terms-title	Type: string Default value: Chatbot Terms & Conditions Title text for the terms and conditions modal.
terms-description	Type: 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-checkbox-text	Type: string Default value: I have read and agree to the Terms & Conditions. Text displayed next to the terms acceptance checkbox.

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.
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.
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.
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-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-filters	Type: boolean Default value: true When set to true, hides the selector for filtering by source.
hide-icon	Type: boolean Default value: false When set to true, the button icon hides.
modal-position	Type: string Default value: top-center Available values: center, top-center, top-right, bottom-left Position of the modal.
search-placeholder	Type: string Default value: "Search..." Placeholder for the search input.

note

Currently, only a subset of properties are available to customize the chatbot from the biel-search-button component. If you need to customize properties that are not listed here, please contact us and we'll be happy to help with your specific needs.