Embed a Pore Clogging Checker on Your Blog or Website (Free Widget)

If you write about skincare - a blog, a newsletter, a clinic site, a client's store - your readers eventually ask the same question: "but does this moisturizer clog pores?" Now you can let them answer it themselves, right on your page, with a free embeddable version of the Pore Clogging Checker.

What the widget does

The widget is the full analyzer in a compact frame: visitors paste an ingredient list, get color-coded 0-5 comedogenic ratings for every match, and can expand the methodology notes. It runs entirely in the visitor's browser - no account, no uploads, no tracking of what they paste.

How to add it

Two lines of HTML, anywhere on your page:

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

That is the whole integration. The loader script:

• finds every element with the data-pore-clogging-checker attribute (use data-pcc-widget if you prefer),
• inserts an iframe pointing at the hosted checker,
• automatically resizes the frame to fit the content, including after an analysis runs.

You can place the <script> tag once per page no matter how many embed points you have - it mounts all of them.

Configuration options

Pass settings as data attributes on the container div. All optional:

• data-locale - force the widget language: en, zh, ja or ko. By default it follows the visitor's browser.
• data-theme - light, dark or system (default) to control the styling.
• data-prefill - prefill the ingredient input, perfect for reviewing a specific product in your article:

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

The full embed guide has step-by-step instructions for WordPress, Shopify, Squarespace, Wix and Ghost, an interactive configurator with a live preview. Prefer not to embed anything? Your readers can also use the hosted pore clogging checker directly - no code required.

Styling and placement tips

The widget inherits your page width, so wrap it in the same container as your article text. It looks best between a product review and its verdict, or as a companion to any ingredient deep-dive:

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

The frame uses the site's own light/dark theme, matching the visitor's system preference.

Why it is free

The checker is a public-interest tool: it runs client-side, collects no ingredient data, and exists to help people with acne-prone skin make better choices. Embedding it costs nothing, requires no API key, and there is no rate limit to worry about - your visitors' browsers do all the work.

For developers and tinkerers

The loader is ~80 lines of dependency-free vanilla JavaScript - read the source if you want to self-host or audit it. The iframe posts a pcc:resize message you can listen for if you prefer to manage height yourself.

If you embed it, we would love to see what you built - drop us a line at hello@porecloggingchecker.app. And if your readers ask how the ratings are produced, point them at the ultimate guide.