Embedding on your website

On your TXcoas dashboard go to Embed on your site (Distribution group in the sidebar). Pick a layout and your platform. Copy the snippet, paste it into your site's HTML editor, save. Done.

• Full — your brand header + tagline + complete COA list.
• Compact — just COA cards, no header. Fits sidebars, product pages, footers.
• Badge — small compliance score card with link back to your full TXcoas page.

You can also embed a single COA via data-coa="<coa-id>" — useful on a brand product detail page where you want to surface one specific lab report.

Recommended (auto-resizes to content)

<div data-txcoas-embed data-slug="happy-cactus" data-mode="full"></div>
<script async src="https://txcoas.com/embed.js"></script>

Iframe-only fallback (works everywhere — Wix, restricted plans, etc.)

<iframe
  src="https://txcoas.com/embed/t/happy-cactus?mode=full"
  width="100%" height="900" frameborder="0" loading="lazy"
  title="Happy Cactus — Lab tested COAs">
</iframe>

The recommended variant grows the iframe automatically as the COA list updates. The iframe-only variant uses a fixed pixel height — tweak the height attribute to fit your layout.

On the <div data-txcoas-embed> element:

The dashboard's embed page (Distribution → Embed on your site) shows step-by-step paste instructions for every platform we've tested. Quick summary:

• WordPress: Custom HTML block. Either snippet works.
• Shopify: Pages → HTML mode. Either snippet.
• Wix: Embed → Custom Embed → HTML. Use the iframe-only snippet (Wix usually blocks <script>).
• Squarespace: Code Block (Business plan+) or Embed Block (any plan, iframe only).
• BigCommerce: HTML widget. Either snippet.
• Webflow: Embed component. Either snippet.
• Anything else: paste into any HTML editor.

The embed page uses a tiny inline script that watches its own height (via ResizeObserver) and posts txcoas:resize messages to the parent window. The loader script (embed.js) listens for those messages and updates the iframe's style.height.

If you're building your own iframe wrapper instead of using our loader, you can listen for the same message format:

window.addEventListener("message", (evt) => {
  if (evt.origin !== "https://txcoas.com") return;
  if (evt.data?.type === "txcoas:resize") {
    myIframe.style.height = evt.data.height + "px";
  }
});

Embed pages cache for 60 seconds at the edge — new COAs you publish appear within a minute. We also fire on-demand cache busts the moment you approve a COA, so the embed often updates within seconds.

The loader script (embed.js) caches for 1 day at the CDN. Pin /embed.v1.js if you want a guaranteed-stable reference (e.g. for compliance audits or theme reviews where any script change requires re-approval).

For product templates where each item has a fixed batch number on the label, use the by-batch shortcut to avoid hardcoding internal COA IDs:

<iframe src="https://txcoas.com/embed/coa-by-batch/<tenant-slug>/<batch-id>"
        width="100%" height="320" frameborder="0" loading="lazy"></iframe>

Resolves to the latest COA whose printed batch ID matches AND that you have any claim against. Falls through to a friendly “not uploaded yet” placeholder if nothing's on file — your template doesn't break before the first COA arrives.

For technical integrations — Shopify Liquid, Webflow CMS, custom React storefronts — pull the same data as JSON:

curl https://txcoas.com/api/r/<your-slug>

Returns tenant info, compliance score (for retailers/brands), and up to 500 COAs with metadata, validation status, and embed URLs. CORS allow-all, cached 60s, no authentication.

By default, your embeds work on any site. To restrict which domains can embed your TXcoas page, manage the allowlist in Settings → Embeds in the dashboard. Wildcards via leading *. are supported.

Note: the allowlist is enforced via Referer comparison — a deterrent against casual / competitor embedding, not a hard security guarantee. True CSP allowlisting (Cloudflare Worker) is on the roadmap.

Every embed pageload fires a beacon to our analytics endpoint. See aggregate views and per-mode breakdown in Settings → Embeds → Embed views. We track aggregate counts per (tenant, mode, day) only — no individual visitors, no referrer fingerprinting.

• Embed pages are public, read-only mirrors of your COA library — no auth, no cookies, no PII.
• frame-ancestors *means anyone can frame these pages. We don't serve any sensitive material from /embed/*.
• The iframe is sandboxed: allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin. No form submission, no top-window redirects.
• Click-throughs (each COA card) open in a new tab via target="_blank" — visitors stay on your site.