# QR code

Create a static QR code for a URL or text. Download a sharp SVG for print or add the code to a webpage. The content is encoded directly, with no redirect service or expiry date.

Version: 1.0.0
Page: https://tools.stuffonscreen.com/qr-code
Script: https://tools.stuffonscreen.com/widgets/v1.0.0/qr-code.js
Integrity: sha384-yKDiP1uN5Q+pT3nDNNx9ZvPS8Sncw/wvGqAQ0BUXfiT/J97uxG8/x213j41S/vov
Self-host ZIP: https://tools.stuffonscreen.com/widgets/v1.0.0/qr-code.zip
Licence: https://tools.stuffonscreen.com/licence

## Install

```html
<script src="https://tools.stuffonscreen.com/widgets/v1.0.0/qr-code.js" defer></script>
<sos-qr-code data-config="{&quot;text&quot;:&quot;https://stuffonscreen.com&quot;}"></sos-qr-code>
```

Keep the built-in visible credit (nofollow is allowed). The licence does not require a credit on exported files. Include scripts once per page.

## Configuration

The data-config attribute is a JSON object containing string values. When writing HTML, escape the JSON as an HTML attribute. Do not interpolate raw untrusted text. When creating an element in JavaScript, use element.setAttribute('data-config', JSON.stringify(config)).

- text: URL or text. Up to 1,000 UTF-8 bytes. Short URLs make simpler, easier-to-scan codes.

Default configuration:

```json
{
  "text": "https://stuffonscreen.com"
}
```

## Behaviour and limits

- The exported code has a four-module quiet zone and medium error correction. Keep the white border and use dark marks on a light background.
- Scan the final printed size with more than one phone before ordering a print run. This tool does not verify destination safety or availability.
- A static code cannot change its destination after printing. SVG files are yours to use without a credit printed beside them.
- Invalid configurations show an error instead of a partial result. Updating data-config rerenders the component.
- Styling is isolated with Shadow DOM. There are no tracking cookies, paid API calls or remote configuration requests.
- Browser JavaScript is required. Essential business/event information should also be in normal HTML for indexing and no-JS users.

Framework/CSP instructions: https://tools.stuffonscreen.com/docs/implementation.md