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:
