Install the script

The app installs the script for you. Open WF-Algolia in the Designer and press Install on the dashboard — it adds the script to your site's custom code, pinned to an exact version and verified with an integrity hash.

The script reads wf-algolia-* attributes off your published DOM and turns them into Algolia queries. There is no build step.

Publishing is what makes it live

Webflow applies custom code when a site is published. Until you publish, the script is set up but is not on your live site, and search will not work there. The dashboard keeps telling you so until it can see the script running on your published pages.

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.

Install it from the app

1. Open WF-Algolia in the Designer.
2. On the dashboard, press Install version 1.0.7.
3. Publish your site.

That is the whole flow. The app holds the Webflow authorization you granted at install, so it writes the script tag itself — you do not paste anything.

What gets installed

For reference, this is the tag the app writes into your site's Head code. You do not need to copy it or edit it: the app fills in your credentials and keeps the version current. It is shown so you can recognise it if you ever need to find it.

An exact version, never a moving target:

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

Two details are worth understanding, because they are the reason updates work the way they do:

• The version is exact. Your site stays on the version you installed. We cannot change the code running on your live site by publishing a new release — you decide when to move, from the dashboard.
• integrity pins the file's contents. The browser hashes the file it downloads and refuses to run it if the hash does not match. If the CDN ever served something other than what we published, your visitors run nothing rather than running it.

Updating

When a newer version exists, the dashboard shows Update to 1.0.x with a one-line summary of what changed. Press it, then publish. Nothing about your live site changes until you do both.

If you would rather read first, every release is listed in the changelog.

Going back to an earlier version

Your site stays on the version you installed until you move it, which also means a release can never break your site behind your back. If one does cause a problem, press Change version, pick an earlier one, and apply it. Publish afterwards, the same as any other change.

Rolling back gives up anything fixed since that version, so treat it as a way to get back to a working site rather than somewhere to stay. Once the problem is sorted, update again.

Removing the script

Press Disconnect in the app (Settings → Danger zone) and it removes the script from your site's custom code, removes the collection webhooks, and deletes everything we hold for the site, including its Webflow access token. Publish afterwards so the removal reaches your live pages.

Disconnecting does not uninstall the app: Webflow has no way for an app to remove itself. To remove it completely, open your site's settings in Webflow, go to Apps & integrations, and uninstall Algolia Search and Sync there.

Uninstalling from the Webflow dashboard leaves the script behind

Uninstalling the app in Webflow revokes our authorization immediately, which means we can no longer edit your site — including to remove our own script. It stays in your custom code until you delete it.

To remove it by hand: Site settings → Custom code → Head code, delete the @candid-leap/wf-algolia script tag, Save changes, then Publish.

To avoid this, press Disconnect in the app before uninstalling it from the Webflow dashboard.

• =
  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.

Why Head is fine

The app installs the tag into Head code. That surprises people who remember pasting search scripts into the footer, so it is worth saying why it is safe.

The script does no work when it loads. It registers a callback on Webflow's own ready queue with Webflow.push() and waits, so it reads your elements only once Webflow says the page is ready. Whether the tag sits in Head or Footer makes no difference to that. Head is simply where the app writes it.

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 — install from the dashboard, then 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:

1. 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.
2. 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	Press Install in the app, then 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.

Next

• Set up your Algolia index
• Build your first search
• Verify your setup
• Attribute reference

Would rather start from something that already works? The cloneable project has search, filters, sorting and recommendations already wired up — clone it and point it at your own index.