Embed a Safety Badge

Product safety badge

Shows the highest severity finding (or "No concerns found") for a given product. Replace your-product-name with your product name using hyphens instead of spaces.

Preview

HTML embed code

<a href="https://www.productsafer.com/findings?q=your-product-name" target="_blank" rel="noopener">
  <img
    src="https://www.productsafer.com/api/badge/product/your-product-name"
    alt="ProductSafer safety badge"
    width="240"
    height="28"
  />
</a>

Finding badge

Links to a specific finding by its slug. Use this when you want to highlight one particular safety concern. Replace finding-slug with the slug from the finding URL.

HTML embed code

<a href="https://www.productsafer.com/findings/finding-slug" target="_blank" rel="noopener">
  <img
    src="https://www.productsafer.com/api/badge/finding-slug"
    alt="ProductSafer safety badge"
    width="220"
    height="28"
  />
</a>

JavaScript widget

A lightweight script (~400 bytes) that injects a styled safety card into any element on your page. No iframe needed — the widget renders inline and respects your site's styling context.

Embed code

<!-- Add a container where you want the widget to appear -->
<div id="productsafer-widget" data-product="your-product-name"></div>

<!-- Load the widget script once, anywhere on your page -->
<script src="https://www.productsafer.com/widget.js" async></script>

The widget reads the data-product attribute and fetches the live safety status from the ProductSafer API. It renders nothing if no findings exist for the product.

Markdown / README badge

For GitHub READMEs, product wikis, or any Markdown document.

[![ProductSafer safety badge](https://www.productsafer.com/api/badge/product/your-product-name)](https://www.productsafer.com/findings?q=your-product-name)