Incrusta un comprobador de poros obstruidos en tu blog o web (widget gratuito)

Si escribes sobre skincare — un blog, una newsletter, la web de una clínica, la tienda de un cliente — tus lectores acaban haciendo la misma pregunta: «pero ¿esta hidratante obstruye los poros?». Ahora puedes dejar que lo respondan ellos mismos, en tu propia página, con una versión incrustable gratuita del Pore Clogging Checker.

Qué hace el widget

El widget es el analizador completo en un marco compacto: los visitantes pegan una lista de ingredientes, obtienen puntuaciones comedogénicas de 0 a 5 con código de color para cada coincidencia y pueden desplegar las notas metodológicas. Funciona totalmente en el navegador del visitante: sin cuenta, sin subidas, sin rastrear lo que pegan.

Cómo añadirlo

Dos líneas de HTML, en cualquier parte de tu página:

<div data-pore-clogging-checker></div>
<script src="https://porecloggingchecker.app/widget.js" defer></script>

Esa es toda la integración. El script cargador:

• encuentra cada elemento con el atributo data-pore-clogging-checker (usa data-pcc-widget si lo prefieres),
• inserta un iframe apuntando al comprobador alojado,
• redimensiona el marco automáticamente al contenido, incluso después de un análisis.

Puedes colocar la etiqueta <script> una vez por página sin importar cuántos puntos de incrustación tengas: los monta todos.

Opciones de configuración

Pasa los ajustes como atributos data en el div contenedor. Todos opcionales:

• data-locale — fuerza el idioma del widget: en, zh, ja, ko, fr o es. Por defecto sigue el navegador del visitante.
• data-theme — light, dark o system (por defecto) para controlar el estilo.
• data-prefill — prerrellena el campo de ingredientes, perfecto para analizar un producto concreto en tu artículo:

<div
  data-pore-clogging-checker
  data-locale="es"
  data-theme="light"
  data-prefill="Aqua, Glycerin, Cocos Nucifera Oil, Isopropyl Myristate"
></div>

La guía completa de incrustación tiene instrucciones paso a paso para WordPress, Shopify, Squarespace, Wix y Ghost, y un configurador interactivo con vista previa en vivo.

Consejos de estilo y colocación

El widget hereda el ancho de tu página, así que envuélvelo en el mismo contenedor que tu texto. Queda mejor entre una reseña de producto y su veredicto, o como acompañante de cualquier análisis profundo de ingredientes:

<div style="max-width: 720px; margin: 2rem auto;" data-pore-clogging-checker></div>
<script src="https://porecloggingchecker.app/widget.js" defer></script>

El marco usa el tema claro/oscuro del sitio, según la preferencia del sistema del visitante.

Por qué es gratis

El comprobador es una herramienta de interés público: funciona en el lado del cliente, no recoge datos de ingredientes y existe para ayudar a las personas con piel propensa al acné a elegir mejor. Incrustarlo no cuesta nada, no requiere clave API y no hay límite de uso del que preocuparse: los navegadores de tus visitantes hacen todo el trabajo.

Para desarrolladores y curiosos

El cargador tiene unas 80 líneas de JavaScript vanilla sin dependencias — lee el código fuente si quieres alojarlo tú mismo o auditarlo. El iframe envía un mensaje pcc:resize que puedes escuchar si prefieres gestionar la altura por tu cuenta.

Si lo incrustas, nos encantaría ver qué has construido — escríbenos a hello@porecloggingchecker.app. Y si tus lectores preguntan cómo se producen las puntuaciones, apúntalos hacia la guía definitiva.