DEV Community

FUG
FUG

Posted on

Wi-Fi and vCard QR Codes: The Text Payloads Behind the Squares

As of October 8, 2026

A Wi-Fi QR code is not a special encrypted picture. At its core, it is text such as WIFI:T:WPA;S:CafeNet;P:correct-horse-battery;H:false;;. A phone recognizes the convention and offers to join the network. A contact QR works the same way: it carries vCard text that a scanner can turn into a contact card.

We build a QR generator with Wi-Fi and vCard options, so we treat the payload as the primary artifact. The rendered modules, colors, and download format come after the payload is correct. A beautifully styled code with a malformed escaped value still gives a guest the wrong result.

The Wi-Fi payload is a small field language

The widely used Wi-Fi QR convention starts with WIFI: and uses semicolon-delimited fields. The common fields are T for authentication type, S for SSID, P for password, and H for hidden-network status. The payload ends with a second semicolon.

Field Meaning Example value
T Network authentication type WPA
S Network name (SSID) CafeNet
P Network password correct-horse-battery
H Whether the network is hidden false

For an ordinary WPA network, the full payload can be WIFI:T:WPA;S:CafeNet;P:correct-horse-battery;H:false;;. A scanner may support a slightly different subset of values, so a generator should not promise identical behavior on every camera app. The reliable workflow is to scan the completed code with the intended devices before it reaches a sign or guest handout.

Delimiters are data hazards. A semicolon ends a field; a colon separates its label from its value; a backslash introduces escaping. In this convention, backslash-escape characters that could be interpreted as syntax inside a value. Do not hand-concatenate untrusted input and hope that an SSID containing punctuation happens to work.

function wifiEscape(value) {
  return String(value).replace(/([\\;,:\"])/g, "\\$1");
}

function wifiPayload({ ssid, password, auth = "WPA", hidden = false }) {
  return `WIFI:T:${wifiEscape(auth)};S:${wifiEscape(ssid)};` +
    `P:${wifiEscape(password)};H:${hidden ? "true" : "false"};;`;
}

console.log(wifiPayload({
  ssid: "Tea;Time",
  password: "a:b\\c"
}));
// WIFI:T:WPA;S:Tea\;Time;P:a\:b\\c;H:false;;
Enter fullscreen mode Exit fullscreen mode

The exact accepted authentication labels and empty-password behavior deserve device testing. A payload builder should validate its own supported choices rather than silently changing a network setting. It should also make the privacy consequence visible: whoever scans the code can recover its plaintext network configuration. Do not place a guest code where an unrestricted password would be inappropriate.

vCard is contact text, not a screenshot

vCard is a text contact interchange format. A small vCard QR often starts with BEGIN:VCARD, declares a VERSION, supplies properties such as FN for the formatted name and TEL or EMAIL, then closes with END:VCARD.

BEGIN:VCARD
VERSION:3.0
FN:Jordan Lee
ORG:North Street Studio
TEL;TYPE=CELL:+1-555-0100
EMAIL:jordan@example.test
END:VCARD
Enter fullscreen mode Exit fullscreen mode

Each line is a property. The property name can have parameters after semicolons, followed by a colon and its value. That looks simple until real names or notes contain commas, semicolons, line breaks, or backslashes. Escape text values according to the vCard version you choose, and do not send a display-formatted phone number when your destination expects an international number.

Use a maintained vCard library when the input goes beyond a few controlled fields. It reduces the chance of mixing vCard versions or failing to fold long physical lines. A minimal helper can demonstrate the text escaping rule, but it is not a substitute for full conformance testing:

function vcardText(value) {
  return String(value)
    .replace(/\\/g, "\\\\")
    .replace(/\n/g, "\\n")
    .replace(/;/g, "\\;")
    .replace(/,/g, "\\,");
}
Enter fullscreen mode Exit fullscreen mode

For a contact, include only fields the recipient needs. A QR displayed at a public booth may be copied by anyone. A landing page can be changed later; static vCard data printed on a badge cannot. Verify the scanned result in the phone’s contact preview before distributing it.

The payload controls density

The QR symbol carries a finite number of bits. More payload text can require a higher version, which makes the grid denser. A long vCard with multiple addresses, labels, and notes may therefore be harder to scan at a small printed size than a short Wi-Fi payload. Encoding mode and the QR library’s settings also affect the final symbol.

Error correction adds redundant codewords. The familiar L, M, Q, and H levels trade capacity for resilience to damage. Higher correction can help a clean code survive a minor obstruction, but it can also increase density for the same payload. It is not a license to cover a fixed percentage of modules with an arbitrary logo.

Decision What it changes What to verify
Add another vCard field Payload length and possibly density Scan distance at final print size
Raise error correction Redundancy and often symbol size Finished code with any logo
Escape punctuation Payload interpretation A scanner reads the original value
Export SVG instead of PNG Scaling behavior, not encoded data Quiet zone and print contrast

The generator page offers nine QR types, lets a user style a code, and exports PNG or SVG. It says the content is encoded directly rather than through a redirect, so the code has no redirect layer to maintain. That does not make the embedded Wi-Fi password or contact details timeless; those values still need review whenever they change.

A production checklist

Log the payload before rendering, but never log a real Wi-Fi password in an analytics event or browser console. Generate the symbol from the exact string, preserving its encoding. Keep a quiet margin, strong contrast, and a label that tells people what will happen after scanning. Then test on more than one actual phone, not just the device that generated it.

For vCards, check that each target contacts app assigns the name, phone, and email to the expected fields. For Wi-Fi, test joining a safe test network first and make a plan for password rotation. These are interface tests, not merely image tests.

FAQ

Can a Wi-Fi QR code hide the password from someone who scans it?

No. The code needs to contain the configuration a compatible scanner uses to join. Treat a shared QR as shared network access.

Does a vCard QR need a website?

No. A vCard QR can contain the contact text directly. It can also become large when many fields are included.

Is higher error correction always better?

No. It consumes capacity and can make a symbol denser. Select it for the actual print and decoration conditions, then scan-test the result.

Why does punctuation break some codes?

Payload formats use punctuation as syntax. Values must be escaped according to the format rather than inserted as raw text.

Build and download a free Wi-Fi, vCard, or other QR code in your browser

Top comments (0)