<bonsai-search> examples are listed below from minimal setup to full-page templates.
Copy-paste minimal integration
Copy-paste minimal integration
This minimal example includes required attributes, event listeners, and a small CSS override.
<!-- Load Bonsai Search Web Component -->
<script
src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-3.0.9.js"
defer
></script>
<style>
bonsai-search {
--bonsai-brand-color: #0a5b3b;
--bonsai-search-max-width: 42rem;
}
</style>
<bonsai-search
api-key="API-KEY"
base-url="https://api.hibonsai.com/rest/search/v3/"
placeholder="Describe what you're looking for..."
max-results="20"
render-price
></bonsai-search>
<script>
const search = document.querySelector("bonsai-search");
search.addEventListener("search", (event) => {
console.log("Search submitted:", event.detail.query);
});
search.addEventListener("results", (event) => {
console.log("Results received:", event.detail.results.length);
});
search.addEventListener("error", (event) => {
console.error("Search error:", event.detail.error);
});
</script>
Full example with wrapper styling
Full example with wrapper styling
This example wraps the component in a container with custom CSS for layout and styling.
<!-- Load Bonsai Search Web Component -->
<script
src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-3.0.9.js"
defer
></script>
<style>
.bonsai-search-outer-container {
width: 100%;
max-width: 42rem;
margin: 4rem auto;
min-height: 350px;
}
</style>
<div class="bonsai-search-outer-container">
<bonsai-search
api-key="API-KEY"
base-url="https://api.hibonsai.com/rest/search/v3/"
placeholder="Describe what you're looking for..."
suggestions='[
"Which product is best for my space?",
"What features does this product have?",
"How does this product work?",
"How often do I need to replace the filters in my (product name)?",
"Can I buy products with my FSA/HSA?"
]'
max-results="20"
render-price
brand-color="#0A5B3B"
text-color="#303030"
muted-color="#9CA3AF"
></bonsai-search>
</div>
Component using CSS variables
Component using CSS variables
<bonsai-search
style="
--bonsai-font-body: 'Space Grotesk', sans-serif;
--bonsai-font-heading: 'Space Grotesk', sans-serif;
--bonsai-font-mono: 'IBM Plex Mono', monospace;
--bonsai-search-max-width: 100%;
--bonsai-text-color: #111111;
--bonsai-muted-color: #6b7280;
--bonsai-input-bg: #ffffff;
--bonsai-input-text-color: #111111;
--bonsai-suggestions-text-color: #111111;
--bonsai-suggestions-hover-bg: rgba(0, 0, 0, 0.06);
--bonsai-results-text-color: #eaeaea;
--bonsai-card-text-color: #111111;
"
api-key="API-KEY"
base-url="https://api.hibonsai.com/rest/search/v3/"
placeholder="Ask a question..."
suggestions='[
"What is your return policy?",
"Which product is best for me?",
"Do you offer gift cards?"
]'
theme="dark"
></bonsai-search>
Full page template (light theme)
Full page template (light theme)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bonsai Search (Light Theme)</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
<style>
.bonsai-search-outer-container {
width: 100%;
max-width: 1200px;
margin: 4rem auto;
min-height: 350px;
}
</style>
<script
src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-3.0.9.js"
defer
></script>
</head>
<body style="background: #ffffff">
<div class="bonsai-search-outer-container">
<bonsai-search
style="
--bonsai-font-body: 'Space Grotesk', sans-serif;
--bonsai-font-heading: 'Space Grotesk', sans-serif;
--bonsai-font-mono: 'IBM Plex Mono', monospace;
--bonsai-search-max-width: 100%;
"
api-key="API-KEY"
base-url="https://api.hibonsai.com/rest/search/v3/"
placeholder="Ask a question..."
suggestions='[
"What is your return policy?",
"Which product is best for me?",
"Do you offer gift cards?",
"How long does shipping take?",
"Can I book an appointment online?"
]'
markdown
theme="light"
brand-color="#0A5B3B"
text-color="#111111"
muted-color="#6b7280"
input-bg="#f5f5f5"
input-text-color="#111111"
suggestions-text-color="#111111"
suggestions-hover-bg="rgba(0, 0, 0, 0.06)"
card-bg="#ffffff"
surface-color="#ffffff"
canvas-color="#fafafa"
image-object-fit="cover"
></bonsai-search>
</div>
</body>
</html>
Full page template (dark theme)
Full page template (dark theme)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bonsai Search (Dark Theme)</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
<style>
.bonsai-search-outer-container {
width: 100%;
max-width: 1200px;
margin: 4rem auto;
min-height: 350px;
}
</style>
<script
src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-3.0.9.js"
defer
></script>
</head>
<body style="background: #000000">
<div class="bonsai-search-outer-container">
<bonsai-search
style="
--bonsai-font-body: 'Space Grotesk', sans-serif;
--bonsai-font-heading: 'Space Grotesk', sans-serif;
--bonsai-font-mono: 'IBM Plex Mono', monospace;
--bonsai-search-max-width: 100%;
"
api-key="API-KEY"
base-url="https://api.hibonsai.com/rest/search/v3/"
placeholder="Ask a question..."
suggestions='[
"What is your return policy?",
"Which product is best for me?",
"Do you offer gift cards?",
"How long does shipping take?",
"Can I book an appointment online?"
]'
markdown
theme="dark"
card-bg="#ffffff"
surface-color="#ffffff"
input-bg="#ffffff"
input-text-color="#111111"
suggestions-text-color="#111111"
results-text-color="#eaeaea"
card-text-color="#111111"
muted-color="#6b7280"
suggestions-hover-bg="rgba(0, 0, 0, 0.06)"
image-object-fit="cover"
></bonsai-search>
</div>
</body>
</html>
Next
- For issue resolution, see Troubleshooting.
- For release/version notes, see Changelog.