An embeddable search widget built with Preact, Vite, and Vanilla Extract. This widget can be integrated into any website to provide a customizable search interface.
- 🚀 Built with Preact for minimal bundle size
- 🎨 Styled with Vanilla Extract for type-safe, zero-runtime CSS
- 📦 Bundled with Vite for optimal performance
- 🔌 Framework-agnostic - works with any website
- 🎨 Customizable styles - no Shadow DOM, easy to override with CSS
- 🌐 Configurable per tenant (colors, border radius, text)
- 📱 Responsive design
The simplest way to use the widget is with automatic initialization:
<!DOCTYPE html>
<html>
<head>
<title>Search Widget Demo</title>
<!-- Import widget styles -->
<link
rel="stylesheet"
href="https://search-widget.c211.io/latest/search-widget.css"
/>
</head>
<body>
<!-- Container for the widget with tenant ID, API domain, and locale -->
<div
id="search-widget"
tid="your-tenant-id"
d="https://your-domain.com"
l="en"
wid="your-widget-id"
st="_blank"
ml="Search for resources at our partner, 211"
></div>
<!-- Load the widget script - it will auto-initialize -->
<script src="https://search-widget.c211.io/latest/search-widget.umd.js"></script>
</body>
</html>The widget will automatically detect the following attributes:
tid(required) - Tenant IDd(required) - Domainl(optional) - Locale (defaults to "en")wid(optional) - Widget ID used for analytics trackingst(optional) - Search target (e.g., "_blank", "_self", "_parent", "_top"; defaults to "_blank")ml(optional) - Modal label text to display above search inputs (e.g., "Search for resources at our partner, 211")
The widget will fetch the tenant configuration from the specified domain before rendering. The locale defaults to "en" if not specified.
The widget fetches locale-specific configuration from the CMS when it mounts. To update the locale, the widget needs to be unmounted and remounted with the new locale setting.
A convenient method is exposed on window.searchWidget that handles this automatically:
// Update the widget to Spanish
// This will unmount the current instance and remount with Spanish locale
window.searchWidget.updateLocale("es");The widget uses CSS variables for theming and does not use Shadow DOM, making it easy to customize with your own CSS:
<style>
/* Override primary color and border radius via CSS variables */
#search-widget {
--widget-primary: #764ba2;
--widget-radius: 12px;
}
/* Or target specific widget elements by ID */
#sw-container {
background-color: #764ba2 !important;
padding: 2rem !important;
}
</style>- Node.js (v24 or higher recommended)
- npm or yarn
- Clone the repository:
git clone https://github.com/211-Connect/Norse-Search-Widget.git
cd Norse-Search-Widget- Install dependencies:
yarn- Build widget in watch mode:
yarn dev- Serve demo page (
index.html) to show search widget:
yarn serveThis will start a local server at http://localhost:4173 with the demo page.
To build the widget for production:
npm run build
# or
yarn buildThe built files will be in the dist directory:
search-widget.umd.js- UMD build for direct script inclusionsearch-widget.es.js- ES module build for modern bundlerssearch-widget.css- Widget styles (required)index.html- demonstration pageindex.css- styles for the demonstration page
MIT
Contributions are welcome! Please feel free to submit a Pull Request.