# Widget customization > For the complete documentation index, see [llms.txt](/llms.txt) > All available properties for the biel-button and biel-search-button widgets. Configure the chatbot and search widgets by setting HTML attributes. All properties support i18n — override any text property to localize the widget. ## biel-button The `` component adds a floating AI chat button to your site. ![Biel bot](./images/biel-widget-docs.png) ### Usage ```html Ask AI ``` ### Chatbot button properties | 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. | | `ai-icon` | **Type**: `string`**Default value**: `bot`**Available values:** `bot`, `sparks`, `question-mark`Specifies which AI icon to display in the button.| | `hide-avatars` | **Type**: `boolean`**Default value**: `false`When set to `true`, hides avatars in the chat interface.| | `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.| | `api-url` | **Type**: `string`**Default value**: `https://app.biel.ai`Override the base API URL. Use this for self-hosted or custom API endpoints.| | `embedded-mode` | **Type**: `boolean`**Default value**: `false`Renders the chatbot inline in the page layout instead of as a floating button. See [Embedded mode](https://docs.biel.ai/customization/embedded-mode.md).| | `show-powered-by` | **Type**: `boolean`**Default value**: `true`Show or hide the "Powered by Biel.ai" text. Hiding requires a Professional plan or above.| ### Chatbot modal properties | 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. | | `metadata` | **Type**: `string`**Default value**: ``Custom metadata to attach to chat sessions. Use this to pass additional contextual information (e.g., user plan, page URL, or other identifiers) that will be associated with the conversation for analytics 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. | | `hide-sources` | **Type**: `boolean`**Default value**: `false`When set to `true`, hides the sources section from AI responses in the chat interface. | | `hide-settings-button` | **Type**: `boolean`**Default value**: `false`When set to `true`, hides the settings button (reasoning mode selector) from the chatbot header. Only applies if your project has the reasoning mode plugin enabled. | | `hide-connect-button` | **Type**: `boolean`**Default value**: `false`When set to `true`, hides the Connect button from the chatbot header. This button allows users to connect to MCP (Model Context Protocol) servers. When hidden, users won't be able to access MCP connection options even if MCP is enabled for the project. | | `hide-tooltips` | **Type**: `boolean`**Default value**: `false`When set to `true`, hides the tooltips that appear when hovering over header icons. | | `modal-position` | **Type**: `string`**Default value**: `center`**Available values:** `center`, `top-center`, `top-left`, `top-right`, `center-left`, `center-right`, `bottom-left`, `bottom-right`, `sidebar-left`, `sidebar-right`Determines where the chat modal appears on the screen when opened. Use `sidebar-left` or `sidebar-right` to dock the chat as a side panel.| | `show-terms-modal` | **Type**: `boolean`**Default value**: `false`When set to `true`, displays a terms and conditions modal before starting the chat. | | `think-mode-enabled` | **Type**: `boolean`**Default value**: `false`When set to `true`, selects Think mode by default (instead of Auto) for deeper AI reasoning. Users can still change modes via the settings dropdown unless you also set `hide-settings-button` to `true`. Requires the reasoning mode plugin to be enabled for your project. See [Reasoning modes](https://docs.biel.ai/customization/reasoning-modes.md) for details. | | `keep-conversation` | **Type**: `boolean`**Default value**: `true`When set to `false`, clears the conversation history on page navigation. By default, conversation history persists until the user refreshes or closes the browser. | | **MCP Integration** | | | | `mcp-server-url` | **Type**: `string`**Default value**: ``Override the MCP server URL. Use for custom or self-hosted MCP servers, or when authentication is required. Takes priority over the API-provided URL. See [MCP Server](https://docs.biel.ai/integrations/mcp-server.md). | | **Text** | | | | `assistant-label` | **Type**: `string`**Default value**: `Assistant`Label text displayed above AI responses in the chat. | | `close-button-text` | **Type**: `string`**Default value**: `Close`Tooltip text for the close button in the chatbot header. | | `collapse-button-text` | **Type**: `string`**Default value**: `Collapse`Tooltip text for the collapse button in the chatbot header. | | `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. | | `expand-button-text` | **Type**: `string`**Default value**: `Expand`Tooltip text for the expand button in the chatbot header. | | `footer-text` | **Type**: `string`**Default value**: `AI answers may be inaccurate. Verify with official sources.`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. | | `connect-button-text` | **Type**: `string`**Default value**: `Connect`Tooltip text for the Connect button in the chatbot header. | | `mcp-url-text` | **Type**: `string`**Default value**: `MCP URL`Label for the MCP URL option in the connect dialog. | | `mcp-url-description` | **Type**: `string`**Default value**: `Copy to clipboard`Description text for the MCP URL option in the connect dialog. | | `mcp-claude-text` | **Type**: `string`**Default value**: `Claude Code`Label for the Claude Code option in the connect dialog. | | `mcp-claude-description` | **Type**: `string`**Default value**: `CLI command`Description text for the Claude Code option in the connect dialog. | | `mcp-copilot-text` | **Type**: `string`**Default value**: `Copilot (VS code)`Label for the Copilot option in the connect dialog. | | `mcp-copilot-description` | **Type**: `string`**Default value**: `Opens in a new tab`Description text for the Copilot option in the connect dialog. | | `mcp-cursor-text` | **Type**: `string`**Default value**: `Cursor`Label for the Cursor option in the connect dialog. | | `mcp-cursor-description` | **Type**: `string`**Default value**: `Opens in a new tab`Description text for the Cursor option in the connect dialog. | | `mcp-copied-text` | **Type**: `string`**Default value**: `Copied!`Confirmation text shown after copying an MCP value to the clipboard. | | `mcp-url-copied-description` | **Type**: `string`**Default value**: `URL copied to clipboard`Description text shown after copying the MCP URL. | | `mcp-claude-copied-description` | **Type**: `string`**Default value**: `Command copied to clipboard`Description text shown after copying the Claude Code command. | | `refresh-button-text` | **Type**: `string`**Default value**: `Refresh`Tooltip text for the refresh button in the chatbot header. | | `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. | | `settings-button-text` | **Type**: `string`**Default value**: `Settings`Tooltip text for the settings button (reasoning mode selector) in the chatbot header. Only visible if your project has the reasoning mode plugin enabled. | | `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 Terms & Conditions 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. | | `copy-button-text` | **Type**: `string`**Default value**: `Copy`Tooltip text for the copy button on code snippets. | | `copied-button-text` | **Type**: `string`**Default value**: `Copied!`Text shown after copying a code snippet. | | `think-mode-auto-text` | **Type**: `string`**Default value**: `Auto`Label for the Auto reasoning mode in the settings dropdown. | | `think-mode-auto-description` | **Type**: `string`**Default value**: `Balances speed and quality`Description for the Auto reasoning mode. | | `think-mode-fast-text` | **Type**: `string`**Default value**: `Instant`Label for the Instant reasoning mode in the settings dropdown. | | `think-mode-fast-description` | **Type**: `string`**Default value**: `Prioritizes speed`Description for the Instant reasoning mode. | | `think-mode-think-text` | **Type**: `string`**Default value**: `Think`Label for the Think reasoning mode in the settings dropdown. | | `think-mode-think-description` | **Type**: `string`**Default value**: `Takes longer for better accuracy`Description for the Think reasoning mode. | | `welcome-message` | **Type**: `string`**Default value**: ""A custom greeting message that appears when users first open the chat. | ## biel-search-button The `` component adds an AI-powered search bar to your site. ![Biel search](./images/biel-search-widget.png) ### Usage ```html Search ``` ### Search button properties | 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](https://fonts.google.com/specimen/Inter) 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. | | `ai-icon` | **Type**: `string`**Default value**: `bot`**Available values:** `bot`, `sparks`, `question-mark`Specifies which AI icon to display in the search button.| | `hide-avatars` | **Type**: `boolean`**Default value**: `false`When set to `true`, hides avatars in the chat interface.| | `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 | Property | Description | |------------------------|-----------------------------------------------------------------------------------------------| | **Layout** | | | | `hide-ask-ai-button` | **Type**: `boolean`**Default value**: `false`When set to `true`, the "Ask AI" button is hidden from the search results. | | `hide-descriptions` | **Type**: `boolean`**Default value**: `false`When set to `true`, hides descriptions in search results for a cleaner interface.| | `hide-filters` | **Type**: `boolean`**Default value**: `true`When set to `false`, enables the source filter bar in the search modal, allowing users to narrow results by category. Requires at least one active search filter configured in your project settings. For more details, see [Search filters](https://docs.biel.ai/customization/search-filters.md). | | `hide-navigation-buttons` | **Type**: `boolean`**Default value**: `false`When set to `true`, hides navigation buttons (up and down arrows, enter, escape) in the search modal for a simplified interface. | | `modal-position` | **Type**: `string`**Default value**: `top-center`**Available values:** `center`, `top-center`, `top-left`, `top-right`, `center-left`, `center-right`, `bottom-left`, `bottom-right`, `sidebar-left`, `sidebar-right`Position of the search modal. Use `sidebar-left` or `sidebar-right` to dock as a side panel.| | `stacked` | **Type**: `boolean`**Default value**: `false`When set to `true`, displays search results in a stacked layout.| | `clean-titles` | **Type**: `boolean`**Default value**: `false`When set to `true`, removes site names from page titles that follow the format "Page Title | Site Name" for cleaner presentation.| | **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 or ask AI..."`Placeholder for the search input. | ### Search chatbot modal properties Most properties that can be defined in `` for configuring the chatbot modal can be set in the `biel-search-button`. For details, see [Chatbot modal properties](#chatbot-modal-properties). ## Common customizations ### Change the chatbot title By default, the chatbot header displays "Company Name AI". Set the `header-title` property to show your own title: ```html Ask AI ``` ### Change the button text Replace the inner text of the element to change what the button says: ```html Help ```