Skip to main content

Standalone Delegation

You can easily integrate beacon into your website, even if it's just a simple landing page or wordpress site.

Below is an example of a very simple page that adds a "delegate" button that establishes a beacon connection and then sends a delegation request to the wallet.

To try this example, you can copy and paste the following snippet into a local file called index.html and open it in the browser.

Browser Extensions

Browser Extensions don't work if the index.html file is opened directly. Instead, you have to start a small webserver. You can do this with python: python -m SimpleHTTPServer 8080

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Beacon Delegation Example</title>
<!--
Make sure you replace "2.2.3" with the latest version.
https://www.srihash.org/
-->
<script
src="https://unpkg.com/@airgap/beacon-sdk@2.2.3/dist/walletbeacon.min.js"
integrity="sha384-12/A3/UyuGF7Hdkd8eaSXef8lEO7Jzz4FtJd4NpfZ2j/wlhPM2GWZPoxo8DkxwkI"
crossorigin="anonymous"
></script>
</head>
<body>
Beacon Delegation Example
<button id="connect">Connect and Delegate</button>
<script>
const bakerAddress = "tz1MJx9vhaNRSimcuXPK2rW4fLccQnDAnVKJ"; // Replace with baker address
const bakerName = "Delegation Example DApp"; // Replace with baker name / website
// Initiate DAppClient
const client = new beacon.DAppClient({
name: bakerName,
});
const delegate = () => {
client.requestOperation({
operationDetails: [
{
kind: beacon.TezosOperationType.DELEGATION,
delegate: bakerAddress,
},
],
});
};
// Add event listener to the button
document.getElementById("connect").addEventListener("click", () => {
// Check if we have an active account
client.getActiveAccount().then((activeAccount) => {
if (activeAccount) {
// If we have an active account, send the delegate operation directly
delegate();
} else {
// If we don't have an active account, we need to request permissions first and then send the delegate operation
client.requestPermissions().then((permissions) => {
delegate();
});
}
});
});
</script>
</body>
</html>