embed.
Add a QR code, hash generator, random string picker, base converter, or lorem ipsum widget to any website in under 60 seconds.
Live preview
This QR code is running right now, in your browser, from the same 2-line snippet you'll paste on your site. Scan it — it works.
The snippet
<script src="https://tools.napdesigns.com/embed.js" defer></script>
<nap-qr text="https://your-site.com/"></nap-qr>That's it. Change text to whatever you want the QR to encode — a URL, a WiFi login, a vCard, a phone number, anything.
Install on your platform
- Open the page or post in the block editor.
- Add a Custom HTML block where you want the widget.
- Paste the snippet from above.
- Preview or publish — the QR code renders inline.
Classic editor: switch to the Text tab and paste. Elementor / Divi / Bricks: use their HTML / Code widget.
- In the editor, click Add Elements → Embed & Social → Embed HTML.
- Choose Embed a widget and click Enter Code.
- Paste the snippet, click Update.
- Drag the box to size and place it. Publish.
- Edit the page and click the + to add a block.
- Choose Code and set language to HTML.
- Paste the snippet. Click Apply. Save the page.
- Click Insert → Embed → Embed code.
- Paste the snippet in the code field. Click Next → Insert.
- Publish the site.
Note: Google Sites sandboxes embeds in an iframe with fixed height — increase the iframe height so the widget isn't clipped.
- In the Webflow Designer, drag an Embed component onto the page.
- Paste the snippet in the code editor. Save & close.
- Publish.
- Open the HTML file in any editor.
- Paste the snippet where you want the widget to appear.
- Upload / reload. Done.
Widgets you can embed
How this compares
| Feature | @nap.codes | Elfsight / Fouita / typical widget SaaS |
|---|---|---|
| Free forever | ✓ | Free tier + paid upgrade |
| Signup required | No | Yes (email + account) |
| Rate limit / view cap | None | Usually 1k–10k / month |
| Watermark / branding on free tier | Small line, removable | Yes, removable on paid |
| Runs client-side | ✓ (in visitor's browser) | Server-side round-trip |
| Data leaves your site | No | Yes (widget backend) |
| Works if widget host is down | Cached by browser SW | Blank / broken |
| Custom styling / theming | CSS attributes | Vendor dashboard only |
FAQ
Do I need a developer account or API key?
No. Paste the two-line snippet on any page. The widget runs in your visitor's browser using nothing but standard HTML — no auth, no key, no callback URL.
How is this free? What's the catch?
No catch. The library is served from a static CDN (Cloudflare Pages), the widgets run entirely on the visitor's device, and I don't run any per-widget backend — so the marginal cost of one more embed is zero. A small "powered by @nap.codes" line appears under each widget; add hide-attrib to any tag to remove it.
Will it slow my site down?
The core library is ~4KB gzipped and loads with defer, so it never blocks first paint. The QR library (only loaded if you use <nap-qr>) is ~9KB gzipped, fetched on-demand from jsDelivr with an SRI hash. If your site has service worker caching, both files are then cached forever.
Does it work on mobile?
Yes. The widgets are responsive and touch-friendly, and every component uses Shadow DOM so your site's mobile CSS won't accidentally break the widget's layout.
Can I style the widgets to match my site?
Yes. Every component takes attributes for colors, sizes, and fonts. For example: <nap-qr text="..." fg="#1a1a1a" bg="#fff9f0" size="300"></nap-qr>. See the full attribute reference for every option.
Where's the data processed?
Entirely in the visitor's browser. QR encoding, hashing (via native crypto.subtle), random-string generation (via crypto.getRandomValues) — nothing is sent to a server. That's the whole point of using Web Components for this.
Can I use this commercially?
Yes, freely — for a client site, a SaaS marketing page, an internal tool, whatever. See terms.
What if I need something more advanced?
The API reference covers every attribute, event, and JS access pattern. If a widget is missing that you'd genuinely use, DM @nap.codes.
Advanced: for developers
Full attribute tables, JavaScript event listeners, theming options, framework integration (React, Vue, Svelte), and self-hosted setup: → Embed API reference.