Show a batch record on your website

You can show a batch's record on your own product page, next to the product your customers are buying. The card shows:

• the product (and variety)
• Published by: your organisation's name
• the origin region and the harvest date (or purchase date for bought-in stock)
• how many steps are recorded
• whether the record is anchored on the blockchain
• a View full record on IndiTrace link that opens the batch's full trace page in a new tab

Once the record is anchored, the card says "Record anchored on Polygon" and explains what that means: the record wasn't edited after it was anchored. It does not say the product is certified, and it makes no other claim about the product.

The card sets no cookies and runs no tracking on your page. Showing it does not count as a QR scan; a customer who opens the full record from it is counted like any other visit to the trace page. Changes to the batch usually reach the card within about ten minutes.

Get the code

1. Open the batch and choose Share or print label.
2. Scroll to Embed on your website.
3. Copy one of the three snippets:
   • Card (recommended): the card, which sizes itself to fit. On a page that blocks JavaScript it shows the badge link instead.
   • Card as an iframe: for editors that remove script tags. Its height is fixed; raise the height value if the card is cut off.
   • Badge link only: a small "Record on IndiTrace" image linked to the trace page.

The section appears only for batches that have a public trace page. Discarded batches have none.

The recommended snippet looks like this (your batch code and edition address are filled in for you):

<div data-inditrace-batch="YOUR-BATCH-CODE"><a href="https://inditrace.com/in/trace/YOUR-BATCH-CODE"><img src="https://inditrace.com/in/embed/badge.svg?uid=YOUR-BATCH-CODE" alt="Record on IndiTrace: batch YOUR-BATCH-CODE" width="196" height="48"></a></div>
<script src="https://inditrace.com/in/embed.js" async></script>

To show several batches on one page, repeat the <div> line for each batch code; the <script> line is needed once. Add data-theme="dark" to the <div> for a dark card, or data-theme="auto" to follow the visitor's device setting.

Shopify

On one product page

1. In Shopify admin, go to Products and open the product.
2. In the Description editor, click Show HTML (the <> button).
3. Paste the Card as an iframe or Badge link only snippet where you want it, then click Save.

Product descriptions can drop script tags, which is why the iframe snippet is the safer choice there.

In your theme (every product that uses the template)

1. Go to Online Store → Themes → Customize.
2. Open a product page and choose Add block → Custom Liquid in the product information section.
3. Paste the Card (recommended) snippet and click Save.

A theme block shows the same batch on every product that uses that template, so create a separate product template for the product the batch belongs to, or use the description method above.

WordPress and WooCommerce

Block editor (pages, posts and WooCommerce product descriptions)

1. Edit the page or product.
2. Add a Custom HTML block where the card should appear.
3. Paste the Card (recommended) snippet and update the page.

Classic editor: switch the editor to the Text tab, paste the snippet, then update.

WordPress removes script and iframe tags for users who are not allowed to post unfiltered HTML (on a standard site, roles below Editor), and some hosted plans remove them for everyone. If the card does not appear after you save, paste the Badge link only snippet instead: it is a plain image link and works everywhere.

Any other website

Paste the Card (recommended) snippet into your page's HTML where the card should appear. If your site builder only accepts iframes, use the iframe snippet; if it accepts neither, use the badge link.

Troubleshooting

The card says "No batch with this code is published"

Check the batch code in the snippet. Discarded batches have no public page, so their card shows this message too.

The card is cut off or has empty space below it

The recommended snippet resizes itself. With the iframe snippet, change the height value in the code.

The card shows "Illustrative example — not a live batch"

The code belongs to an example record, not one of your batches. Copy the snippet again from your batch's Share or print label dialog.