Talaash

Search attributes

Build search UI in the Webflow Designer with custom attributes — the same pattern as Finsweet Attributes. Prefer the Talaash Designer Extension (Insert search layout) to place elements and attributes via Designer APIs. The search script is installed from Talaash Setup via the Custom Code API (no footer paste, no Embed HTML paste).

How installation works

In Talaash Setup, map collections, index CMS, then click Install search on site.

Talaash registers a pinned search.js through Webflow Custom Code (with integrity). Site credentials are applied on that script.

In the Designer, open the Talaash app panel and click Insert search layout (or add the attributes below by hand). Style the elements like any other Webflow UI.

Publish so the script and layout go live.

You do not paste a full HTML snippet into an Embed for required setup. Credentials come from the Custom Code install; layout is inserted by the Designer Extension (or manual attributes).

Required for minimum setup

Add these custom attributes in the Designer (Element settings → Custom attributes).

Attribute

data-search

Element: Div Block (wrapper)

Value: (empty or true)

Marks the search root. Everything for this search UI lives inside this wrapper.

Attribute

data-search-input

Element: Search / Text Input

Value: (empty or true)

The field visitors type into. Place it inside the wrapper.

Attribute

data-search-results

Element: Div or Collection List

Value: (empty or true)

Container where ranked results are injected.

Attribute

data-search-result

Element: Link / Div (result card)

Value: (empty or true)

Template for one result. Keep it inside a hidden source block (see below).

Result card fields

Inside the element with data-search-result, add children for the fields you want filled:

data-search-result-title

Heading / Text

data-search-result-snippet

Paragraph / Text

data-search-result-type

Text (collection type label)

data-search-result-image

Image

Recommended structure: wrap your result card in a Div with data-search-result-source and hide it with a class using display: none (the Designer Extension does this automatically). Do not use Designer Visibility Hidden — that strips the template from published HTML. Keep data-search-results as the empty list container. Talaash clones the template for each hit.

More attributes

Optional attributes for answers, empty states, and filters.

data-search-result-source

Put on a Div that wraps your result card template. Hide with display:none (not Designer Visibility Hidden) so the template stays in published HTML.

data-search-answer

Optional Text/Div for the AI answer grounded in hits.

data-search-loading

Shown while a full search runs (Enter / submit).

data-search-empty

Shown when a search returns no results.

data-search-filter

Optional filter controls. Value = content type slug (e.g. blog).

data-search-mode

On the wrapper: submit (default) or live (suggest while typing; Enter still runs full search).

data-search-analytics

Set to "off" on the wrapper (or script) to skip anonymous visitor/session ids. Queries may still be logged.

data-search-suggest

Set to "off" to disable autocomplete (typed text will not be sent to /suggest).

Quick Designer checklist

Div Block → attribute data-search

Inside it: Form Search or Text Input → data-search-input

Div → data-search-results (results mount)

Div with display: none → data-search-result-source containing a Link/Div with data-search-result and title/snippet/type/image children

Publish after Install search on site in Talaash Setup

Need help? See Support or continue in Setup.