Embed Water Quality Widget in Your News Site (5-Min Setup)

The Embed Code

Add a ZipCheckup score card to any webpage with a single iframe tag. No JavaScript, no API key, no build step.

<iframe
  src="https://zipcheckup.com/embed/90210"
  width="400"
  height="300"
  frameborder="0"
  title="ZipCheckup Home Safety Score for 90210"
></iframe>

Replace 90210 with any valid U.S. ZIP code. The widget renders a compact score card showing the overall grade, component scores, and key risk indicators.

Customization Options

Control the widget appearance with URL parameters:

Examples

Dark theme, water quality only:

<iframe
  src="https://zipcheckup.com/embed/90210?theme=dark&components=water"
  width="400"
  height="200"
  frameborder="0"
  title="Water Quality Score for 90210"
></iframe>

Compact mode for sidebars:

<iframe
  src="https://zipcheckup.com/embed/90210?compact=true"
  width="300"
  height="180"
  frameborder="0"
  title="ZipCheckup Score for 90210"
></iframe>

Responsive Embed Wrapper

The iframe itself doesn't resize automatically. Use this CSS wrapper to make the widget responsive:

<style>
  .zipcheckup-embed {
    position: relative;
    width: 100%;
    max-width: 500px;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
  .zipcheckup-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

<div class="zipcheckup-embed">
  <iframe
    src="https://zipcheckup.com/embed/90210"
    title="ZipCheckup Home Safety Score for 90210"
    loading="lazy"
  ></iframe>
</div>

This wrapper:

• Maintains a consistent aspect ratio on any screen size
• Adds rounded corners and a subtle shadow
• Uses loading="lazy" to avoid blocking page load
• Caps the max width at 500px (adjust to fit your layout)

Platform-Specific Instructions

WordPress

Option A: Block Editor (Gutenberg)

1. Open the post or page editor
2. Add a Custom HTML block (click + → search "Custom HTML")
3. Paste the iframe code or the responsive wrapper
4. Preview the post to verify the widget renders correctly

Option B: Classic Editor

1. Switch to the Text tab (not Visual)
2. Paste the iframe code where you want the widget
3. Switch back to Visual to see a placeholder, then preview the page

Option C: Widget Area (Sidebar/Footer)

1. Go to Appearance → Widgets
2. Add a Custom HTML widget to your sidebar
3. Paste the compact embed code:

<iframe
  src="https://zipcheckup.com/embed/90210?compact=true"
  width="100%"
  height="200"
  frameborder="0"
  title="Local Water Quality Score"
  loading="lazy"
></iframe>

Squarespace

1. Open the page editor
2. Click + to add a block → choose Code
3. Toggle the Display Source switch OFF
4. Paste the responsive wrapper code (the version with the CSS <style> block and wrapping <div>)
5. Click Apply and preview

Squarespace note: Squarespace strips some attributes. The responsive wrapper approach works better than a bare iframe because the <div> container handles sizing.

Custom HTML / Static Sites

Paste the iframe or responsive wrapper directly into your HTML. If you're using a static site generator (Hugo, Jekyll, 11ty, Astro), you can create a reusable shortcode:

Hugo shortcode example (layouts/shortcodes/zipcheckup.html):

{{ $zip := .Get 0 | default "90210" }}
<div class="zipcheckup-embed">
  <iframe
    src="https://zipcheckup.com/embed/{{ $zip }}"
    title="ZipCheckup Home Safety Score for {{ $zip }}"
    loading="lazy"
  ></iframe>
</div>

Usage in content:

Check the water quality score for this neighborhood:

{{</* zipcheckup "60614" */>}}

Best Practices for Local News Sites

If you're embedding ZipCheckup widgets in news articles, follow these guidelines for the best reader experience:

1. Place the widget near the relevant paragraph

Don't bury the embed at the bottom. Place it directly after the paragraph that mentions the specific ZIP code or neighborhood, so readers see the data in context.

2. Use descriptive titles

The title attribute on the iframe is important for accessibility (screen readers) and SEO. Always include the ZIP code:

title="Water Quality Score for Springfield, IL (62704)"

3. Add editorial context

Don't let the widget speak for itself. Add a caption or introductory sentence:

<figure>
  <div class="zipcheckup-embed">
    <iframe
      src="https://zipcheckup.com/embed/62704"
      title="Water Quality Score for Springfield, IL"
      loading="lazy"
    ></iframe>
  </div>
  <figcaption>
    Springfield's water quality score reflects 3 EPA violations
    in the past 5 years.
    <a href="https://zipcheckup.com/zip/62704/">Full report →</a>
  </figcaption>
</figure>

4. Link to the full report

The embed shows a summary. Always give readers a link to the full ZipCheckup report page for details:

https://zipcheckup.com/zip/{ZIP_CODE}/

5. Multiple ZIPs in one article

If your article compares several neighborhoods, embed each widget inline with a heading:

<h3>Downtown (60601)</h3>
<iframe src="https://zipcheckup.com/embed/60601" ...></iframe>

<h3>Lincoln Park (60614)</h3>
<iframe src="https://zipcheckup.com/embed/60614" ...></iframe>

<h3>South Side (60621)</h3>
<iframe src="https://zipcheckup.com/embed/60621" ...></iframe>

6. Performance considerations

• Use loading="lazy" on all embeds — especially if you have 3+ widgets on a single page
• The embed loads asynchronously and won't block your page's Largest Contentful Paint (LCP)
• Each embed makes one API call from the user's browser. If you're embedding 10+ widgets on a single page, consider using the API directly and rendering your own cards instead

Dynamic ZIP Code Input

For interactive pages where readers can check their own ZIP code, use a simple JavaScript snippet:

<div style="margin-bottom:16px;">
  <label for="zip-input" style="font-weight:600;">Enter your ZIP code:</label>
  <input type="text" id="zip-input" maxlength="5" pattern="[0-9]{5}"
         placeholder="e.g. 90210"
         style="padding:8px 12px; border:1px solid #ccc; border-radius:6px; margin-left:8px; width:100px;">
  <button onclick="loadEmbed()" style="padding:8px 16px; margin-left:4px; cursor:pointer;">Check</button>
</div>

<div id="embed-container"></div>

<script>
function loadEmbed() {
  var zip = document.getElementById('zip-input').value.trim();
  if (!/^\d{5}$/.test(zip)) {
    alert('Please enter a valid 5-digit ZIP code');
    return;
  }
  document.getElementById('embed-container').innerHTML =
    '<iframe src="https://zipcheckup.com/embed/' + zip + '"' +
    ' width="100%" height="300" frameborder="0"' +
    ' title="ZipCheckup Score for ' + zip + '"' +
    ' loading="lazy"></iframe>';
}
</script>

This gives readers an interactive experience without requiring you to pre-select a ZIP code.