Embed · 273 tools
Embed Vayce tools
Any tool below runs inside an iframe on your own page. Readers use it where they are, and the work still happens on their machine. Three ways to place one: paste the iframe, load it with a one-file script, or drop a link into an editor that speaks oEmbed.
1. The iframe
The default. Open any tool, use Embed in its share bar to pick a surface, theme and padding, then copy the generated code. The builder carries whatever settings you have dialled in, so the frame opens configured rather than blank.
<iframe src="https://vayce.app/embed/qr-generator/" width="100%" height="640"
style="border:0" loading="lazy" allow="clipboard-write"
title="QR Code Generator"></iframe>
<script>
(function () {
var s = document.currentScript;
var f = s && s.previousElementSibling;
if (!f || f.tagName !== 'IFRAME') return;
addEventListener('message', function (e) {
if (e.source !== f.contentWindow) return;
if (e.data && e.data.type === 'vayce:embed-height') f.style.height = e.data.height + 'px';
});
})();
</script>
<p><a href="https://vayce.app/tools/qr-generator/?ref=embed">QR Code Generator</a> by Vayce</p>
The height attribute is what a host renders before the
listener runs, or if it never does. Without it an iframe falls back to 150px. The inline
script then sizes the frame to its content, so it never grows an inner scrollbar.
2. The loader script
Some CMSs strip inline <script> out of post bodies but
allow an external one. Same result, one request.
<div data-vayce-embed="qr-generator" data-vayce-title="QR Code Generator"></div> <script src="https://vayce.app/embed.js" async></script>
What it does
Builds one iframe per [data-vayce-embed], then applies
the height messages. Nothing else.
What it does not do
No cookies, no storage, no network request beyond the frame it creates. It is short enough to read before you allow it.
Pasted twice
Safe, and useful. Each copy rescans for placeholders, and a built one is marked so it is never built again. Content loaded after the page settles picks up its embed.
Optional attributes: data-vayce-params for the chrome
settings below, data-vayce-height for the pre-measurement
height, and data-vayce-allow to override the
allow attribute.
3. Paste a link
Every tool page publishes an oEmbed endpoint in both JSON and XML, so editors that do
discovery turn a plain pasted URL into a live embed with no snippet involved. Paste
https://vayce.app/tools/qr-generator/ into WordPress, Ghost
or Discourse and the tool appears. The oEmbed form carries no
<script>, because consumers sanitise it, so the frame
keeps the height it arrives with. That height is measured per tool, so a colour converter
and a batch image resizer do not both open at the same size.
Reference
The allow attribute
A cross-origin iframe has clipboard write denied unless the host page delegates it. Most
of these tools are built around a copy button, so
allow="clipboard-write" is on every generated snippet.
Nothing else is requested by default. The QR reader adds
camera because it scans from a live stream;
clipboard-read is never requested, since it prompts the
visitor and no tool reads the clipboard.
Height protocol
If you would rather write your own listener than paste ours, the frame posts its content height to the parent window whenever it changes.
addEventListener('message', function (e) {
if (e.origin !== 'https://vayce.app') return;
if (e.data && e.data.type === 'vayce:embed-height') {
// e.data.height is the frame's full content height, in CSS pixels.
}
}); Chrome parameters
Appended to the embed URL. They carry a _ prefix so they
never collide with a tool's own settings, which use bare names.
_surface paper · plain · transparent Drops the drafting grid, or the background entirely. _pad none · snug · roomy Inset around the tool. Defaults to snug. _theme light · dark Ignored on a transparent surface, which follows the visitor. Variants
The 413 focused sub-tools embed the same way. Append the variant path:
/embed/hash-generator/sha-256/ gives a SHA-256 tool rather
than the full hash generator, which is often the better fit for a tutorial page about one
specific thing.
Credit is optional
The link under the frame is yours to keep or delete, and nothing about the tool changes
either way. It carries ?ref=embed so we can see which
sites send readers back, which is the only thing we measure about an embed.
Terms
Free for any site, commercial included. Don't reframe it as your own product or wrap it in advertising.
Every embeddable tool
Each link opens that tool with its embed builder already open.
Images
IMG · 131 embeddable
Text & Data
TXT · 100 embeddable
Audio
AUD · 42 embeddable