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):

<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:

// 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>

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/.

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 

<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,

<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>
PreviousIntegrate Ante using ReactNextDeploying an Ante Test

Last updated