@candid-leap/wf-algolia

Attribute-driven Algolia search integration for Webflow sites. Drop a single <script> tag, mark up your Webflow site with wf-algolia-* HTML attributes, and the script wires search, filters, pagination, and Algolia Insights — no JavaScript required.

Install

Paste this into your Webflow site under Project Settings → Custom Code → Footer Code:

<script
  src="https://cdn.jsdelivr.net/npm/@candid-leap/wf-algolia@0/dist/index.js"
  data-wf-algolia-app-id="YOUR_ALGOLIA_APP_ID"
  data-wf-algolia-search-key="YOUR_ALGOLIA_SEARCH_ONLY_KEY"
  data-wf-algolia-index="YOUR_INDEX_NAME">
</script>

Find your App ID and Search-only API key in your Algolia dashboard under API Keys.

⚠️ Use the Search-only key, never the Admin key — the script runs in the browser and any key in the script tag is publicly visible.

Quick start

1. Add the <script> above to your site.
2. Mark up an input as the search box: <input wf-algolia-element="search-input">.
3. Mark up a results container: <div wf-algolia-element="results">…</div>.
4. Inside results, add an item template: <div wf-algolia-element="item">…</div>.
5. Use wf-algolia-field="<algolia-attribute>" on text/image elements inside the item to bind data.

Subresource Integrity (SRI) — production sites

jsdelivr auto-publishes SRI hashes per version. For a hardened production install, look up the sha384 hash for your pinned version and add it to the script tag:

<script
  src="https://cdn.jsdelivr.net/npm/@candid-leap/[email protected]/dist/index.js"
  integrity="sha384-..."
  crossorigin="anonymous"
  data-wf-algolia-app-id="..."
  data-wf-algolia-search-key="..."
  data-wf-algolia-index="...">
</script>

Find the hash at https://www.jsdelivr.com/package/npm/@candid-leap/wf-algolia → "Get SRI" → pick the dist/index.js entry.

Attribute reference

Full reference: see the GitHub repo source under src/core/attributes.ts for the canonical list. A polished customer-facing reference is in progress (R12).

Browser support

Modern evergreens (Chrome, Firefox, Safari, Edge — last 2 major versions). No IE11.

Releasing

Release notes live in packages/shared-types/src/data/scriptReleases.json, which is the single source of truth — it feeds the version picker in the Designer Extension, the /api/script/releases endpoint, and the GitHub Release body. There is no CHANGELOG.md.

1. Describe the release by filling in the manifest's unreleased block:

   "unreleased": {
     "summary": "One customer-facing line",
     "notes": ["What changed, in plain language."],
     "breaking": false
   }

   Write for a Webflow designer, not a developer: name the attribute or element they will type, and say what it does for them.

2. Dispatch the publish workflow (Actions → "Publish — @candid-leap/wf-algolia"), choosing a bump type. Run it with dry_run: true first.

3. CI does the rest: it refuses to publish if unreleased is missing or empty, then stamps the draft with the computed version and publish date, commits it alongside the version bump, and uses it as the GitHub Release body.

The gate is keyed on the draft rather than the version number because the version is computed inside CI — you cannot know in advance whether your bump lands on 1.0.5 or 1.1.0.

A newly published version appears in the extension's version picker only after the backend redeploys from main.

Security

• Browser bundle ships only the search-only Algolia key (you set it in the script-tag attribute).
• Admin API keys MUST stay server-side. They are never read by this script.
• Subresource Integrity (SRI) hashes are auto-published by jsdelivr — wire them into your script tag for production sites.

License

ISC © Candidleap. Published to npm by candid-leap.