### Combined URL Parameters Example Source: https://storepoint.co/docs/guides/link-to-locator-search An example URL demonstrating how to combine multiple parameters using the & symbol to filter and search locations. ```text https://example.com/locations?locate=Boston&tags=Authorized Dealer&keyword=Nordstrom&distance=30 ``` -------------------------------- ### Link to a Location Search with Various Formats Source: https://storepoint.co/docs/guides/link-to-locator-search Examples of using different location formats like city names, states, and countries with the ?locate= parameter. ```text https://example.com/locations?locate=Chicago https://example.com/locations?locate=New York, NY https://example.com/locations?locate=London, UK https://example.com/locations?locate=Ontario, Canada ``` -------------------------------- ### Query API GET request Source: https://storepoint.co/developers Fetch locations using radius, coordinates, and search keywords. Returns JSON data including coordinates, distances, and custom fields. ```http GET /public/v1/{token}/locations ?lat=40.71&lng=-74.00 &radius=25 &search=downtown # Locations sorted by distance, # with tags, hours, and custom fields ``` -------------------------------- ### Tags as comma-separated list Source: https://storepoint.co/docs/getting-started/locations/import Enter tags for a location as a comma-separated list in a single cell. This example shows tags for filtering locations. ```plaintext Coffee, WiFi, Parking, Drive-Thru ``` -------------------------------- ### GET /public/v1/{token}/locations Source: https://storepoint.co/developers Fetches locations as JSON with optional radius search, keyword search, and tag filters. Use this endpoint to build custom UIs with location data. ```APIDOC ## GET /public/v1/{token}/locations ### Description Fetches locations as JSON with optional radius search, keyword search, and tag filters. Use this endpoint to build custom UIs with location data. ### Method GET ### Endpoint /public/v1/{token}/locations ### Parameters #### Query Parameters - **lat** (number) - Required - Latitude for radius search - **lng** (number) - Required - Longitude for radius search - **radius** (number) - Optional - Search radius in miles - **search** (string) - Optional - Keyword search term ### Request Example GET /public/v1/{token}/locations?lat=40.71&lng=-74.00&radius=25&search=downtown ### Response Locations sorted by distance, with tags, hours, and custom fields. ``` -------------------------------- ### Connect Storepoint MCP server via CLI Source: https://storepoint.co/developers Use the Claude CLI to add the Storepoint MCP server transport, enabling management of locations through AI assistants. ```bash # Connect once claude mcp add --transport http storepoint \ https://mcp.storepoint.co/mcp # Then ask your assistant: # "Add our new Austin store at # 600 Congress Ave and tag it flagship" ``` -------------------------------- ### React to interactions and set filters with widget.js Source: https://storepoint.co/developers Use Storepoint.on to listen for visitor interactions like clicks and Storepoint.setFilters to programmatically update the locator view. ```javascript // React to visitor interactions Storepoint.on('location-result-item-click', (location) => { showBookingPanel(location); trackEvent('store_selected'); }); // Drive the locator from your page Storepoint.setFilters(['premium']); ``` -------------------------------- ### mcpServers JSON configuration for Cursor Source: https://storepoint.co/docs/integrations/mcp-server For clients that accept an mcpServers configuration, add this entry and save the settings. Then use the client's sign-in option to connect Storepoint. ```json { "mcpServers": { "storepoint": { "url": "https://mcp.storepoint.co/mcp" } } } ``` -------------------------------- ### StoreLocator component (Next.js) Source: https://storepoint.co/docs/getting-started/embed-on-website/react The same StoreLocator component adapted for Next.js by adding 'use client' at the top to ensure it runs in the browser. SSR renders the empty container, and the widget mounts on the client. ```jsx 'use client'; import { useRef } from 'react'; import useStorepointWidget from './useStorepointWidget'; export default function StoreLocator() { const containerRef = useRef(null); useStorepointWidget('YOUR_WIDGET_ID', containerRef); return
; } ``` -------------------------------- ### CSP allowlist XML for Storepoint Source: https://storepoint.co/docs/getting-started/embed-on-website/magento Add this XML to `etc/csp_whitelist.xml` in your custom module (or the Hyvä CSP override file) to allow Storepoint scripts and frames. Required if the locator shows empty space due to Magento's Content Security Policy. For Google Maps, also add `https://*.googleapis.com` and `https://*.gstatic.com`; for Mapbox, add `https://*.mapbox.com`. ```xml https://*.storepoint.co https://*.storepoint.co ``` -------------------------------- ### Link to Pre-Filtered Where-to-Buy Page Source: https://storepoint.co/docs/guides/where-to-buy-product-locator/find-in-store-product-pages Use a standard URL link with a tags parameter to direct shoppers to your locator page with a specific product filter already applied. ```text https://yourbrand.com/where-to-buy?tags=Habanero Reserve ``` -------------------------------- ### Link to a Location Search with Zip Code Source: https://storepoint.co/docs/guides/link-to-locator-search Use the ?locate= parameter followed by a zip code to automatically trigger a search for that area when the page loads. ```text https://example.com/locations?locate=90210 ``` -------------------------------- ### Set a Search Radius Source: https://storepoint.co/docs/guides/link-to-locator-search Add the distance parameter to set the initial search radius in miles or kilometers. ```text https://example.com/locations?locate=Seattle&distance=50 ``` -------------------------------- ### Link to a Keyword Search Source: https://storepoint.co/docs/guides/link-to-locator-search Use the 'keyword' parameter to pre-fill the search bar and filter results by a specific term. ```text https://example.com/locations?keyword=Nordstrom ``` -------------------------------- ### Link to Multiple Tags using Array Format Source: https://storepoint.co/docs/guides/link-to-locator-search Use the array format to specify multiple tags for filtering. ```text https://example.com/locations?tags[]=Authorized Dealer&tags[]=Service Center ``` -------------------------------- ### Storepoint Shortcode with Language and Tag Filtering Source: https://storepoint.co/docs/guides/wordpress-store-locator-with-wpml Combine the language auto-detection attribute with tag filtering to display specific locations based on the visitor's WPML language. ```text [storepoint language="auto" tags="dealer,premium"] ``` -------------------------------- ### Link to a Filtered View by Tag Source: https://storepoint.co/docs/guides/link-to-locator-search Use the 'tags' parameter to show only locations associated with a specific tag. ```text https://example.com/locations?tags=Authorized Dealer ``` -------------------------------- ### Add a Search Bar Form Source: https://storepoint.co/docs/guides/external-search-bar Paste this HTML form anywhere on your site to enable location searching. Replace YOUR_LOCATOR_PAGE_URL with the actual URL of your store locator page. ```html
``` -------------------------------- ### Translate location content using language tags Source: https://storepoint.co/docs/guides/multilingual-store-locator Use language tags like [lang=fr] or [lang=es] within location descriptions to provide localized content. Visitors see the version matching their language, while others see the default text. ```text Open daily 9-6. Free parking behind the building. [lang=fr] Ouvert tous les jours de 9h à 18h. [lang=es] Abierto todos los días de 9 a 18. ``` -------------------------------- ### POST /admin/v1/locations Source: https://storepoint.co/developers Creates a new location with automatic geocoding from a plain address. Use this endpoint to push locations from CRM, ERP, POS, or other internal systems. ```APIDOC ## POST /admin/v1/locations ### Description Creates a new location with automatic geocoding from a plain address. Use this endpoint to push locations from CRM, ERP, POS, or other internal systems. ### Method POST ### Endpoint /admin/v1/locations ### Headers - **Authorization** (string) - Required - Bearer token for authentication (e.g., Bearer sk_your_api_key) ### Request Body - **name** (string) - Required - Name of the location - **address** (string) - Required - Plain address for geocoding - **tags** (array of strings) - Optional - Tags for the location ### Request Example { "name": "Downtown Store", "address": "123 Main St, New York, NY", "tags": ["flagship", "retail"] } ``` -------------------------------- ### Storepoint Shortcode with Auto-Language Detection Source: https://storepoint.co/docs/guides/wordpress-store-locator-with-wpml Use the shortcode with the language attribute set to auto to trigger WPML language detection in Classic Editor, Elementor, or Divi. ```text [storepoint language="auto"] ``` -------------------------------- ### useStorepointWidget hook Source: https://storepoint.co/docs/getting-started/embed-on-website/react A custom React hook that loads the Storepoint widget script on first use, mounts the widget to a container ref, and destroys it on unmount. Handles script loading, cancellation, and cleanup. ```jsx // useStorepointWidget.js import { useEffect, useState } from 'react'; let scriptPromise; function loadStorepoint() { 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 useStorepointWidget(widgetId, containerRef, options) { const [widget, setWidget] = useState(null); useEffect(() => { let instance; let cancelled = false; loadStorepoint().then(() => { if (cancelled || !containerRef.current) return; instance = new window.StorepointWidget(widgetId, containerRef.current, options); instance.load(); setWidget(instance); }); return () => { cancelled = true; setWidget(null); instance?.destroy(); }; }, [widgetId]); return widget; } ``` -------------------------------- ### Link to Multiple Tags using Comma Separator Source: https://storepoint.co/docs/guides/link-to-locator-search Separate multiple tags with commas to filter by more than one category. ```text https://example.com/locations?tags=Authorized Dealer,Service Center ``` -------------------------------- ### Combine Keyword Search with Location Source: https://storepoint.co/docs/guides/link-to-locator-search Use both 'locate' and 'keyword' parameters to search for a specific term within a defined area. ```text https://example.com/locations?locate=Los Angeles&keyword=Nordstrom ``` -------------------------------- ### StoreLocator component (React) Source: https://storepoint.co/docs/getting-started/embed-on-website/react A React component that uses the useStorepointWidget hook to render the Storepoint locator. It creates a container ref and passes it to the hook, rendering a div with a minimum height. ```jsx import { useRef } from 'react'; import useStorepointWidget from './useStorepointWidget'; export default function StoreLocator() { const containerRef = useRef(null); useStorepointWidget('YOUR_WIDGET_ID', containerRef); return
; } ``` -------------------------------- ### Listening for widget events Source: https://storepoint.co/docs/getting-started/embed-on-website/react Uses the widget instance returned by the hook in a follow-up useEffect to listen for 'search' and 'location-result-item-click' events. Listeners are automatically removed on unmount. ```jsx import { useEffect, useRef } from 'react'; import useStorepointWidget from './useStorepointWidget'; export default function StoreLocator() { const containerRef = useRef(null); const widget = useStorepointWidget('YOUR_WIDGET_ID', containerRef); useEffect(() => { if (!widget) return; widget.on('search', (data) => { console.log('User searched:', data.query); }); widget.on('location-result-item-click', (data) => { console.log('Location clicked:', data.name); }); }, [widget]); return
; } ``` -------------------------------- ### Remote MCP server URL Source: https://storepoint.co/docs/integrations/mcp-server Add this URL as a remote server in an MCP client and choose OAuth sign-in. ```text https://mcp.storepoint.co/mcp ``` -------------------------------- ### Management API POST request Source: https://storepoint.co/developers Create a new location by sending an address to be automatically geocoded. Requires a Bearer token for authorization. ```http POST /admin/v1/locations Authorization: Bearer sk_your_api_key { "name": "Downtown Store", "address": "123 Main St, New York, NY", "tags": ["flagship", "retail"] } ``` -------------------------------- ### Query locations via Storepoint API Source: https://storepoint.co/developers Perform a radius search by hitting the public locations endpoint with latitude, longitude, and radius parameters. The response returns a JSON object containing location details and pagination metadata. ```bash $ curl "https://api.storepoint.co/public/v1/YOUR_TOKEN/locations?lat=40.7128&lng=-74.006&radius=25" { "success": true, "data": { "locations": [ { "id": "loc_a1b2c3d4", "name": "Downtown Store", "coordinates": { "lat": 40.7128, "lng": -74.006 }, "address": { "formatted": "123 Main St, New York, NY 10001" }, "distance": { "value": 0.3, "unit": "miles" } } ], "pagination": { "total": 42, "hasMore": true } } } ``` -------------------------------- ### Combine Search and Filters Source: https://storepoint.co/docs/guides/link-to-locator-search Use the locate and tags parameters together to link to a filtered search in a specific area. ```text https://example.com/locations?locate=Austin&tags=Service Center ``` -------------------------------- ### Embed Location Search Form Source: https://storepoint.co/docs/guides/where-to-buy-product-locator/find-in-store-product-pages Add an HTML form to your product page to allow users to input their location and land on your locator page with both the product tag and location search pre-filled. ```html
``` -------------------------------- ### Add a Tag Filter Dropdown Source: https://storepoint.co/docs/guides/external-search-bar Include a dropdown menu in your search form to allow users to filter results by category. Ensure the option values match your actual tags. ```html
``` -------------------------------- ### Storepoint shortcode with attributes for filtered or multilingual locators Source: https://storepoint.co/docs/getting-started/embed-on-website/elementor Use this shortcode in an Elementor HTML or Shortcode widget to display a filtered locator. The tags attribute filters locations, language auto-detects WPML/Polylang, and hide_filters hides the filter UI. Change tags per page for different filtered views. ```plaintext [storepoint tags="dealer,premium" language="auto" hide_filters="true"] ``` -------------------------------- ### Query locations with Storepoint API Source: https://storepoint.co/developers Fetches locations within a 25-mile radius of specified coordinates using the Storepoint public API. The response includes location details such as name, distance, address, hours, and custom fields. ```javascript // Find locations within 25 miles const response = await fetch( 'https://api.storepoint.co/public/v1/' + TOKEN + '/locations' + '?lat=40.7128&lng=-74.006&radius=25' ); const { data } = await response.json(); // Sorted by distance. Address, hours, tags, // and custom fields on every location. data.locations.forEach((location) => { console.log(location.name, location.distance.value); }); ``` -------------------------------- ### Override --storepoint-accent-color CSS variable Source: https://storepoint.co/docs/customization/styling Override the accent color by setting the --storepoint-accent-color CSS variable on the .storepoint-container element. This variable is one of several CSS custom properties defined on the container that control colors, spacing, fonts, and other values. ```css /* Example: Override the accent color */ .storepoint-container { --storepoint-accent-color: #e63946; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.