Home / Docs / Examples / How to Generate Branded QR Code Images | HTML to Image Docs

How to Generate Branded QR Code Images

Render a branded QR code as a PNG using QRCode.js inside an HTML payload. Useful for business cards, promotional materials and contact-share screens.

If the QR code is the focal point of a wider design, look at the Event ticket template and the Coupon and voucher template. Both expose a QR code field and ship with a tested layout, so you skip the markup and SDK entirely.

HTML Content

<div class="qr-container">
    <div class="qr-code" id="qrcode"></div>
    <div class="qr-label">Scan to visit our website</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js"></script>
<script>
    new QRCode(document.getElementById("qrcode"), {
        text: "https://html2img.com",
        width: 200,
        height: 200,
        colorDark: "#2563eb",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });
</script>

CSS Styles

body {
    margin: 0;
    padding: 24px;
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.qr-container {
    width: 280px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.qr-code {
    display: inline-block;
    padding: 8px;
    background: white;
    border-radius: 8px;
}

.qr-code img {
    display: block;
}

.qr-label {
    margin-top: 16px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
}

API Request

POST https://app.html2img.com/api/html

{
    "html": "<div class=\"qr-container\"><div class=\"qr-code\" id=\"qrcode\"></div><div class=\"qr-label\">Scan to visit our website</div></div><script src=\"https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js\"></script><script>new QRCode(document.getElementById(\"qrcode\"), {text: \"https://html2img.com\",width: 200,height: 200,colorDark: \"#2563eb\",colorLight: \"#ffffff\",correctLevel: QRCode.CorrectLevel.H});</script>",
    "width": 375,
    "height": 350,
    "css": "body{margin:0;padding:24px;background:white;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}.qr-container{width:280px;padding:24px;background:white;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.1);text-align:center}.qr-code{display:inline-block;padding:8px;background:white;border-radius:8px}.qr-code img{display:block}.qr-label{margin-top:16px;color:#4b5563;font-size:14px;font-weight:500}"
}

Update the QR code content by changing the text parameter in the QRCode initialization.

How it Works

Uses QRCode.js library to generate QR codes
Customizable colors and error correction levels
Clean container design with subtle shadow
Responsive and centered layout

Consider using a webhook URL to ensure the QR code is fully generated before capture.

Customization Options

colorDark: QR code foreground color
correctLevel: Error correction level (L, M, Q, H)
width/height: QR code dimensions
Add a logo by setting logo parameter

Code in other languages

Node.js

const response = await fetch('https://app.html2img.com/api/html', {
  method: 'POST',
  headers: { 'X-API-Key': process.env.HTML2IMG_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({ html: qrHtml, css: qrCss, width: 400, height: 400, wait_for_selector: '#qr canvas', ms_delay: 300 }),
});
const { url } = await response.json();

Python

import os, requests
response = requests.post(
    'https://app.html2img.com/api/html',
    headers={'X-API-Key': os.environ['HTML2IMG_API_KEY']},
    json={'html': qr_html, 'css': qr_css, 'width': 400, 'height': 400, 'wait_for_selector': '#qr canvas', 'ms_delay': 300},
)
url = response.json()['url']

PHP

$ch = curl_init('https://app.html2img.com/api/html');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true, CURLOPT_POST => true,
    CURLOPT_HTTPHEADER => ['X-API-Key: ' . getenv('HTML2IMG_API_KEY'), 'Content-Type: application/json'],
    CURLOPT_POSTFIELDS => json_encode(['html' => $qrHtml, 'css' => $qrCss, 'width' => 400, 'height' => 400, 'wait_for_selector' => '#qr canvas', 'ms_delay' => 300]),
]);
$url = json_decode(curl_exec($ch), true)['url'];

Common pitfalls

QR code captured before render. QRCode.js paints to a canvas asynchronously. Use wait_for_selector targeting the canvas plus a small ms_delay.
Logo overlap breaks scanning. Keep logo overlay area under 20 percent of the QR area and use correctLevel: 'H' for high error correction.
Color contrast too low. Foreground and background colors need at least a 4.5:1 contrast ratio for reliable scanning.

Documentation