Embed Code

Add your store locator to any website using a simple embed code - perfect for headless Shopify sites, WordPress, Webflow, and custom websites.

Overview

While PinPoint works seamlessly as a Shopify Theme App Extension, you may need to embed your store locator on websites outside of Shopify. The embed code feature allows you to add your fully-configured store locator to any website with just a few lines of code.

Use Cases

• Headless Shopify: Using a custom frontend with Shopify as your backend
• WordPress sites: Add the store locator to your company blog or marketing site
• Webflow: Embed directly into your Webflow pages
• Landing pages: Include on campaign-specific landing pages
• Partner websites: Let distributors or partners show your locations

Generating Embed Keys

Embed keys authenticate requests from external websites to load your store locator configuration and data.

How to Generate a Key

1. Open your PinPoint dashboard
2. Navigate to Embed Code in the sidebar
3. Click Generate Key
4. Your new key will appear in the list

Adding the Embed Code

Once you have an embed key, click Use next to it to see your embed code. Copy the code and paste it into your website where you want the store locator to appear.

Basic Embed Code

<!-- PinPoint Store Locator -->
<div id="pinpoint-locator"></div>
<script src="https://your-app-url.com/embed/pinpoint.js" 
        data-pinpoint-key="YOUR_EMBED_KEY"></script>

How It Works

1. The script loads your store locator configuration from PinPoint
2. It automatically applies your saved settings, branding, and colors
3. Your stores, tags, and custom fields are displayed
4. The map uses your configured Mapbox token

Customization Options

The embedded widget inherits all settings from your PinPoint dashboard:

Container Sizing

The widget will fill its container. Control the size by styling the parent div:

<div id="pinpoint-locator" style="height: 600px; width: 100%;"></div>

Responsive Design

The widget automatically adapts to mobile devices:

• On desktop: Side-by-side map and store list
• On mobile: Stacked layout with map above store list

Security Considerations

Domain Restrictions

Embed keys are designed to be used on any domain. The key authenticates read-only access to your public store data.

What's Protected

• Only public store data is accessible
• Admin functions require Shopify authentication
• Keys can be revoked at any time
• Usage is tracked (last used date)

Managing Embed Keys

Viewing Keys

All your embed keys are listed in the Embed Code section of your dashboard. For each key you can see:

• Key name
• Partial key preview
• Last used date (if ever used)
• Active status

Deleting Keys

To remove an embed key:

1. Go to Embed Code in your dashboard
2. Find the key you want to remove
3. Click the delete button (trash icon)
4. Confirm the deletion

Troubleshooting

Widget Not Loading

• Check that the embed key is correct and active
• Verify the container div exists with id="pinpoint-locator"
• Check browser console for error messages
• Ensure the script URL is correct

Map Not Displaying

• Verify your Mapbox token is configured in PinPoint settings
• Check that the container has a defined height
• Look for JavaScript errors in the browser console

Stores Not Appearing

• Confirm you have active stores in your PinPoint dashboard
• Check that stores are set to "Active" status
• Verify your plan supports the number of stores you have

Platform-Specific Guides

WordPress

Add the embed code to any WordPress page or post using a Custom HTML block:

1. Edit your page in WordPress
2. Add a "Custom HTML" block
3. Paste your embed code
4. Save and preview

Webflow

Use Webflow's Embed element:

1. Add an Embed element to your page
2. Paste your embed code
3. Publish your site

Static HTML

Simply paste the embed code into your HTML file where you want the locator to appear. No additional configuration needed.

React/Next.js

For React applications, you can load the script dynamically:

import { useEffect } from 'react'

export default function StoreLocator() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://your-app-url.com/embed/pinpoint.js'
    script.setAttribute('data-pinpoint-key', 'YOUR_KEY')
    document.body.appendChild(script)
    
    return () => {
      document.body.removeChild(script)
    }
  }, [])

  return <div id="pinpoint-locator" style={{ height: '600px' }} />
}