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>
Chatbot button properties
The table below lists all the available properties that modify the button:
Property | Description |
---|---|
Layout | |
project | Required Type: string The project ID. |
button-position | Type: 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-style | Type: 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-font | Type: 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-icon | Type: 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:
Property | Description |
---|---|
Layout | |
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 for conversation tracking. This ID will be associated with the chat session in your project dashboard for analytics and user tracking purposes. |
expand-modal | Type: boolean Default value: false When set to true , the chat modal opens in its expanded state by default. |
hide-close-button | Type: boolean Default value: false When set to true , the close icon hides. |
hide-expand-button | Type: boolean Default value: false When set to true , the expand button icon hides. |
hide-refresh-button | Type: boolean Default value: false When set to true , the refresh button hides. |
hide-feedback | Type: 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-position | Type: 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-modal | Type: boolean Default value: false When set to true , displays a terms and conditions modal before starting the chat. |
Text | |
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. |
input-placeholder-text | Type: string Default value: Type your message Placeholder text displayed in the chatbot's input field. |
send-button-text | Type: string Default value: Send Text displayed on the send button next to the input field. |
sources-text | Type: string Default value: Sources Text displayed for introducing sources in messages. |
suggested-questions | Type: 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-title | Type: string Default value: Suggested questions The heading text that appears above the list of suggested questions in the chat interface. |
terms-checkbox-text | Type: string Default value: I have read and agree to the Terms & Conditions. Text displayed next to the terms acceptance checkbox. |
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-title | Type: string Default value: Chatbot Terms & Conditions Title text for the terms and conditions modal. |
welcome-message | Type: 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.
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:
Property | Description |
---|---|
Layout | |
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. |
hide-ctrl-k | Type: boolean Default value: false When set to true , the Ctrl+K text hides. |
hide-icon | Type: 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:
Property | Description |
---|---|
Layout | |
hide-filters | Type: boolean Default value: true When set to true , removes the source filter dropdown from the search modal, simplifying the search interface. |
modal-position | Type: string Default value: top-center Available values: center , top-center , top-right , bottom-left Position of the modal. |
Text | |
ai-result-fragment | Type: string Default value: "Ask AI to answer your question" Text displayed in the AI result section of the search modal. |
search-placeholder | Type: 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.