> ## Documentation Index
> Fetch the complete documentation index at: https://docs.closient.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embeddable product information panel

> Drop Closient's recall, allergen, certification and ingredient data straight into your own product detail pages.

The product information panel is a small script you add to your own product
detail pages. It renders recall status, allergens, certifications and the
printed ingredient label for a GTIN, served from Closient and kept current
without you republishing anything.

It is built for the critical rendering path: about 3.5 KB gzipped, loaded
asynchronously, with its space reserved before the data arrives so it never
pushes your page content around.

## Add it to a page

```html theme={null}
<script src="https://www.closient.com/widget/v1/pip-panel.js"
        data-gtin="00614141000036"
        data-theme="auto"
        async></script>
```

The panel renders immediately after the `<script>` tag. To place it somewhere
else on the page, put the element where you want it and the script will use it
instead of injecting its own:

```html theme={null}
<closient-pip-panel data-gtin="00614141000036"></closient-pip-panel>
<script src="https://www.closient.com/widget/v1/pip-panel.js" async></script>
```

### Configuration

| Attribute       | Values                              | Default | Meaning                                                                                |
| --------------- | ----------------------------------- | ------- | -------------------------------------------------------------------------------------- |
| `data-gtin`     | GTIN-8/12/13/14, separators allowed | —       | **Required.** The product to render.                                                   |
| `data-theme`    | `light`, `dark`, `auto`             | `light` | `auto` follows the visitor's OS colour scheme.                                         |
| `data-branding` | `on`, `off`                         | `on`    | `off` removes the "Powered by Closient" mark. The link to the full product page stays. |

The panel inherits your page's font stack and sizes itself to its container,
so it takes on your typography without shipping a webfont of its own.

## Content Security Policy

If your site sends a CSP, the script embed needs two directives:

```
script-src  https://www.closient.com;
connect-src https://www.closient.com;
```

If you want the product photo to render, add Closient's media origin to
`img-src` as well. That is a **different host** from `www.closient.com` —
product media is served from its own storage domain — so `script-src` and
`connect-src` do not cover it. Read the `image_url` field from the JSON
response for a product you carry and take the origin from there; the panel
omits the image cleanly if the request is blocked, so this directive is
optional.

### If you cannot allow a third-party script

Use the iframe instead. It renders the same panel from Closient's own origin
and needs only `frame-src`:

```html theme={null}
<iframe src="https://www.closient.com/widget/v1/pip-panel/iframe/00614141000036/"
        title="Product compliance information"
        loading="lazy"
        style="width:100%;border:0;height:420px"></iframe>
```

```
frame-src https://www.closient.com;
```

The trade-off is height. A framed document cannot resize its own frame, so you
set the height and the panel scrolls inside it — where the script embed grows
to fit its content. Prefer the script embed when your CSP allows it.

## What the panel sends

Nothing about your visitors, to anyone.

* **No cookies.** The panel's request is made with `credentials: 'omit'`, and
  no response it receives sets a cookie. Closient cannot recognise a visitor
  across your pages or anyone else's.
* **No third-party requests.** Every request the panel makes goes to Closient —
  the origin it was loaded from, plus Closient's own media domain when the
  product has a photo. No analytics, no fonts, no third-party CDN, no map
  tiles.
* **No client-side tracking.** The panel fires no analytics event of any kind.
  Closient counts panel renders server-side, in aggregate, and those counts are
  tagged separately from real QR scans so they never inflate a brand's scan
  numbers.

This is the same commitment the locator widgets make — see
[widget privacy](/concepts/store-locator-widget-privacy) for the full statement
your DPA can cite.

## What the panel shows

Sometimes less than the full record, and always for a reason. Every response
carries a `disclosure` value that says which case applies:

| `disclosure`     | What renders                                                                           | Why                                                                                                                                                                           |
| ---------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `full`           | Everything: name, brand, image, recall status, allergens, certifications, ingredients. | The claim on this GTIN is verified.                                                                                                                                           |
| `unverified`     | The GTIN and recall status only.                                                       | Nobody has proven they own this barcode. Closient will not republish an unverified claimant's product name or claims as fact — but a recall reaches your shoppers regardless. |
| `suspended`      | Name, image and recall status.                                                         | The owning brand's account is closed and in its deletion window. Safety information keeps flowing; brand content does not.                                                    |
| `age_restricted` | Name and recall status, with a link out.                                               | An age gate that your page could hide with CSS would not be a gate. The full record stays behind the hosted page, which does gate.                                            |

An empty `certifications` list on a `full` response means the product has none.
On any other response it means Closient is not asserting them. Read
`disclosure` before drawing a conclusion from an empty field.

If Closient has no record of the GTIN at all, the panel renders nothing — not
an error box. An empty compliance panel is a worse shopping experience than no
panel.

## The URL is the contract

`/widget/v1/pip-panel.js` is a version you pin, not a release number. Closient
ships fixes and improvements by replacing the asset behind that URL, so you get
them without touching your theme. The `v1` changes only if the embed's own
contract changes — attribute names, element name, the shape of what renders —
and a `v2` would be published alongside `v1`, never in place of it.

Do not deep-link to the underlying static asset or to the JSON endpoint's
internals; those are free to move.

## Reading the data directly

If you would rather render the panel yourself, the same data is available as
JSON. It is anonymous, open-CORS and cacheable:

```bash theme={null}
curl https://www.closient.com/products/api/v1/public/pip/00614141000036
```

The schema is `EmbedPanelOut` under **PIP Embed (Public)** in the
[Products API reference](/api-reference/products). Responses carry
`Cache-Control: public, max-age=300, s-maxage=300` — please respect it rather
than polling.