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

# Labels Widget

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

## Setup

<Steps>
  <Step title="Add the script">
    Import the script to your website entry HTML file as follows:

    ```html theme={null}
    <head>
      ...
      <script src="https://widget.trustblock.run/project-widget.min.js" defer />
    </head>
    ```
  </Step>

  <Step title="Add the div">
    <Tabs>
      <Tab title="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 [app.trustblock.run](https://app.trustblock.run), find the project you want to get the label for, and copy the slug in the URL.
        ![GetSlug](https://ipfs.trustblock.run/ipfs/QmVpq3SwBm581cKvGweXktTSHXsgrKmfsf3Xm1z8j6dDu4/SlugProject.gif)

        Then add the div to your website:

        ```html theme={null}
          <div
            data-tb-project-widget
            data-tb-project-slug="project-slug"
            data-tb-color="light"
            data-tb-mode="fit"
          />
        ```

        **Parameters**

        * `data-tb-project-widget` is a required parameter that allows the widget to be initialized.
        * `data-tb-project-slug` is a required parameter that specifies the slug of the project you want to display the label for.
        * `data-tb-color` is an optional parameter that specifies the color of the widget, can be `light` or `dark`.
        * `data-tb-mode` is an optional parameter that specifies the sizing behavior of the widget, can be `fit` or `fill`.
      </Tab>

      <Tab title="Dynamic Context">
        If you are in a dynamic context, then you can either use:

        * `data-tb-contract-evm-address` alongside with `data-tb-contract-chain`.
        * or `data-tb-project-domain`.

        Then add the div to your website:

        ```html theme={null}
          <div
            data-tb-project-widget
            data-tb-contract-evm-address="0x123"
            data-tb-contract-chain="ethereum"
          />
        ```

        **Parameters**

        * `data-tb-contract-evm-address` is a required parameter (if not using `data-tb-project-domain`) that specifies the EVM address of the contract you want to display the label for.
        * `data-tb-contract-chain` is a required parameter (if not using `data-tb-project-domain`) that specifies the chain of the contract you want to display the label for. Check the list of [supported chains here](/technical/supported-chains).
        * `data-tb-project-domain` is a required parameter (if not using `data-tb-contract-evm-address` and `data-tb-contract-chain`) that specifies the domain of the project you want to display the label for.
        * `data-tb-color` is an optional parameter that specifies the color of the widget, can be `light` or `dark`.
        * `data-tb-mode` is an optional parameter that specifies the sizing behavior of the widget, can be `fit` or `fill`.
      </Tab>
    </Tabs>
  </Step>
</Steps>

#### [Give it a try on our playground](https://app.trustblock.run/widget/project)
