Install the script

One script tag in your site footer. It reads wf-algolia-* attributes off your published DOM and turns them into Algolia queries — there is nothing else to install and no build step.

Before you start

You need an Algolia index with data in it, plus two values from Algolia Dashboard → Settings → API Keys:

your Application ID
your Search-Only API key

No index yet? Start at Set up your Algolia index.

Never paste your Admin key

Everything in a script tag is public — any visitor can read it. The Search-Only key can only search. The Admin key can delete your index.

Add the script

In Webflow, open Project settings → Custom code and paste this into Footer code:

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

Then Save changes and Publish.

Applies to<script> tag
Your Algolia Application ID. The script finds itself by this attribute.
Applies to<script> tag
Search-Only API key. Never the Admin key.
Applies to<script> tag
Default index. Elements without their own wf-algolia-index inherit it.

Why footer, and why `type="module"`

Footer, not Head. The script reads attributes off your elements. In the footer, the DOM it needs already exists.

type="module" is required. The CDN publishes an ES module. Without it the browser parses the file as a classic script and throws on the first import.

async is safe. Module scripts are deferred by default; async lets the script run as soon as it has downloaded instead of waiting for the rest of the document. Webflow's own Webflow.push() ready-queue is unaffected either way.

One script tag per site. The script locates its own configuration with document.querySelector('script[data-app-id]') — the first matching tag on the page. A second tag carrying data-app-id is simply ignored, which looks exactly like the wrong config being used.

Check that it loaded

The fastest check is in the extension: open WF-Algolia in the Designer and go to the install screen. It fetches your published site and reports one of four answers, with a Check again button for after you publish.

What it says	What it means
Script installed	The tag was found, and it names the host it was found on
Not detected yet	The page loaded but the tag is not in it — paste the snippet and republish
Not published yet	There is nothing published to look at yet
Couldn't verify	The site could not be reached, often password protection

The last two are not failures. A password-protected site can be correctly installed and still invisible to the check.

To confirm by hand, open your published URL and the browser console:

You should see a large green line: [wf-algolia] Script initialized with App ID: … at 2026-08-04T… That is the script confirming it read your config.
Type window.WfAlgolia and press Enter. You should get an object, not undefined.

If either is missing, go to Verify your setup.

Optional flags

Everything below has a working default. Add them only when you want to change one.

Tracking, timing and class names

Snippets, highlighting and autocomplete timing

The autocomplete fallback is a chain, not a default

data-autocomplete-debounce is read first. If it is absent the script uses data-debounce, and only if that is also absent does it use 150. So setting data-debounce="400" slows the autocomplete to 400ms too, unless you set data-autocomplete-debounce explicitly.

See the Script tag reference for the full catalog.

When it goes wrong

Initialization runs inside a try/catch, so configuration failures appear in the console prefixed with [wf-algolia] Initialization failed: followed by the underlying error.

Console message	Cause	Fix
`Script tag missing data-app-id attribute`	No tag on the page carries	Paste the snippet into Footer code and republish
`data-app-id and data-search-key are required`	One of the two is present but empty	Fill both values
`Cannot use import statement outside a module`	`type="module"` is missing	Add it to the `<script>` tag
Nothing at all in the console	The file never loaded	Check for a Content Security Policy blocking `cdn.jsdelivr.net`

If your site sets a CSP, add https://cdn.jsdelivr.net to script-src. Webflow exposes this under Site settings → SEO.

Before you start​

Add the script​

Why footer, and why type="module"​

Check that it loaded​

Optional flags​

When it goes wrong​

Next​