🔥 Try Handled Locator free for 7 days.Start free trial

Product guides

The practical details, before and after signup.

How location data comes in, what visitors can search, which design decisions are yours, what changes at scale, and exactly where the embed code goes.

Location data

Import a spreadsheet without losing the awkward rows.

Save the sheet you already maintain as CSV. The import flow detects likely columns, lets you correct the mapping, geocodes addresses, and separates ready rows from duplicates or addresses that need attention.

  1. 1Keep one location per row and include a name plus either an address or coordinates.
  2. 2Upload the CSV and confirm the proposed mapping for name, address, hours, categories and custom fields.
  3. 3Review rows marked for lookup or as duplicates. Ready rows can continue while you repair the rest.
  4. 4Import, spot-check a few locations in the preview, and export a clean copy whenever you need one.

Useful columns: name, address, latitude, longitude, phone, website, categories, opening_hours

Brand and layout

Match the site around the locator, not just the logo.

Brand recognition comes from the full composition: type scale, spacing, contrast, corners, marker treatment, button weight and the relationship between map and results. Those controls are independent, and six worked examples provide starting directions.

  1. 1Choose the layout based on the job: list and map, map and list, map above, or a results grid.
  2. 2Set background, text, accent and button colours with enough contrast for real visitors.
  3. 3Choose dot, numbered or logo markers, then decide whether crowded pins should cluster.
  4. 4Tune corners, spacing and type scale last. Preview phone width before publishing.
Compare six complete brand directions

Large networks

Plan for the long list and the searches with no answer.

At thousands of locations, the important questions are no longer cosmetic. Results need to page in rather than loading at once, list limits must be explicit, and search analytics should reveal places where demand has no nearby result.

10,000

locations on the top self-serve plan

1.65s

first result in the 5,000-location test

3

browser engines verified

Use categories and groups for stable business distinctions, priority only within a sensible radius, and the no-result report as a demand map for expansion.

Compare location capacities and seats

Publishing

Put the same snippet into any supported platform.

Copy the embed code from the dashboard after adding a map key. Pick your platform below, follow its three publishing steps, then use Check installation against the public page.

<div id="biz-locator-root"></div>
<script src="https://cdn.handledlocal.com/widget.js"
  data-site-id="your-site-id" async></script>

WordPress

Custom HTML block
  1. 1.Open the page or post editor and add a Custom HTML block.
  2. 2.Paste the embed code into that block.
  3. 3.Publish or update the page, then open the public URL.

Shopify

Pages, then Show HTML
  1. 1.Go to Online Store, then Pages, and open or create your locations page.
  2. 2.Switch the content editor to Show HTML and paste the embed code.
  3. 3.Save the page, open it from your storefront, and confirm the locator loads.

Squarespace

Code Block
  1. 1.Edit the page and add a Code Block where the locator should appear.
  2. 2.Paste the embed code into the Code Block.
  3. 3.Save and open the public page. Scripts may not run while you are editing.

Webflow

Embed element
  1. 1.Add an Embed element to your locations page.
  2. 2.Paste the embed code into the element's code panel.
  3. 3.Publish the site and verify it on the public page. Embeds do not run in the Designer canvas.

Wix

Embed HTML element
  1. 1.Add an Embed Code element and choose Embed HTML.
  2. 2.Paste the embed code and resize the element so the locator has enough height.
  3. 3.Publish, then open the public page to verify it.

BigCommerce

Page content, HTML view
  1. 1.Open Storefront, then Web Pages, and edit or create your locations page.
  2. 2.Switch the content editor to its HTML view and paste the embed code.
  3. 3.Save, then open the page on your storefront to verify it.

Ghost

HTML card
  1. 1.Edit the page or post and insert an HTML card where the locator should appear.
  2. 2.Paste the embed code into the card.
  3. 3.Publish, then open the public URL. Cards do not run scripts in the editor preview.

Framer

Embed component
  1. 1.Add an Embed component to the page and set its type to HTML.
  2. 2.Paste the embed code, then give the frame enough height for the locator.
  3. 3.Publish the site and check the published URL rather than the canvas.

Elementor

HTML widget
  1. 1.Edit the page in Elementor and drag an HTML widget where the locator should appear.
  2. 2.Paste the embed code into the widget's content field.
  3. 3.Update the page, then open the public URL. The editor preview does not run the script.

Drupal

Full HTML block or field
  1. 1.Create a Custom Block, or edit the page body, using a text format that permits raw HTML.
  2. 2.Switch to the source view and paste the embed code.
  3. 3.Save and place the block, then open the page as an anonymous visitor to verify it.

Joomla

Custom HTML module
  1. 1.Create a Custom module and assign it to the position and pages you want.
  2. 2.Turn the editor off or switch to its source view, then paste the embed code.
  3. 3.Save, then open the page on the front end to verify it.

HubSpot

Embed module
  1. 1.Edit the page and add an Embed module where the locator should appear.
  2. 2.Paste the embed code into the module.
  3. 3.Publish, then open the live page. The editor preview may not run the script.

React and Next.js

A script tag in your layout
  1. 1.Add a container element where the locator should render.
  2. 2.Load the script once: in Next.js use next/script, in plain React append it in an effect so it is not added on every render.
  3. 3.Run a production build and check the rendered page, not a hot-reloaded dev view.

Custom HTML

Paste in the page body
  1. 1.Open the HTML template or page where the locator should appear.
  2. 2.Paste the complete embed code into the page body.
  3. 3.Deploy the page, then open its public URL to verify it.

Use the guide with your own locations.

The trial includes the real importer, every design control, the working preview and the install check. No card required.