# Integrate Ante using HTML

## How to use

First, add the following line in the `<head>` of the page (this contains the styling for the Ante badge):

```html
<link href="https://assets.ante.finance/widget/widget.css" rel="stylesheet" />
```

Then, insert the corresponding `<div>` tag(s) where you want the badge(s), replacing `YOUR_PROTOCOL_NAME` or `ANTE_TEST_ADDRESS` and `CHAIN_NAME` with the appropriate protocol/Ante Test:

```html
// To show the overall trust tier of a protocol
<div class="ante-protocol-widget"></div>

// To show the trust score on a specific Ante Test
<div class="ante-test-widget"></div>
```

{% hint style="warning" %}
Note: the protocol name string is case sensitive. If in doubt, check how the protocol name is spelled in the Ante app. Chain IDs can be looked up at <https://chainlist.org/>.
{% endhint %}

Finally, we need to add script tags to make it all work. If you're only implementing up to one protocol and/or one test badge, you can&#x20;

```html
<script src="https://assets.ante.finance/widget/widget.css"></script>
<script>
    AnteWidget.Protocol('.ante-protocol-widget',{
        name: 'ETH2',
        chain: '0x4', // If not provided, it defaults to '0x1' (Ethereum Mainnet)  
    });
    AnteWidget.Test('.ante-test-widget',{
        address: '0x806f60015F245F9F6442f9c81f915E45CCd76637',
        chain: '0x4' 
    });
</script>
```

If you need more than one protocol badge or test badge,

```html
<script src="https://assets.ante.finance/widget/widget.css"></script>
<script>
   var divs = document.querySelectorAll(".ante-protocol-widget");
    for (var i = 0; i < divs.length; i++) {
        AnteWidget.Protocol(divs[i].className,{
            name: divs[i].dataset.name,
            chain: divs[i].dataset.chain,
        });
    }
</script>
```

### Example of usage

The following code will generate badges for the Ante protocol as well as one of the Ante Tests that tests the ante protocol:

```
<div class="ante-protocol-widget" data-name="Ante"></div>
<div class="ante-test-widget" data-address="0x2EdC35B39BFBca6A52eA35612C2684D3D7654763" data-chain="0x1"></div>
```

<img src="https://3623970277-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaBhLPQtzmPqzNtEpO8%2Fuploads%2FgkWhSm68ai2Aa7SbdN1c%2Fante-protocol-badge-example%402x.png?alt=media&#x26;token=dcf7642d-3169-4cd8-b477-cc1bb6c0bd7f" alt="" data-size="original">![](https://3623970277-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaBhLPQtzmPqzNtEpO8%2Fuploads%2Fivvz2DJ1fkSd0KzXSpis%2Fante-test-badge-example%402x.png?alt=media\&token=f3e25acf-c298-4490-a119-85163c131dad)
