Intégrez un détecteur d'ingrédients comédogènes sur votre blog ou site (widget gratuit)

Si vous écrivez sur les soins — blog, newsletter, site de clinique, boutique cliente — vos lecteurs finissent toujours par poser la même question : « mais cette crème, obstrue-t-elle les pores ? » Vous pouvez désormais les laisser y répondre eux-mêmes, directement sur votre page, avec une version intégrable gratuite du Pore Clogging Checker.

Ce que fait le widget

Le widget est l'analyseur complet dans un cadre compact : les visiteurs collent une liste d'ingrédients, obtiennent des notes comédogènes 0-5 colorées pour chaque correspondance et peuvent déplier les notes méthodologiques. Il tourne entièrement dans le navigateur du visiteur — sans compte, sans envoi, sans suivi de ce qu'ils collent.

Comment l'ajouter

Deux lignes de HTML, n'importe où sur votre page :

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

C'est toute l'intégration. Le script loader :

• trouve chaque élément portant l'attribut data-pore-clogging-checker (utilisez data-pcc-widget si vous préférez),
• insère une iframe pointant vers le vérificateur hébergé,
• redimensionne automatiquement le cadre au contenu, y compris après une analyse.

Vous pouvez placer la balise <script> une seule fois par page, quel que soit le nombre de points d'intégration — il monte tous.

Options de configuration

Passez les réglages en attributs data sur le div conteneur. Tous facultatifs :

• data-locale — force la langue du widget : en, zh, ja, ko, fr ou es. Par défaut, il suit le navigateur du visiteur.
• data-theme — light, dark ou system (par défaut) pour contrôler le style.
• data-prefill — préremplit le champ d'ingrédients, parfait pour analyser un produit précis dans votre article :

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

Le guide d'intégration complet contient les instructions pas à pas pour WordPress, Shopify, Squarespace, Wix et Ghost, ainsi qu'un configurateur interactif avec aperçu en direct.

Conseils de style et de placement

Le widget hérite de la largeur de votre page : enveloppez-le dans le même conteneur que votre texte. Il se place idéalement entre un test produit et son verdict, ou en accompagnement de toute analyse d'ingrédient :

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

Le cadre utilise le thème clair/sombre du site, selon la préférence système du visiteur.

Pourquoi c'est gratuit

Le vérificateur est un outil d'intérêt public : il tourne côté client, ne collecte aucune donnée d'ingrédients et existe pour aider les personnes à peau acnéique à mieux choisir. L'intégrer ne coûte rien, ne demande aucune clé API et il n'y a aucune limite de débit — les navigateurs de vos visiteurs font tout le travail.

Pour les développeurs et les curieux

Le loader fait environ 80 lignes de JavaScript vanilla sans dépendance — lisez la source si vous voulez l'auto-héberger ou l'auditer. L'iframe envoie un message pcc:resize que vous pouvez écouter si vous préférez gérer la hauteur vous-même.

Si vous l'intégrez, nous serions ravis de voir ce que vous avez construit — écrivez-nous à hello@porecloggingchecker.app. Et si vos lecteurs demandent comment les notes sont produites, orientez-les vers le guide ultime.