Integre el widget de calidad del agua en su sitio de noticias (configuración en 5 minutos)

El código del widget

Añada una tarjeta de puntuación de ZipCheckup a cualquier página web con una sola etiqueta iframe. Sin JavaScript, sin clave de API, sin paso de compilación.

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

El valor 90210 es un ejemplo; cualquier código postal válido de EE. UU. funciona en su lugar. El widget muestra una tarjeta compacta con la calificación general, las puntuaciones por componente y los indicadores clave de riesgo.

Opciones de personalización

Controle la apariencia del widget mediante parámetros de URL:

Parámetro	Valores	Predeterminado	Descripción
`theme`	`light`, `dark`	`light`	Esquema de color
`components`	`all`, `water`, `lead`, `radon`, `flood`	`all`	Qué puntuaciones de riesgo mostrar
`showGrade`	`true`, `false`	`true`	Mostrar la insignia con la letra de la calificación
`compact`	`true`, `false`	`false`	Diseño minimalista para espacios reducidos

Ejemplos

Tema oscuro, solo calidad del agua:

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

Modo compacto para barras laterales:

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

Contenedor responsivo para el widget

El iframe por sí mismo no se redimensiona automáticamente. El siguiente contenedor CSS hace que el widget sea responsivo:

<style>
  .zipcheckup-embed {
    position: relative;
    width: 100%;
    max-width: 500px;
    padding-bottom: 75%; /* Relación de aspecto 4:3 */
    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>

Este contenedor:

Mantiene una relación de aspecto consistente en cualquier tamaño de pantalla
Añade esquinas redondeadas y una sombra sutil
Usa loading="lazy" para evitar bloquear la carga de la página
Limita el ancho máximo a 500 px (ajústelo según su diseño)

Instrucciones por plataforma

WordPress

Opción A: Editor de bloques (Gutenberg)

Abra el editor de la entrada o página
Añada un bloque HTML personalizado (haga clic en + → busque "HTML personalizado")
Pegue el código del iframe o el contenedor responsivo
Previsualice la entrada para confirmar que el widget se muestra correctamente

Opción B: Editor clásico

Cambie a la pestaña Texto (no Visual)
Pegue el código del iframe donde quiera que aparezca el widget
Vuelva a Visual para ver un marcador de posición y luego previsualice la página

Opción C: Área de widgets (barra lateral / pie de página)

Vaya a Apariencia → Widgets
Añada un widget de HTML personalizado a su barra lateral
Pegue el código compacto del widget:

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

Squarespace

Abra el editor de la página
Haga clic en + para añadir un bloque → elija Code
Desactive la opción Display Source
Pegue el código del contenedor responsivo (la versión con el bloque CSS <style> y el <div> envolvente)
Haga clic en Apply y previsualice

Nota sobre Squarespace: Squarespace elimina algunos atributos. El enfoque del contenedor responsivo funciona mejor que un iframe simple porque el contenedor <div> se encarga del dimensionamiento.

HTML personalizado / sitios estáticos

Pegue el iframe o el contenedor responsivo directamente en su HTML. Si usa un generador de sitios estáticos (Hugo, Jekyll, 11ty, Astro), puede crear un shortcode reutilizable:

Ejemplo de shortcode para Hugo (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>

Uso en el contenido:

Vea la puntuación de calidad del agua para este vecindario:

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

Buenas prácticas para sitios de noticias locales

Si va a integrar widgets de ZipCheckup en artículos de noticias, siga estas pautas para una mejor experiencia del lector:

1. La ubicación del widget cerca del párrafo relevante

No relegue el widget al final. Colóquelo justo después del párrafo que menciona el código postal o el vecindario, para que los lectores vean los datos en contexto.

2. Títulos descriptivos para el widget

El atributo title del iframe es importante para la accesibilidad (lectores de pantalla) y para el SEO. Incluya siempre el código postal:

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

3. Añada contexto editorial

No deje que el widget hable por sí solo. Añada un pie de foto o una oración introductoria:

<figure>
  <div class="zipcheckup-embed">
    <iframe
      src="https://zipcheckup.com/embed/62704"
      title="Water Quality Score for Springfield, IL"
      loading="lazy"
    ></iframe>
  </div>
  <figcaption>
    La puntuación de calidad del agua de Springfield refleja 3 infracciones
    de la EPA en los últimos 5 años.
    <a href="https://zipcheckup.com/zip/62704/">Informe completo →</a>
  </figcaption>
</figure>

4. Enlace al informe completo

El widget muestra un resumen. Ofrezca siempre a los lectores un enlace a la página del informe completo de ZipCheckup para ver los detalles:

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

5. Varios códigos postales en un mismo artículo

Si su artículo compara varios vecindarios, integre cada widget en línea con un encabezado:

<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. Consideraciones de rendimiento

El atributo loading="lazy" es apropiado para todos los widgets — especialmente si hay 3 o más en una sola página
El widget se carga de forma asíncrona y no bloquea el Largest Contentful Paint (LCP) de su página
Cada widget hace una llamada a la API desde el navegador del usuario. Si va a integrar 10 o más widgets en una sola página, una opción es usar la API directamente y renderizar sus propias tarjetas

Entrada dinámica del código postal

Para páginas interactivas donde los lectores pueden consultar su propio código postal, use un fragmento sencillo de JavaScript:

<div style="margin-bottom:16px;">
  <label for="zip-input" style="font-weight:600;">Ingrese su código postal:</label>
  <input type="text" id="zip-input" maxlength="5" pattern="[0-9]{5}"
         placeholder="ej. 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;">Consultar</button>
</div>

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

<script>
function loadEmbed() {
  var zip = document.getElementById('zip-input').value.trim();
  if (!/^\d{5}$/.test(zip)) {
    alert('Por favor ingrese un código postal válido de 5 dígitos');
    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>

Esto ofrece a los lectores una experiencia interactiva sin necesidad de preseleccionar un código postal.