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" "">
<html lang="en">
<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.
Beacon Delegation Example
<button id="connect">Connect and Delegate</button>
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 = () => {
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
} 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) => {