Skip to content

Add embeddable walkability score widget for external sites #22

@Poseidon-t

Description

@Poseidon-t

What

Create a lightweight, embeddable widget that external websites can drop into their pages to show a walkability score for a specific address.

Why

This is the single biggest growth lever for SafeStreets. Real estate listings, city government pages, neighborhood blogs, and property management sites all want walkability data. An embed widget means SafeStreets shows up on thousands of pages without any marketing spend. Every embed is a backlink and a brand impression.

Think of how Walk Score became ubiquitous on Zillow/Redfin — it started with an embeddable widget.

How

  • Create a standalone widget bundle (small JS + CSS) that renders a compact score card
  • Embed code: <script src="https://safestreets.streetsandcommons.com/widget.js" data-address="123 Main St"></script>
  • Widget displays: overall score (0-10), tier label, 4 component bars, link to full analysis
  • Responsive — works in sidebars, cards, full-width containers
  • Cached aggressively — widget fetches score once and caches client-side

Design

  • Consumer design language (earth tones, terra accents)
  • Compact: fits in a 300px wide sidebar
  • "Powered by SafeStreets" footer linking to full report
  • Dark and light theme variants

Complexity

Medium — requires a separate build target for the widget bundle, a public API endpoint for score-only fetches, and CSS isolation (shadow DOM or scoped styles).

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requesthelp wantedExtra attention is needed

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions