These docs are a work in progress and may not be fully up to date. Some pages may contain internal notes for our team.
Skip to Content
Getting StartedPublish and embed

Publish and embed

End-to-end: from a designed Finder in the builder to a live widget on your website. By the end of this page, your finder is rendering for real visitors.

Step 1 — Save your work

In the Finder Builder, click Save. Saving commits your design and configuration to the server. Your changes propagate to the visitor-facing CDN within roughly five minutes (see Caching for the exact mechanism).

💡 Tip: There is no separate “publish” gate. Save is publish. If you want to draft changes without exposing them to visitors, the recommended pattern is to duplicate the finder, edit the duplicate, then swap the embed snippet on your site when ready.

🔴 [NEEDS CLARIFICATION: Confirm there’s no published_at / draft mode on the Finder model. If a draft mode does exist, this section needs to describe it.]

Step 2 — Add your domain to Authorized URLs

Before the widget will render on a real domain, that domain must be in the finder’s Authorized URLs list. Open the Finder Builder, go to Launch → Authorized URLs, and add:

  • Your production domain (e.g., https://example.com)
  • Any staging environments (e.g., https://staging.example.com)
  • Local dev origins if you’ll preview locally (typically http://localhost:*)

⚠️ Warning: Skip this step and visitors will see a blank widget on production. The dashboard’s Live Preview works regardless of Authorized URLs — the constraint only applies to actual embeds on host pages.

🟡 [SCREENSHOT: Authorized URLs panel in the Finder Builder Launch section, with two domains added and a third being typed.]

Step 3 — Copy the embed snippet

From the Finders list (sidebar → Finders), find your finder and click the snippet icon next to it. A modal shows a one-line <script> tag with a paired mount div. The finder-key attribute is already filled in with your finder’s public token.

🟡 [SCREENSHOT: Embed snippet modal with the script tag visible, the finder key highlighted, and the “Copy” action.]

The snippet looks roughly like this:

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

Copy the whole snippet (both lines).

Step 4 — Paste it into your website

The snippet works in any platform that lets you insert custom HTML. The mount div renders the widget inline at its location; the script tag can go anywhere on the page (typically just before </body>).

Plain HTML

Paste both lines into the body of your HTML file at the spot where you want the finder to appear:

<body>
  <h1>Find a Store</h1>
  <p>Search by location to find your nearest store.</p>
 
  <div id="finder-app" finder-key="YOUR_KEY"></div>
 
  <script type="module" src="https://cdn.locationfinders.com/snippet.js"></script>
</body>

WordPress

Use a Custom HTML block (Gutenberg) or paste into the HTML view of the Classic editor. Place the snippet where you want the finder to render.

🔴 [NEEDS CLARIFICATION: Some WordPress security plugins strip type="module" from inline scripts. Confirm whether the embed works in default WordPress, and if not, document the workaround.]

Webflow

Insert an Embed element at the desired location and paste the snippet HTML into its source field.

Squarespace

Insert a Code block at the desired location. Paste both the mount div and the script tag.

Shopify

Edit the relevant template (or use a Custom Liquid section) and paste the snippet where you want the finder to appear.

Other platforms

Anywhere you can insert raw HTML, the snippet works. Full reference: Script tag.

Step 5 — Verify it loads

Open the page where you embedded the snippet in a real browser (not just a local file).

You should see:

  • The search bar at the top (or wherever your layout puts it)
  • Your locations listed
  • A map with markers

🟡 [SCREENSHOT: A real browser viewing a host page that has the embedded finder rendering — search bar, list, and map all populated.]

If you see anything else (blank, error message, broken styling), jump to Troubleshooting the embed.

What “publish” actually means

There’s no editorial “draft → published” toggle on a Finder. The model is simpler:

  • Save writes your design and locations to the database.
  • Within ~5 minutes, the new version reaches the CDN; new visitor loads pick it up.
  • Visitors mid-session continue with whatever version was loaded when their page started; they get the new version on the next page load.

If you need to roll back, the practical move today is to undo your changes in the builder and save again. There is no built-in version history beyond your in-session undo stack.

🔴 [NEEDS CLARIFICATION: Is there finder-level versioning or rollback in the dashboard? Audit log captures changes but doesn’t constitute a rollback UI.]

Iteration after launch

Once your finder is live, the typical workflow is:

  1. Open the Finder Builder
  2. Make a change
  3. Save
  4. Wait ~5 minutes, refresh your host page

For visual changes, the Live Preview rail in the builder shows your edits instantly without needing to wait for CDN propagation — useful for tight iteration loops.

Where to next

Create your accountAI Location Import