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

# Scan button for your website

> Let shoppers check a product on your own website: one script tag, a button, and the verdict in their language.

The scan button opens a scanner over your web page. The shopper points their phone camera at
the code on your product and sees whether it is genuine, in their language, without leaving
your site. Your page also gets the result, so it can show an offer or a next step.

## 1. Create a publishable key

In **Settings → API**, create a key of type **Publishable** and list the websites it will be
used on (for example `https://www.example.com`). A publishable key can only verify scans, and
only from the websites you list, so it is safe to put in a web page. Never put a secret key
(`vrq_…`) in a page. See [publishable keys](https://docs.satyakod.com/api-reference/introduction.md#publishable-keys).

## 2. Add the script and a button

```html theme={null}
<script src="https://id.satyakod.com/_scan/embed/v1.js"
        data-key="pk_live_…"
        data-brand="Your brand"
        async></script>

<button data-satyakod-scan>Check if it's genuine</button>
```

Any element with `data-satyakod-scan` opens the scanner. Style the button however you like.

| Attribute | |
| - | - |
| `data-key` | Your publishable key. Required. |
| `data-brand` | Your brand's name, used in messages ("This code was issued by …"). |
| `data-lang` | `en`, `hi`, `mr`, `gu`, `bn`, `ta`, `te` or `kn`. Leave it out to follow the shopper's phone. |
| `data-accent` | A colour for the scanner's buttons, as `#RRGGBB`. |

The same attributes on a button override the script's for that button, so one page can open
the scanner in different languages.

## 3. Use the result (optional)

When a code is checked, the page receives a `satyakod:verdict` event:

```js theme={null}
document.addEventListener("satyakod:verdict", (event) => {
  const { verdict, productName, batchId, scanId } = event.detail
  if (verdict === "genuine") showWarrantyOffer(productName)
})
```

`verdict` is `genuine`, `suspicious` or `counterfeit`. You can also open the scanner from your
own code with `Satyakod.open({ lang: "hi", onVerdict: (detail) => … })`.

## What shoppers see

The scanner asks for the camera, reads Private Codes (the frame is read on Satyakod's servers;
nothing that could check or make a code is in the page) and QR and DataMatrix codes on phones
that can read them. The verdict shows with its icon and label, what it means, and the product
and batch. Every check counts as a scan in **Scans**, on the **Website or SDK** channel.

The script is about 15 KB and loads nothing until the button is pressed. It works on any page
served over https.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.