VieStatic — QR Badge Demo & Docs

What is VieStatic?

VieStatic adds a small floating badge to your website. When clicked, it opens a modal showing a QR code for the current page. Perfect for sharing, mobile testing, or handing off URLs quickly.

Basic Usage

Load the QR engine from a CDN, then load viestatic.js from your CDN:

<link rel="stylesheet" href="https://viestatic.pages.dev/viestatic.css">
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.js"></script>
<script src="https://viestatic.pages.dev/viestatic.js"
        data-pos="3"
        data-url="">
</script>

Live demo: This page is using the exact snippet above.

Badge Positions

Use data-pos to choose where the badge appears:

1 = bottom-right  
2 = bottom-left  
3 = top-right  
4 = top-left

<script src="https://viestatic.pages.dev/viestatic.js" data-pos="1"></script>

Try it: Change data-pos in this page and refresh.

Custom URL

By default, VieStatic uses window.location.href. You can override it:

<script src="https://viestatic.pages.dev/viestatic.js"
        data-url="https://example.com"
        data-pos="2">
</script>

Tip: Great for linking to documentation, downloads, or alternate pages.

JavaScript API

You can also create badges manually using VieStatic.init().

<script>
  VieStatic.init({
    url: "https://mysite.com/docs",
    position: 4
  });
</script>

Use case: Dynamically generate QR badges for SPA routes.

How It Works

VieStatic uses:

A floating badge injected into the DOM
A modal overlay with a canvas QR code
The qrcode-generator library from a CDN
Zero dependencies beyond that

[Badge] → click → [Modal] → [QR Canvas] → scan → done

Live QR Preview

Below is a live QR code generated using the same CDN engine: