Install the where-to-buy widget

Any website

Paste this where the locator should appear. The script swaps the div for the widget in a frame that resizes to fit, so there's no scrollbar and no gap.

<div data-fuzzy-embed="where-to-buy" data-brand="your-brand-slug"></div>
<script src="https://www.fuzzy.so/embed/where-to-buy.js" async></script>

With options:

<div data-fuzzy-embed="where-to-buy"
  data-brand="your-brand-slug"
  data-theme="dark"
  data-accent="#7c3aed"
  data-radius="16"
  data-font="DM Sans"
  data-product="PRODUCT_ID"></div>
<script src="https://www.fuzzy.so/embed/where-to-buy.js" async></script>

Several widgets on one page are fine. For a page builder that adds blocks after load, call window.FuzzyWhereToBuy.mount() once the block is in place.

WordPress

The plugin prints the store list in your page as plain HTML, so search engines and AI answer engines read it as your page's own content. One install covers every site you run; each page names its brand in the shortcode.

1. Download the plugin and add it under Plugins → Add New → Upload Plugin.
2. Put the shortcode on any page, or drag the Where to buy (fuzzy) widget in Elementor.

[fuzzy_where_to_buy brand="your-brand-slug"]

One template, many pages: a page per state, per town or per product, each with its own real store names and addresses.

[fuzzy_where_to_buy brand="your-brand-slug" state="NJ"]
[fuzzy_where_to_buy brand="your-brand-slug" city="Jersey City" state="NJ"]
[fuzzy_where_to_buy brand="your-brand-slug" product="product-id" finder="1"]
[fuzzy_products brand="your-brand-slug" state="NJ"]
[fuzzy_faq brand="your-brand-slug" state="NJ"]

brand

Your brand slug (required).

state / city

List one state's or one town's stores: a page per town.

product

Only stores carrying one product, from products/top: a page per product. The list then says what it sells for and where, with a schema.org Product.

limit

Stores to list, 1 to 100. Default 100.

title

Heading override.

theme / accent / radius / density

The same look options as the script.

finder

"1" adds the interactive finder (town, ZIP, Near me, map) under the list.

match

A product by the name your page uses ("Choco Chunk Cookie"), matched to the menus, in place of product. Prints nothing when no store carries it.

faq

"1" adds common questions under the list (see [fuzzy_faq]).

prices / counts

"0" hides prices (store prices, price ranges, and the price in search markup) or how many stores carry it. Both show by default; set them for the whole site under Settings → fuzzy where to buy.

questions

Which questions [fuzzy_faq] answers, in order: any of "where,price,products,towns". Default all.

[fuzzy_products]

Your products instead of your stores: each with its shelf price range and how many dispensaries carry it, with schema.org Product markup. Takes brand, state, limit, title and the look options. In Elementor, set the widget's Show to Products.

[fuzzy_faq]

Questions shoppers ask, answered from live menus: where to buy, how much, the most-carried products and the towns with the most stores, with schema.org FAQPage markup. Takes brand, state, match, title and the look options.

Every product page, with no shortcode. On a WooCommerce site the plugin offers, once, to add where to buy to every product page. Each page's title is matched to the menus, and the page gets the dispensaries that carry that product, what it sells for, its Product markup and common questions. A page whose product no store carries is left as it is, and a new product page gets its list the day it is published. Settings → fuzzy where to buy turns it on or off.

Each page remembers when its list last changed (a store added, a price moved), and its date in the sitemap (WordPress's, Yoast's or Rank Math's) follows, so search engines come back when the menus change.

Your server fetches the list from fuzzy and keeps it for six hours. After that the page shows the last good copy at once while WordPress fetches a fresh one in the background, so visitors and crawlers never wait on fuzzy. When fuzzy can't be reached it keeps showing the last good copy, so the page never goes blank. Visitors' browsers never contact fuzzy for the list. The list ends with the Powered by fuzzy logo, a plain link to fuzzy.so: the plugin is free, and that credit is the price.

Or, without the plugin, the interactive widget in a Custom HTML block:

1. Edit the page where shoppers should find stores.
2. Add a block with +, search for Custom HTML, and add it.
3. Paste the script snippet from the demo page (or above) and publish.

The same goes for Squarespace (a Code block), Webflow (an Embed element), Wix (Embed HTML) and Shopify (a Custom Liquid section). If your site builder strips scripts, use the iframe below.

iframe

For a site that strips scripts. It can't resize itself, so give it a height that suits your page. Keep allow="geolocation" or Near me won't work inside the frame.

<iframe
  src="https://www.fuzzy.so/embed/where-to-buy/your-brand-slug?theme=light"
  title="Where to buy, powered by fuzzy"
  allow="geolocation"
  loading="lazy"
  style="width:100%;min-height:720px;border:0;"
></iframe>

It takes the same options as query parameters: theme, accent (hex without the #), radius, font, density, transparent=1, state, and title/products/filters/states/location/map/credit set to 0 to hide.

React

The component renders in your page rather than a frame, so it can take on your site's font and colors (appearance="inherit", the default) and its schema.org markup belongs to your page. Peer dependency react >= 18; no CSS import, no Tailwind.

npm install @fuzzylabs/where-to-buy

import { WhereToBuy } from "@fuzzylabs/where-to-buy";

export function StoreLocator() {
  return (
    <WhereToBuy
      brand="your-brand-slug"
      brandName="Your Brand"
      site="yourbrand.com"
    />
  );
}

With the store map

The map is a separate entry point so the core package stays small: install maplibre-gl (4.x or 5.x) and pass StoreMap. Wide layouts show the list and map side by side; narrow ones get a List/Map toggle. In Next.js, load it with next/dynamic and ssr: false, since MapLibre needs the browser.

npm install @fuzzylabs/where-to-buy maplibre-gl

import { WhereToBuy } from "@fuzzylabs/where-to-buy";
import { StoreMap } from "@fuzzylabs/where-to-buy/map";

<WhereToBuy brand="your-brand-slug" map={StoreMap} />

Source of truth: packages/where-to-buy/src/WhereToBuy.tsx's WhereToBuyProps.

SEO and schema.org

For one product, the widget can add schema.org Product markup with an AggregateOffer listing the stores that carry it. Search engines can use it for rich results. How much of it they see depends on how you embed:

The server-rendered store list for a custom React site, the same HTML the WordPress plugin prints:

// app/where-to-buy/page.tsx (a React Server Component)
import { WhereToBuyList, fetchWhereToBuy } from "@fuzzylabs/where-to-buy/static";

export const revalidate = 21600; // six hours, about how often menus are read

export default async function Page() {
  const data = await fetchWhereToBuy("your-brand-slug", { state: "NJ", limit: 100 });
  return <WhereToBuyList data={data} brandName="Your Brand" placeName="New Jersey" />;
}

The interactive widget with server-rendered product markup:

// app/where-to-buy/[product]/page.tsx (Next.js App Router)
import { fetchWhereToBuyJsonLd } from "@fuzzylabs/where-to-buy/client";
import { StoreLocator } from "./StoreLocator"; // a "use client" file rendering <WhereToBuy includeJsonLd={false} />

export default async function Page({ params }: { params: Promise<{ product: string }> }) {
  const { product } = await params;
  const jsonLd = await fetchWhereToBuyJsonLd("your-brand-slug", product).catch(() => null);
  return (
    <>
      {jsonLd ? (
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      ) : null}
      <StoreLocator />
    </>
  );
}

Product ids come from GET https://api.fuzzy.so/api/radar/brands/{slug}/products/top (productClusterId), or the useTopProducts hook.

Theming

The props cover most of it. For anything finer, the widget reads these CSS variables, and every card, button and row carries a stable data-fuzzy-* attribute you can target from your own CSS.

<WhereToBuy
  brand="your-brand-slug"
  style={{
    "--fuzzy-accent": "#0a5",        // buttons, links, focus ring
    "--fuzzy-on-accent": "#fff",     // text on accent buttons
    "--fuzzy-text": "#1a1a1a",
    "--fuzzy-muted": "#6b7280",
    "--fuzzy-border": "#e5e7eb",
    "--fuzzy-card-bg": "#fff",       // light / dark / auto
    "--fuzzy-bg": "#fafafa",         // light / dark / auto
  } as React.CSSProperties}
/>

Near me and privacy

• A ZIP is matched to its Census ZIP area and stores sort by straight-line distance from its center. Directions open Google Maps.
• Near me asks the browser for a location only when the shopper taps it, and sends it rounded to about 100 meters. Nothing is asked on page load.
• No cookies and no shopper identifiers. The React component remembers the last ZIP in localStorage on your own domain (rememberLocation=false to turn that off).
• The store map's tiles come from OpenFreeMap, so a shopper's browser requests them from OpenFreeMap's servers (no key, no cookies). Hide the map to avoid that request.
• Requests carry your site's hostname and the kit version so usage can be attributed per site. That's all.

Headless and REST

Build your own markup on the same data with the hooks, or call the endpoint from anything. It's public, CORS-open, and needs no key.

import { useWhereToBuy } from "@fuzzylabs/where-to-buy";

function Stores({ brand }: { brand: string }) {
  const { data, loading, error } = useWhereToBuy(brand, { zip: "80216" });
  if (loading || error) return null;
  return (
    <ul>
      {data?.stores.map((s) => (
        <li key={s.doorKey}>
          {s.doorName ?? s.retailerName}, {s.distanceMiles} mi
          {s.deepLink && <a href={s.deepLink}>View menu</a>}
        </li>
      ))}
    </ul>
  );
}

curl "https://api.fuzzy.so/api/radar/brands/your-brand-slug/where-to-buy?zip=80216&limit=5"

Parameters: zip or lat+lng (nearest first), radius (miles), product, state, city, page, limit (max 100), site. Full reference on the REST API page.