🏷️Labels widget

Trustblock labels are visual gateways to display the security state of a project on a website.

Setup

1. Import the script to your website entry HTML file, as follows:

<script src="https://widget.trustblock.run/project-widget.min.js" defer />

2. Start adding labels anywhere you want on your website:

<div
    data-tb-project-widget
    data-tb-contract-evm-address="0xeda3866f07566d9379a91a07f8d62e19c03183e0"
    data-tb-contract-chain="bnbchain"
/>

Parameters

Each label div must have the data-tb-project-widget attribute. You might prefer to pass some arguments over others, depending on your case.

Use Case #1: Static context

If you already know the project you want to display the label for and are not in a dynamic context, then you should use data-tb-project-slug.

Head to beta.trustblock.run, find the project you want to get the label for, and copy the slug in the URL.

Then declare your div as follows:

<div
    data-tb-project-widget
    data-tb-project-slug="THE_PROJECT_SLUG"
/>

Use Case #2: Dynamic context

If you are in a dynamic context, then you should use data-tb-contract-evm-address alongside with data-tb-contract-chain .

1. Declare your div as follows:

<div
  data-tb-project-widget
  data-tb-contract-evm-address="0xabdcde"
  data-tb-chain="bnbchain"
/>

• data-tb-contract-evm-address : is the address of the contract.

• data-tb-contract-chain : see supported chains

---

Optionally, you can add the following attributes with hexadecimal color values to customize the render:

• data-tb-text-color: accepts a hexadecimal value

• data-tb-bg-color: accepts a hexadecimal value

• data-tb-colorborder: accepts a hexadecimal value

• data-tb-mode: can either be fill or fit-content

• data-tb-size: can either be small, medium or large

Try it out in the playground!