Description

An embeddable search component for company homepages that handle direct bookings. Visitors search availability, pick dates, and reserve stays or enroll into events.

Adding to your site

Paste these two lines into any page — WordPress, plain HTML, anywhere. Set domain to your store URL, and the filter bar will load its settings and appear ready to use.

<willba-filter-bar
  domain="customer.willba.store"
  mode="dark"
></willba-filter-bar>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/embed.umd.js"></script>

The filter bar is fully self-contained and runs isolated from the rest of the page — your theme, plugins, and other scripts won't interfere with it, and it won't affect them.

Available HTML attributes

| Attribute | Purpose | Default | | ------------ | ------------------------------------------------------------------------------------- | ------------- | | domain | Host that serves the filter bar settings. | (required) | | mode | "dark" or "light". | "light" | | language | "fi" or "en". Any other value falls back to the default. | "fi" | | full-width | Add this attribute to make the filter bar stretch to the full width of its container. | not stretched |

Positioning on the page

You can wrap the element however you like — it behaves like any block-level HTML element. Use style or your own CSS class on <willba-filter-bar> to control margin, alignment, max-width, etc.

<willba-filter-bar
  domain="customer.willba.store"
  style="display: block; max-width: 900px; margin: 40px auto;"
></willba-filter-bar>

Note: only outer-layout styles (margin, padding, display, width, max-width, alignment) affect the element. The filter bar's internal styling is sealed and cannot be customized from the host page.