Skip to main content

​
Bonsai Concierge

Current channel: https://assets.hibonsai.com/sdk/bonsai-agent-latest.js. The -latest.js alias always serves the current stable release.

​
v0.27.0 — 2026-08-10 — Compact Launcher on Small Phones

The launcher now stays a labelled control on narrow phones instead of collapsing to an icon-only button. What changed
  • At 380px and narrower, every launcher renders as a compact tab pinned to the side of the viewport and centered vertically — 8px outer radius, 14px text and icon — whatever launcher-variant and bubble-* position you set. It hides itself while the panel is open.
  • New launcher-compact-label attribute supplies the short text used at that width. Without it, label is reused when it is 10 characters or shorter, otherwise it falls back to Ask AI.
  • New --bonsai-agent-bubble-compact-* variables (top, padding, gap, font size, radius, icon size) control the compact tab. Pinning the base variable does not carry over — set the compact twin as well.
  • launcher-icon now defaults to sparkles rather than the Bonsai mark, so a text-only launcher no longer shows our glyph on your storefront. Set launcher-icon="mark" to keep the previous default.
If you pinned launcher styling Add the -compact-* twin of any launcher variable you set inline, or the 380px tier will use its own default at that width. See Responsive behavior.

​
Bonsai Search SDK

Current channel: https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-latest.js (and bonsai-searchbar-webcomponent-latest.js). The -latest.js alias always serves the current stable release — no URL change is required to get new versions.
The authoritative SDK changelog lives in the repo at sdk/CHANGELOG.md. The entries below summarize the changes most likely to affect your integration.

​
v3.20.1 — 2026-07-09 — Filters and Browse

  • filters enables filter metadata loading and the default filter UI.
  • pre-search-mode="none|filters-only|browse" controls pre-query rendering and browse behaviour.
  • initial-filters accepts a JSON filter object; sync-filters-to-url reads and writes the filters and browse URL params.
  • filter-fields restricts which fetched dimensions are shown.
  • on-filter-panel-render, on-filter-group-render and on-filter-control-render let a host page replace the default filter rendering.
  • Filters can also be driven per-tenant from the Settings API (filters.enabled, filters.pre_search_mode, filters.visible_fields).

​
v3.13.4 — 2026-04-28 — Card Surfaces Default to Transparent

Check this one if your dark embed looks flat.
  • --bonsai-card-bg now defaults to transparent instead of #f5f5f5. Cards sit directly on your page background unless you set a surface.
  • Added --bonsai-content-padding (12px 0), --bonsai-card-radius (12px) and --bonsai-image-radius (12px), also exposed through the Settings API under layout.*.

​
v3.13.1 — 2026-04-27 — Dark Theme Takes Priority Over Page CSS

Breaking for anyone theming a dark embed. The dark palette moved onto an element inside the component’s shadow root so that it always paints. The consequence is that under theme="dark" — and under theme="auto" on a dark-preference visitor — 21 colour and shadow variables can no longer be overridden from your page, by inline style="", or by the Settings API. If you set theme="dark" and your own colours, your colours are being discarded. See Dark theme for the list and the supported alternative: set theme="light" and supply the palette yourself. Also in this release: dark-mode input surfaces flipped to white with dark text, and missing-image placeholders no longer fire spuriously on lazy-loaded cards below the fold.

​
v3.13.0 — 2026-04-27 — Theme Option on the JS Class

  • theme (light / dark / auto) added to the BonsaiSearch JS class config; previously only the web components accepted it.
  • theme="auto" now reacts to OS prefers-color-scheme changes at runtime.
  • The theme attribute is applied synchronously during render, removing the flash of light content during the config fetch.

​
v3.2.0 — 2026-02-25 — CSS Variables Become the Styling Model

Breaking change. Attribute-based theming was removed in favor of CSS custom properties. This is the biggest integration-facing change in the 3.x line.

​
What changed

  • Attributes like brand-color, text-color, muted-color, input-bg, card-bg, surface-color, canvas-color, input-text-color, suggestions-text-color, results-text-color, card-text-color, suggestions-hover-bg are no longer observed by <bonsai-search> or <bonsai-searchbar>. Setting them has no effect.
  • All visual customization is now driven by CSS custom properties on the host element (or an ancestor) — see Advanced Styling.
  • The web components now render an outer alignment container and an inner max-width container (bonsai-search-outer-container / bonsai-search-inner-container, bonsai-searchbar-outer-container / bonsai-searchbar-inner-container) so you can control centering and width independently via --bonsai-search-align / --bonsai-searchbar-align and --bonsai-search-max-width / --bonsai-searchbar-max-width.
  • --bonsai-searchbar-margin added so vertical searchbar spacing is configurable.
  • theme="light" | "dark" | "auto" support added (was previously light only in some paths).
  • Framer and Webflow integrations now set CSS variables directly for theming.

​
How to migrate

Replace each removed attribute with the equivalent CSS variable on the host element:

​
JavaScript BonsaiSearchBar class

If you instantiate the class directly with new BonsaiSearchBar({...}), styling props were removed as well:
  • brandColor → --bonsai-brand-color
  • textColor → --bonsai-text-color
  • mutedColor → --bonsai-muted-color
  • inputBackground / inputBg → --bonsai-input-bg
  • suggestionsTextColor → --bonsai-suggestions-text-color
  • inputTextColor → --bonsai-input-text-color
  • suggestionsHoverBg → --bonsai-suggestions-hover-bg
  • inputOpacity → --bonsai-input-opacity

​
Runtime Config from the Settings API

Both <bonsai-search> and <bonsai-searchbar> fetch per-tenant configuration from /rest/search-component-config/ at load time using your api-key. The Settings API can drive:
  • Theming (colors, alignment, max width)
  • Default placeholder and suggestions
  • Behavior toggles (theme, markdown rendering, price rendering, product hiding, autocomplete)
  • Result section labels (featured_items_label, more_items_label, items_label)
Precedence (highest to lowest):
  1. HTML attribute on the tag (if set)
  2. Settings API response for this API key
  3. Built-in default
Page CSS for --bonsai-* variables overrides both, because Settings-API variables are injected at low :host { ... } specificity.

​
New <bonsai-search> capabilities

  • hide-products — boolean attribute that hides product results so only the AI summary is shown. Useful for conversational integrations.
  • on-price — name of a global function used to format prices before rendering. Receives (result, price, parent) and returns the string to display.

​
Upgrading

If you pin a version in your script URL (bonsai-search-webcomponent-<version>.js), switch to the -latest.js alias to always get the current stable release. No other change is required unless your integration still sets removed color attributes — in that case, move them to CSS custom properties per the table above. For the full release history (including pre-3.2 entries), see sdk/CHANGELOG.md in the Bonsai repository.