WalletConnect Widget — Integration Example

Quick Start

Three steps to go live

Copy qr.js next to your HTML file, then follow the steps below.

1

Place the script before </body> The widget is an IIFE — no bundler, no npm, no dependencies required.

2

Add classes to any elements Use qr-code for the QR code, qr-connect for the Connect Wallet button.

3

Ship — nothing else needed Styles are injected automatically. Works on any static host.

Option A

Inline QR Code

Renders a self-refreshing WalletConnect QR image directly inside any container element. No click required.

QR code — class="qr-code"

Connect Wallet button — class="qr-connect"

HTML

<!-- Place ONCE, before </body> -->
<script src="./qr.js"></script>

<!-- QR code (auto-refresh) -->
<div class="qr-code"></div>

<!-- Connect Wallet button -->
<div class="qr-connect"></div>

Full Example

Complete page template

Copy this boilerplate to get started immediately.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>My DApp</title>
</head>
<body>

  <!-- QR code -->
  <div class="qr-code"></div>

  <!-- Connect Wallet button -->
  <div class="qr-connect"></div>

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

Features

What's included

Everything is bundled in the single script — no external requests, no CDN dependencies.

Auto-refresh QR

QR codes refresh automatically before the 5-minute WalletConnect session expiry.

12 wallets supported

MetaMask, Trust, Rainbow, Coinbase, OKX, Zerion, Uniswap, 1inch, and more.

Mobile deeplinks

On mobile, tapping a wallet opens the app directly via deeplink or universal link.