Add a store locator to a Lovable, Bolt, or v0 site

1. In your Storepoint dashboard, open Install on your site.
2. Select the embed code. Storepoint copies it for you.

It's safe to paste into an AI tool. The embed code has no passwords or keys in it.

The prompt gives your AI tool the exact code to use, so it doesn't guess or build a locator of its own.

1. Select Copy code on the prompt below.

Add a store locator page to this site with Storepoint.

Don't build a map, a search box, or a location list yourself, and don't
install an npm package. Storepoint draws the whole locator from one script.

Don't paste my embed code into the page as HTML. Read two things from it:
my widget ID (the first value in quotes after "new StorepointWidget(") and
my options (the { } after '#storepoint-widget').

1. Create a StoreLocator component with the code below, in the folder this
   project uses for components. If this is a Next.js project, add
   'use client' as the first line of the file. If the project uses
   JavaScript instead of TypeScript, remove the types.
2. Add a page at /stores with the title "Find a store". It renders
   <StoreLocator widgetId="MY_WIDGET_ID" />. If my options are not empty,
   pass them as the options prop.
3. Add a "Find a store" link to the main navigation.
4. Don't change anything else.

If I ask you to restyle the locator later: its HTML is built in the browser,
so you won't find it in this project's files. Read
https://storepoint.co/docs/customization/css-reference.md for every CSS
variable and class. Change the variables on .storepoint-container first,
and write the rules under .store-locator, the component's container.

My Storepoint embed code:

PASTE YOUR EMBED CODE HERE

The StoreLocator component:

```tsx
import { useEffect, useRef } from 'react';

type StorepointInstance = { load: () => void; destroy: () => void };

declare global {
  interface Window {
    StorepointWidget?: new (
      widgetId: string,
      container: HTMLElement,
      options?: Record<string, unknown>
    ) => StorepointInstance;
  }
}

let scriptPromise: Promise<void> | undefined;

function loadStorepoint(): Promise<void> {
  if (window.StorepointWidget) return Promise.resolve();
  if (scriptPromise) return scriptPromise;

  scriptPromise = new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'https://widget.storepoint.co/embed.js';
    script.async = true;
    script.onload = () => resolve();
    script.onerror = reject;
    document.head.appendChild(script);
  });

  return scriptPromise;
}

export default function StoreLocator({
  widgetId,
  options,
}: {
  widgetId: string;
  options?: Record<string, unknown>;
}) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let instance: StorepointInstance | undefined;
    let cancelled = false;

    loadStorepoint().then(() => {
      const Widget = window.StorepointWidget;
      if (cancelled || !containerRef.current || !Widget) return;
      instance = new Widget(widgetId, containerRef.current, options);
      instance.load();
    });

    return () => {
      cancelled = true;
      instance?.destroy();
    };
  }, [widgetId]);

  return (
    <div
      ref={containerRef}
      className="store-locator"
      style={{ width: '100%', minHeight: '500px' }}
    />
  );
}
```

Want a different page name? Change /stores and Find a store in the prompt before you send it. Where to buy and Find a dealer work well too.

1. Open your project in Lovable, Bolt, or v0.
2. Paste the prompt into the chat.
3. Replace PASTE YOUR EMBED CODE HERE with your embed code.
4. Send the prompt.

Don't like the result? Go back to the previous version in your AI tool's history. Your Storepoint account doesn't change.

Before you check: your AI tool's preview runs on its own web address, not your site's. If your map key allows only your site's address, the locator shows but the map stays blank in the preview. Open the preview in its own tab, copy the address, and add it to your key's allowed URLs (Mapbox or Google Maps). Add your published address too. Don't ask your AI tool to fix a blank map. The cause is the key setting, not the code.

1. In the preview, open the new Find a store page.
2. Search near one of your locations.

Check: Your locations show in the results and on the map. Map not loading? See If something doesn't appear.

1. Publish your site the way you usually do in Lovable, Bolt, or v0.
2. Open the published Find a store page and search again.