← Back to Overview

Local Food Score Widget

Technical documentation for integrating the widget into your real estate listings

Quick Start

Add this snippet to your listing page template:

<!-- Piknik Local Food Score Widget -->
<div 
  id="piknik-food-score"
  data-piknik-widget
  data-api-key="YOUR_API_KEY_HERE"
  data-address="[LISTING_ADDRESS]"
  data-radius="8"
  data-size="badge"
  data-theme="light"
></div>
<script src="https://piknik.spot/widgets/piknik-widget.js" defer></script>

Replace YOUR_API_KEY_HERE only if you're building manually — when you use Copy embed code in Widget Builder, your widget ID is included automatically. Replace [LISTING_ADDRESS] with your property address (or address variable).

Configuration Options

AttributeTypeDefaultDescription
data-api-keystringrequiredYour widget ID — included automatically in embed code (data-api-key)
data-addressstringrequired*Full address or template variable
data-latnumberoptional*Latitude (if address not provided)
data-lngnumberoptional*Longitude (if address not provided)
data-listing-urlstring—Optional. Agent listing page URL — shows a back link on the Piknik details page
data-listing-titlestring—Optional. Short label for the listing banner (defaults to address)
data-radiusnumber8Search radius in kilometers (1–25). Use 1 km for walkable access; wider for rural.
data-sizestringfull"badge" (~40px, clickable), "compact" (~60px, inline), or "full" (~400px)
data-labelstringFood ScoreWidget title (leave empty for logo + score only)
data-themestringlight"light" or "dark" (choose to match your site)

* Either data-address or both data-lat and data-lng must be provided

Platform Integration Examples

WordPress (with ACF or custom fields)

<div 
  id="piknik-food-score"
  data-piknik-widget
  data-api-key="pk_live_..."
  data-address="<?php echo get_field('property_address'); ?>"
  data-radius="8"
  data-size="badge"
></div>
<script src="https://piknik.spot/widgets/piknik-widget.js" defer></script>

IDX Broker

<div 
  id="piknik-food-score"
  data-piknik-widget
  data-api-key="pk_live_..."
  data-address="%%address%%, %%city%%, %%state%%"
  data-radius="8"
  data-size="badge"
></div>
<script src="https://piknik.spot/widgets/piknik-widget.js" defer></script>

IDX Broker uses %%variable%% syntax for property data

Static HTML

<div 
  id="piknik-food-score"
  data-piknik-widget
  data-api-key="pk_live_..."
  data-address="410 Northfield Drive W, Waterloo, ON"
  data-radius="8"
></div>
<script src="https://piknik.spot/widgets/piknik-widget.js" defer></script>

Scoring Methodology

The Local Food Score (0-100) combines three buyer-facing factors with honesty gates:

How local (35%)

Plate-group coverage from sources you can actually reach within your search radius.

Easy to get (30%)

Distance to reachable farms, markets, and local-food businesses, with walkability bonuses.

Covers a diet (35%)

Year-round plate coverage plus nutrient depth from reachable offerings (production within 100 km).

🔬 Nutrition-Based Network Scoring

Our algorithm evaluates nutritional completeness by measuring access to essential nutrients (proteins, vitamins, minerals) from local food sources. It considers both direct access(farms, markets) and indirect access (restaurants and shops sourcing from local farms). When restaurants and shops document their local supplier relationships, those connections improve the area's score by making farm nutrients accessible through more convenient retail channels. This incentivizes transparency in local food supply chains.

Live Demo

Example: 410 Northfield Drive W, Waterloo, ON

PiknikFood Score87A-

Demo preview — sample score for illustration

Direct Page Link (No Widget)

Send buyers straight to the full Local Food Score details page from your CRM, email campaigns, or internal QA tools — without embedding a widget button.

GET https://piknik.spot/local-food-score?apiKey=YOUR_WIDGET_ID&address=[LISTING_ADDRESS]&radius=8&listingUrl=[LISTING_URL]&listingTitle=[LISTING_TITLE]

Requires your widget ID (apiKey). Provide address or lat + lng. Copy a ready-made template from the Widget Builder dashboard.

API Reference (Optional)

For custom integrations, you can call the API directly:

Endpoint

GET https://piknik.spot/api/local-food-score

Query Parameters

apiKey(required) - Your widget ID, included in embed code from Widget Builder
address(required*) - Full address string
lat, lng(optional*) - Coordinates as alternative to address
radius(optional) - Search radius in km (default: 8)

Response Format

{
  "score": 85,
  "grade": "Strong",
  "summary": "Two of three plate groups are covered nearby. Sources are a short trip away.",
  "breakdown": {
    "how_local": { "score": 67, "tag": "Lots nearby" },
    "easy_to_get": { "score": 88, "tag": "Short trip" },
    "covers_diet": { "score": 72, "tag": "Strong in season" }
  },
  "gates": { "supply": true, "season_multiplier": 0.67 },
  "access": {
    "combined_total": 20,
    "direct": { "farms": 12, "markets": 3, "csas": 2 },
    "indirect": { "total_connected_farms": 8, "restaurants_sourcing_locally": 5 }
  },
  "nearest": [
    {
      "name": "St. Jacobs Farmers Market",
      "type": "MARKET",
      "access_type": "direct",
      "distance_km": 2.3
    },
    ...
  ]
}

Need Help?

Our team is here to help with integration, customization, and troubleshooting.

Access DashboardContact Support