@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.

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.

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.