Script tag (canonical embed method)

This is the only supported way to embed a DropAFinder finder onto your website. It’s also the entire integration — there is no SDK to install, no npm package to manage, no API key to rotate.

The minimal embed

Two pieces. A mount div and a script tag.


<div id="finder-app" finder-key="YOUR_FINDER_KEY"></div>
<script
  type="module"
  src="https://cdn.locationfinders.com/snippet.js"
></script>

Replace YOUR_FINDER_KEY with the public token shown in the Finder Builder under Launch → Embed snippet. That’s it. The script reads the finder-key attribute, fetches your finder’s configuration, and renders the widget where the div is.

🟡 [SCREENSHOT: The Embed snippet modal in the dashboard with a key visible and the “Copy” action highlighted. Annotate that the placeholder in the snippet is the same token shown in the modal.]

Required attributes

Attribute	Where	Required?	Purpose
`id="finder-app"`	mount div	Yes	The script looks for this id to find the mount target.
`finder-key="..."`	mount div	Yes	The public token identifying which finder to load.
`type="module"`	script tag	Yes	The widget ships as an ES module; without `type="module"` the script will not parse.
`src="https://cdn.locationfinders.com/snippet.js"`	script tag	Yes	The widget runtime.

Where to put the snippet on the page

The mount div goes wherever you want the finder to render. The script tag can go anywhere — typically just before </body>, but immediately after the mount div is also fine.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Find a Store</title>
  </head>
  <body>
    <h1>Find a Store</h1>
    <p>Search by location to find your nearest store.</p>
 
    <div id="finder-app" finder-key="abc123def456"></div>
 
    <script
      type="module"
      src="https://cdn.locationfinders.com/snippet.js"
    ></script>
  </body>
</html>

The widget renders inline where the div is — it does not float, modal, or take over the page.

Putting it on a CMS

The exact steps differ by platform; the principle is the same: insert the snippet HTML into a code/HTML block and save.

WordPress

Use a Custom HTML block (Gutenberg) or paste into the HTML view of the Classic editor. WordPress sometimes strips the type="module" attribute from script tags in certain themes/plugins; if the embed silently fails, install a plugin that allows full HTML in posts (or contact your developer).

🔴 [NEEDS CLARIFICATION: Confirm whether the snippet works in default WordPress without a plugin. Behavior varies by theme and security plugin configuration.]

Webflow

Use an Embed element. Paste the snippet HTML into the embed’s source field, save, and publish.

Squarespace

Use a Code block. Paste both the mount div and the script tag into the same block.

Shopify

Use a Custom Liquid section or paste into the theme’s theme.liquid template. Place the snippet in the location where you want the finder to appear.

Plain HTML

Paste both the mount div and the script tag where you want them.

Multiple finders on one page

Multiple finders on a single page are supported, but you need a separate mount target for each. Use a unique id per div and the script tag will render each one:

🔴 [NEEDS CLARIFICATION: Verify multi-finder rendering. The widget script reads #finder-app specifically; supporting more than one mount on a page may require either a CSS-class-based selector convention or per-instance script tags. Confirm with engineering before publishing this section.]

Loading state

While the widget fetches its configuration and locations, the mount div is empty. If you want a loading indicator, render it inside the mount div in your initial HTML; the widget will replace the div’s contents when it renders:


<div id="finder-app" finder-key="abc123">
  Loading store locator…
</div>

The “Loading store locator…” text shows while the widget is fetching, then disappears.

Caching of the script itself

The snippet.js file at cdn.locationfinders.com is cached for 5 minutes at the edge. The browser may cache it longer per its own heuristics. This means new widget runtime features ship with up to ~5 minutes of propagation delay across cold loads. Your finder’s data and design have a separate cache (also 5 minutes); the two are independent.

Versioning

There is one script URL: https://cdn.locationfinders.com/snippet.js. We update it in place. There is intentionally no v1 / v2 URL — the widget’s runtime is forward-compatible with all finder configurations.

🔒 Internal only: Internally we run two widget builds (ext/1 Svelte 4 and ext/2 Svelte 5). The root snippet.js is a thin loader that imports the active build. Customers do not need to know about this; the URL is stable across upgrades.

Working examples

Most basic


<div id="finder-app" finder-key="YOUR_KEY"></div>
<script type="module" src="https://cdn.locationfinders.com/snippet.js"></script>

With a wrapper for sizing

The widget fills its container’s width. To constrain it, wrap the mount div:


<div style="max-width: 1200px; margin: 0 auto;">
  <div id="finder-app" finder-key="YOUR_KEY"></div>
</div>
<script type="module" src="https://cdn.locationfinders.com/snippet.js"></script>

With loading text


<div id="finder-app" finder-key="YOUR_KEY">
  <p>Loading store locator…</p>
</div>
<script type="module" src="https://cdn.locationfinders.com/snippet.js"></script>

What can go wrong

Nothing renders. The mount div isn’t there, the key is missing, or the script tag is missing type="module". Check the browser console.
The widget loads but says “unauthorized.” Add the host page’s origin to Launch → Authorized URLs in the Finder Builder.
Styles look broken. A * {} CSS reset on the host page is overriding the widget’s styles. Scope your resets.
Map tiles fail to load. A Content Security Policy is blocking tile fetches. Allowlist the map provider’s tile origin.

Full troubleshooting reference: Troubleshooting the embed.

Where to next

Keep your finder secure: Authorized URLs
Visitor analytics: Analytics
“Updates aren’t showing”: Caching