> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hibonsai.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Bonsai Concierge
> Self-serve guide for integrating the Bonsai Concierge chat web component into your website
## Getting Started
Before getting started, ensure that you've had a chance to review the [Quickstart prerequisites](/project/docs/quickstart#prerequisites).
The Concierge is a conversational shopping assistant. It adds a floating launcher button to your storefront; opening it slides in a chat panel where shoppers can ask questions in natural language and get answers grounded in your catalog.
If you want a search box or a full search results page rather than a conversation, use the [Bonsai Search Bar](/project/docs/bonsai-searchbar/integration) or [Bonsai Search](/project/docs/bonsai-search/integration) instead.
## Quick Installation
Use this minimal 2-step setup to render the Concierge on your website.
**Theming is managed in the Bonsai dashboard.** When the component loads, it fetches your tenant's brand colors using your `api-key` and applies them automatically. You can override any value per-embed with CSS custom properties set inline on the element — see [Advanced Styling](/project/docs/bonsai-concierge/styling).
Add the Concierge `
```
The `-latest` alias always serves the current release. To pin a specific version instead, replace `latest` with the version number — for example `bonsai-agent-0.22.0.js`.
Add `` anywhere in the ``. The launcher positions itself as a fixed overlay, so its position in the DOM does not matter.
Only `api-key` is required.
```html theme={null}
```
Click the launcher and ask something a shopper would ask. Not working? Check the [Troubleshooting](/project/docs/troubleshooting) guide for common issues.
## Placement on your site
The Concierge is designed to be present on every page, not just a search page. Add the tag once in your theme layout so shoppers can open it from anywhere.
The launcher is fixed to the bottom-right corner by default. If it collides with an existing element — a cookie banner, a live-chat widget, a sticky add-to-cart bar — move it rather than hiding it:
```html theme={null}
```
## Choosing a launcher style
The launcher has three independent settings: its shape (`launcher-variant`), what it shows (`launcher-content`), and which side it anchors to (`launcher-side`).
```html theme={null}
```
**Set `launcher-icon-url` if you want your own glyph.** On phones 380px and narrower the launcher hides its text label and shows only its icon. Without `launcher-icon-url`, that icon is the built-in Bonsai mark, so your storefront will show our glyph rather than yours at that width. `header-icon-url` is a different attribute — it supplies the logo inside the opened panel and is **not** reused for the launcher. See [Responsive behavior](/project/docs/bonsai-concierge/styling#responsive-behavior).
## Opening the chat from your own UI
To open the Concierge from an existing button, a nav link, or an empty-search-results state, dispatch a `bonsai:open-chat` event on `window`. It reuses the configuration already on your `` tag, so you do not repeat your API key:
```html theme={null}
```
You can seed the conversation with a question by passing it in the event detail:
```html theme={null}
```
This requires a `` on the page — it is what supplies the configuration. See [Events & API](/project/docs/bonsai-concierge/events) for the full surface.
## Next Steps
Full attribute reference and default values for the Concierge component.
CSS variable reference, launcher tokens, and responsive behavior.
The `window.BonsaiAgent` global and the support handoff event.
Common integration issues and how to resolve them.