Member Only Content. Member already? Sign-in below if not seeing content below.
Walk Score Widget Code
Copy and paste the code below into your site.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neighborhood Score — Walk Score Widget</title>
<!--
╔══════════════════════════════════════════════════════════════╗
║ NEIGHBORHOOD SCORE — WALK SCORE WIDGET FRAME ║
║ For Realtor Club Use · Drop into any website ║
╠══════════════════════════════════════════════════════════════╣
║
║ SETUP — THREE THINGS TO DO BEFORE PUBLISHING
║
║ 🔵 BLUE BALLS — Your brand colors
║ Find the 4 hex color values marked with blue balls
║ and replace them with your brand colors.
║ A hex color looks like this: #1a1a2e
║ Google "color hex picker" to find any color you want.
║ Your designer or printer will also know your hex codes.
║
║ 🟠 ORANGE BALLS — Walk Score widget
║ Paste your Walk Score <script> tag between the
║ two sets of orange ball markers.
║ Get your free code at:
║ walkscore.com/professional/walk-score-widget.php
║
║ ✏️ HEADLINE & SUBHEADING
║ Optionally change the widget title and subtitle
║ text — also marked with blue balls below.
║
╚══════════════════════════════════════════════════════════════╝
-->
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet">
<script>
// ── Web Component Definition ───────────────────────────────────────────────
class NeighborhoodScoreWidget extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
/*
╔═══════════════════════════════════════════════════════════╗
║ 🔵 YOUR BRAND COLORS — CHANGE THE 4 HEX VALUES BELOW 🔵
║
║ Each line is marked with a blue ball comment.
║ Replace the color code (e.g. #1a1a2e) with your own.
║ Google "hex color picker" to find any color you want.
╚═══════════════════════════════════════════════════════════╝
*/
:host {
/* 🔵 HEADER & FOOTER BACKGROUND COLOR 🔵 */
--nbs-primary: #1a1a2e;
/* 🔵 ACCENT / HIGHLIGHT COLOR (eyebrow text, gradient line, footer link) 🔵 */
--nbs-accent: #C9A84C;
/* 🔵 CARD BODY BACKGROUND COLOR 🔵 */
--nbs-card-bg: #FFFFFF;
/* 🔵 BORDER COLOR 🔵 */
--nbs-border: #E0D8CC;
/* ── Do not edit below this line ── */
--nbs-on-primary: #FFFFFF;
--nbs-text: #1C1C1C;
--nbs-muted: #888888;
--nbs-radius: 16px;
--nbs-shadow: 0 16px 56px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.07);
all: initial;
display: block;
font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.card {
background: var(--nbs-card-bg);
border-radius: var(--nbs-radius);
box-shadow: var(--nbs-shadow);
overflow: hidden;
max-width: 480px;
border: 1.5px solid var(--nbs-border);
animation: rise 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes rise {
from { opacity: 0; transform: translateY(20px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.header {
background: var(--nbs-primary);
padding: 24px 28px 20px;
position: relative;
overflow: hidden;
}
.header::before {
content: ''; position: absolute; top: -40px; right: -40px;
width: 140px; height: 140px; border-radius: 50%;
background: var(--nbs-accent); opacity: 0.07; pointer-events: none;
}
.header::after {
content: ''; position: absolute; bottom: -30px; left: 20px;
width: 90px; height: 90px; border-radius: 50%;
background: var(--nbs-accent); opacity: 0.05; pointer-events: none;
}
.eyebrow {
display: flex; align-items: center; gap: 9px;
font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--nbs-accent);
margin-bottom: 8px; position: relative; z-index: 1;
}
.eyebrow-line {
width: 22px; height: 1.5px;
background: var(--nbs-accent); opacity: 0.65; flex-shrink: 0;
}
.title {
font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
font-size: 28px; font-weight: 600;
color: var(--nbs-on-primary);
line-height: 1.1; letter-spacing: -0.01em;
position: relative; z-index: 1;
}
.subtitle {
font-size: 11.5px; font-weight: 300; letter-spacing: 0.04em;
color: var(--nbs-on-primary); opacity: 0.5;
margin-top: 6px; position: relative; z-index: 1;
}
.rule {
height: 3px;
background: linear-gradient(90deg, var(--nbs-accent) 0%, transparent 100%);
}
.body {
padding: 24px 26px;
background: var(--nbs-card-bg);
}
.embed-area {
min-height: 160px;
display: flex; align-items: center; justify-content: center;
}
.placeholder {
width: 100%;
border: 2px dashed var(--nbs-border);
border-radius: 10px;
padding: 30px 22px; text-align: center;
}
.placeholder-icon {
font-size: 30px; display: block;
margin-bottom: 10px; opacity: 0.4;
}
.placeholder-head {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 18px; color: var(--nbs-text);
opacity: 0.65; margin-bottom: 7px;
}
.placeholder-copy {
font-size: 11.5px; color: var(--nbs-muted); line-height: 1.75;
}
.placeholder-copy a {
color: var(--nbs-accent); text-decoration: none;
font-weight: 500; border-bottom: 1px solid currentColor;
}
.footer {
background: var(--nbs-primary);
padding: 11px 26px;
display: flex; align-items: center; justify-content: space-between;
}
.footer-label {
font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--nbs-on-primary); opacity: 0.38;
}
.footer-link {
font-size: 9.5px; letter-spacing: 0.05em;
color: var(--nbs-accent); text-decoration: none;
opacity: 0.8; transition: opacity 0.2s;
}
.footer-link:hover { opacity: 1; }
</style>
<div class="card">
<div class="header">
<div class="eyebrow"><div class="eyebrow-line"></div>Neighborhood Intelligence</div>
<!-- 🔵 HEADLINE TEXT — Change to whatever you like 🔵 -->
<div class="title">Discover the Neighborhood</div>
<!-- 🔵 SUBHEADING TEXT — Change to whatever you like 🔵 -->
<div class="subtitle">Walkability · Transit · Bike Scores for this property</div>
</div>
<div class="rule"></div>
<div class="body">
<div class="embed-area">
<!-- 🟠 DELETE EVERYTHING BETWEEN THE TWO SETS OF ORANGE BALLS AND PASTE YOUR WALK SCORE <script> TAG HERE 🟠 -->
<div class="placeholder">
<span class="placeholder-icon">📍</span>
<div class="placeholder-head">Walk Score Widget Goes Here</div>
<div class="placeholder-copy">
Get your free embed code at
<a href="https://www.walkscore.com/professional/walk-score-widget.php" target="_blank">walkscore.com</a>
and paste the <script> tag between the 🟠 orange ball markers in the HTML.
</div>
</div>
<!-- 🟠 END — EVERYTHING BETWEEN THE TWO SETS OF ORANGE BALLS SHOULD BE REPLACED WITH YOUR WALK SCORE <script> TAG 🟠 -->
</div>
</div>
<div class="footer">
<span class="footer-label">Powered by Walk Score®</span>
<a class="footer-link" href="https://www.walkscore.com" target="_blank">walkscore.com →</a>
</div>
</div>
`;
}
}
customElements.define('neighborhood-score-widget', NeighborhoodScoreWidget);
</script>
</head>
<body>
<neighborhood-score-widget></neighborhood-score-widget>
<style>
neighborhood-score-widget {
display: block;
max-width: 480px;
margin: 0 auto;
}
</style>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neighborhood Score — Walk Score Widget</title>
<!--
╔══════════════════════════════════════════════════════════════╗
║ NEIGHBORHOOD SCORE — WALK SCORE WIDGET FRAME ║
║ For Realtor Club Use · Drop into any website ║
╠══════════════════════════════════════════════════════════════╣
║
║ SETUP — THREE THINGS TO DO BEFORE PUBLISHING
║
║ 🔵 BLUE BALLS — Your brand colors
║ Find the 4 hex color values marked with blue balls
║ and replace them with your brand colors.
║ A hex color looks like this: #1a1a2e
║ Google "color hex picker" to find any color you want.
║ Your designer or printer will also know your hex codes.
║
║ 🟠 ORANGE BALLS — Walk Score widget
║ Paste your Walk Score <script> tag between the
║ two sets of orange ball markers.
║ Get your free code at:
║ walkscore.com/professional/walk-score-widget.php
║
║ ✏️ HEADLINE & SUBHEADING
║ Optionally change the widget title and subtitle
║ text — also marked with blue balls below.
║
╚══════════════════════════════════════════════════════════════╝
-->
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet">
<script>
// ── Web Component Definition ───────────────────────────────────────────────
class NeighborhoodScoreWidget extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
/*
╔═══════════════════════════════════════════════════════════╗
║ 🔵 YOUR BRAND COLORS — CHANGE THE 4 HEX VALUES BELOW 🔵
║
║ Each line is marked with a blue ball comment.
║ Replace the color code (e.g. #1a1a2e) with your own.
║ Google "hex color picker" to find any color you want.
╚═══════════════════════════════════════════════════════════╝
*/
:host {
/* 🔵 HEADER & FOOTER BACKGROUND COLOR 🔵 */
--nbs-primary: #1a1a2e;
/* 🔵 ACCENT / HIGHLIGHT COLOR (eyebrow text, gradient line, footer link) 🔵 */
--nbs-accent: #C9A84C;
/* 🔵 CARD BODY BACKGROUND COLOR 🔵 */
--nbs-card-bg: #FFFFFF;
/* 🔵 BORDER COLOR 🔵 */
--nbs-border: #E0D8CC;
/* ── Do not edit below this line ── */
--nbs-on-primary: #FFFFFF;
--nbs-text: #1C1C1C;
--nbs-muted: #888888;
--nbs-radius: 16px;
--nbs-shadow: 0 16px 56px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.07);
all: initial;
display: block;
font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.card {
background: var(--nbs-card-bg);
border-radius: var(--nbs-radius);
box-shadow: var(--nbs-shadow);
overflow: hidden;
max-width: 480px;
border: 1.5px solid var(--nbs-border);
animation: rise 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes rise {
from { opacity: 0; transform: translateY(20px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.header {
background: var(--nbs-primary);
padding: 24px 28px 20px;
position: relative;
overflow: hidden;
}
.header::before {
content: ''; position: absolute; top: -40px; right: -40px;
width: 140px; height: 140px; border-radius: 50%;
background: var(--nbs-accent); opacity: 0.07; pointer-events: none;
}
.header::after {
content: ''; position: absolute; bottom: -30px; left: 20px;
width: 90px; height: 90px; border-radius: 50%;
background: var(--nbs-accent); opacity: 0.05; pointer-events: none;
}
.eyebrow {
display: flex; align-items: center; gap: 9px;
font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--nbs-accent);
margin-bottom: 8px; position: relative; z-index: 1;
}
.eyebrow-line {
width: 22px; height: 1.5px;
background: var(--nbs-accent); opacity: 0.65; flex-shrink: 0;
}
.title {
font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
font-size: 28px; font-weight: 600;
color: var(--nbs-on-primary);
line-height: 1.1; letter-spacing: -0.01em;
position: relative; z-index: 1;
}
.subtitle {
font-size: 11.5px; font-weight: 300; letter-spacing: 0.04em;
color: var(--nbs-on-primary); opacity: 0.5;
margin-top: 6px; position: relative; z-index: 1;
}
.rule {
height: 3px;
background: linear-gradient(90deg, var(--nbs-accent) 0%, transparent 100%);
}
.body {
padding: 24px 26px;
background: var(--nbs-card-bg);
}
.embed-area {
min-height: 160px;
display: flex; align-items: center; justify-content: center;
}
.placeholder {
width: 100%;
border: 2px dashed var(--nbs-border);
border-radius: 10px;
padding: 30px 22px; text-align: center;
}
.placeholder-icon {
font-size: 30px; display: block;
margin-bottom: 10px; opacity: 0.4;
}
.placeholder-head {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 18px; color: var(--nbs-text);
opacity: 0.65; margin-bottom: 7px;
}
.placeholder-copy {
font-size: 11.5px; color: var(--nbs-muted); line-height: 1.75;
}
.placeholder-copy a {
color: var(--nbs-accent); text-decoration: none;
font-weight: 500; border-bottom: 1px solid currentColor;
}
.footer {
background: var(--nbs-primary);
padding: 11px 26px;
display: flex; align-items: center; justify-content: space-between;
}
.footer-label {
font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--nbs-on-primary); opacity: 0.38;
}
.footer-link {
font-size: 9.5px; letter-spacing: 0.05em;
color: var(--nbs-accent); text-decoration: none;
opacity: 0.8; transition: opacity 0.2s;
}
.footer-link:hover { opacity: 1; }
</style>
<div class="card">
<div class="header">
<div class="eyebrow"><div class="eyebrow-line"></div>Neighborhood Intelligence</div>
<!-- 🔵 HEADLINE TEXT — Change to whatever you like 🔵 -->
<div class="title">Discover the Neighborhood</div>
<!-- 🔵 SUBHEADING TEXT — Change to whatever you like 🔵 -->
<div class="subtitle">Walkability · Transit · Bike Scores for this property</div>
</div>
<div class="rule"></div>
<div class="body">
<div class="embed-area">
<!-- 🟠 DELETE EVERYTHING BETWEEN THE TWO SETS OF ORANGE BALLS AND PASTE YOUR WALK SCORE <script> TAG HERE 🟠 -->
<div class="placeholder">
<span class="placeholder-icon">📍</span>
<div class="placeholder-head">Walk Score Widget Goes Here</div>
<div class="placeholder-copy">
Get your free embed code at
<a href="https://www.walkscore.com/professional/walk-score-widget.php" target="_blank">walkscore.com</a>
and paste the <script> tag between the 🟠 orange ball markers in the HTML.
</div>
</div>
<!-- 🟠 END — EVERYTHING BETWEEN THE TWO SETS OF ORANGE BALLS SHOULD BE REPLACED WITH YOUR WALK SCORE <script> TAG 🟠 -->
</div>
</div>
<div class="footer">
<span class="footer-label">Powered by Walk Score®</span>
<a class="footer-link" href="https://www.walkscore.com" target="_blank">walkscore.com →</a>
</div>
</div>
`;
}
}
customElements.define('neighborhood-score-widget', NeighborhoodScoreWidget);
</script>
</head>
<body>
<neighborhood-score-widget></neighborhood-score-widget>
<style>
neighborhood-score-widget {
display: block;
max-width: 480px;
margin: 0 auto;
}
</style>
</body>
</html>