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

# Drop in the badge

> Render a live TrustGate badge in your UI with one script tag and an element. No backend, no wallet connection.

## What you will end up with

A live trust badge sitting wherever you place it, showing the tier and flags for a token or a wallet, updating itself, with no backend on your side and no wallet popup for your users. This is the fastest way to ship TrustGate.

<Steps>
  <Step title="Load the script once">
    Add this anywhere on the page. One include covers every badge on it.

    ```html theme={null}
    <script src="https://www.trustgated.xyz/widget.js"></script>
    ```
  </Step>

  <Step title="Mark what to score">
    There are two modes. Choose based on how the address arrives.

    ```html theme={null}
    <!-- Input mode: attach to a text field. The badge appears below the input
         as the user types a contract address, after a short pause. -->
    <input type="text" data-trustgate="token-shield" placeholder="Token address" />

    <!-- Inline badge mode: score a known address on load.
         A compact badge renders immediately after the element. -->
    <span data-trustgate="token-shield" data-trustgate-address="0xTOKEN_ADDRESS">USDC</span>
    ```
  </Step>

  <Step title="Pick a style">
    Control how much text the badge shows. The `data-trustgate-style` attribute applies to inline badge mode.

    ```html theme={null}
    <!-- full: numeric score and tier, e.g. "87 · HIGH" -->
    <span data-trustgate="token-shield" data-trustgate-address="0x..." data-trustgate-style="full">USDC</span>

    <!-- minimal: tier only, e.g. "HIGH" — this is the default when the attribute is absent -->
    <span data-trustgate="token-shield" data-trustgate-address="0x..." data-trustgate-style="minimal">USDC</span>
    ```
  </Step>
</Steps>

## Putting it together

<Tabs>
  <Tab title="Arc (EVM)">
    ```html theme={null}
    <script src="https://www.trustgated.xyz/widget.js"></script>

    <!-- Input mode: badge appears below the field as a token address is typed -->
    <input type="text" data-trustgate="token-shield" placeholder="Token address" />

    <!-- Inline badge mode: score a known token on load, badge sits next to its name -->
    <span data-trustgate="token-shield" data-trustgate-address="0xTOKEN_ADDRESS">USDC</span>
    ```
  </Tab>

  <Tab title="Sui">
    <Note>
      The current `widget.js` handles EVM addresses. A Sui coin type embed is not in the published widget as of this version. This tab will be updated when Sui support lands in the widget.
    </Note>
  </Tab>
</Tabs>

## Good to know

It loads asynchronously, so it will not block your page. It needs no wallet connection, the badge reads a public score, it does not ask your users to sign anything. It is framework-agnostic, the same element works in plain HTML, React, Vue, or anything that renders markup. And during testnet it is free and open to embed.

<Note>
  The badge is non-invasive by design. It reports a signal in the spot you choose and never touches your wallet flow or the rest of your interface.
</Note>

## Next

<CardGroup cols={2}>
  <Card title="Want raw data instead?" icon="plug" href="/integrate/consume-score">
    Skip the badge and consume tiers and flags to build your own UI.
  </Card>

  <Card title="The Widget product page" icon="circle-info" href="/products/widget">
    The overview, modes, and where it fits.
  </Card>
</CardGroup>