Paste the snippet below into any website to render this design read-only. Linked sub-designs, animations, and deck navigation all work inside the iframe.
+
+
+
+
+
+
+
+
+
+ ×
+
+
+
+
+
+
+
+
+
+
+
+
Live preview
+
+
+
Iframe code
+
+
+
+
+
+
+
+
+
@@ -21624,6 +21674,166 @@
_paintEmbed(root, payload, event, route, decoded);
}
+ // -------- Embed code generator (preview-pane dialog) -------------
+ // Opens from the "Embed ↗" button on the design preview pane.
+ // Builds an iframe snippet from a row + user-picked options;
+ // shows a live preview of what the snippet will render.
+
+ function _embedSizeFor(preset, customW, customH) {
+ switch (preset) {
+ case 'square-320': return { w: 320, h: 320, responsive: false };
+ case 'square-480': return { w: 480, h: 480, responsive: false };
+ case 'fixed-640-360': return { w: 640, h: 360, responsive: false };
+ case 'fixed-800-450': return { w: 800, h: 450, responsive: false };
+ case 'fixed-960-540': return { w: 960, h: 540, responsive: false };
+ case 'custom': return { w: Math.max(50, customW | 0) || 800,
+ h: Math.max(50, customH | 0) || 450,
+ responsive: false };
+ case 'responsive-16-9':
+ default: return { w: 800, h: 450, responsive: true };
+ }
+ }
+
+ function _buildEmbedIdFromRow(row, idType) {
+ if (!row?.e) return '';
+ const topRelays = splitRelayList(state.community?.relays || '').slice(0, 2);
+ if (idType === 'nevent') {
+ return encodeNevent({
+ eventId: row.e.id,
+ author: row.e.pubkey || '',
+ kind: row.e.kind || 30078,
+ relays: topRelays,
+ });
+ }
+ // naddr: replaceable-event coord; requires a d-tag.
+ const dTag = (row.e.tags || []).find(t => t[0] === 'd' && t[1])?.[1] || '';
+ if (!dTag) return '';
+ return encodeNaddr({
+ kind: row.e.kind || 30078,
+ pubkey: row.e.pubkey || '',
+ dTag,
+ relays: topRelays,
+ });
+ }
+
+ function _buildEmbedUrlString(id, opts) {
+ const params = new URLSearchParams();
+ if (!opts.controls) params.set('controls', '0');
+ if (!opts.attr) params.set('attr', '0');
+ if (!opts.open) params.set('open', '0');
+ if (opts.credits) params.set('credits', '1');
+ const qs = params.toString();
+ return `${location.origin}/embed/${id}${qs ? '?' + qs : ''}`;
+ }
+
+ function refreshEmbedDialog() {
+ const modal = $('embedCodeModal');
+ const row = modal?._row;
+ if (!row) return;
+ const idType = $('embedIdType').value;
+ const sizePreset = $('embedSizePreset').value;
+ const isCustom = sizePreset === 'custom';
+ for (const id of ['embedCustomW', 'embedCustomX', 'embedCustomH']) {
+ const el = $(id); if (el) el.style.display = isCustom ? '' : 'none';
+ }
+ const id = _buildEmbedIdFromRow(row, idType);
+ const codeEl = $('embedIframeCode');
+ const previewArea = $('embedPreviewArea');
+ if (!id) {
+ if (codeEl) codeEl.value = '// This design has no d-tag — switch identifier to Snapshot (nevent).';
+ if (previewArea) previewArea.innerHTML = '
This design has no addressable d-tag. Use Snapshot (nevent) instead.