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.
api-key	Type: string Default value: `` API key for authenticating requests to private projects. Required for private projects with create_chat and project_read permissions. Not required for public projects.

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 or API key is invalid or not authorized 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.
api-key	Type: string Default value: `` If project is marked as private, API key with "create_chat, project_read, and project_search" permissions is required. If public, not needed.
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.
api-key	Type: string Default value: `` API key for authenticating requests to private projects. Required for private projects with create_chat, project_search, and project_read permissions. Not required for public projects.

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.