Widget ready

Connect wallets with one line of HTML

Drop qr.js into your project and add a single div to display an interactive WalletConnect QR code.

Live demo
your-site.com/index.html
Scan with any WalletConnect-compatible wallet
Integration steps
1
Copy the script file
Place qr.js in the same directory as your index.html, or in any publicly accessible folder.
📁 Your project layout:
project/
  ├── index.html
  └── qr.js
2
Add the script tag
Insert the following tag right before </body> in your HTML file.
html 
<!-- Before </body> -->
<script src="./qr.js"></script>
3
Place the widget element
Add a div with class qr-code anywhere in your page body where you want the QR code to appear.
html 
<div class="qr-code"></div>
💡 You can place multiple elements with this class — the widget initialises all of them automatically. For SPAs, call window.QRWidget.init() after mounting new elements.
4
Complete minimal page
A fully working page looks like this:
html — index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Connect Wallet</title>
</head>
<body>

  <!-- Widget element -->
  <div class="qr-code"></div>

  <!-- Widget script (before </body>) -->
  <script src="./qr.js"></script>
</body>
</html>