# Embed Snippet Generator > Build and — critically — VERIFY a third-party embed/snippet catalog for a website builder, CMS, or page builder that exposes a 'custom code' / 'code embed' field. Covers the two distinct embed surfaces (site-wide code vs a sandboxed per-section code-embed) and their different tag + character-limit rules; a provider catalog + snippet generator UI; and the part everyone skips — proving each snippet actually RENDERS by reproducing the host's real embed sandbox headless, not just that it passes a validator. Includes the hard-won gotchas: placeholder-id artifacts vs real bugs (a fake ID returning 404 is NOT a broken template), provider embed-format drift (rebrands, host renames, legacy→new loaders — always re-check the provider's CURRENT official docs before 'fixing'), logos via a build-time manifest instead of runtime svg/png guessing (the SSR/hydration onError race), protocol-relative // failing in a null-origin srcdoc iframe, per-account host subdomains (paste the full URL, don't hardcode a shared host + - Skill: `pooriaarab/embed-snippet-generator` (Agent Skill) - Install (CLI): `npx skillmds@latest add pooriaarab/embed-snippet-generator` - Raw SKILL.md: https://api.skillmd.com/api/skills/pooriaarab/embed-snippet-generator/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: pooriaarab (https://skillmd.com/u/pooriaarab) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/pooriaarab/embed-snippet-generator --- # embed-snippet-generator Build a **provider catalog + snippet generator** so non-technical users can drop a correct third-party embed (scheduling, forms, chat, analytics, payments, reviews…) into a website builder's *custom code* / *code embed* field — and, more importantly, **verify those snippets actually render** instead of trusting that they compile. **Activate:** "add a code-embed / widget picker," "generate a Stripe/Calendly/chat snippet," "let users paste third-party embeds," or "are our embed snippets correct and up to date?" ## The one lesson that matters A snippet passing a **validator** (well-formed, allowed tags) is NOT the same as a snippet that **renders**. Providers rename hosts, rebrand, and swap loader URLs; a template that was right a year ago silently 404s. So the deliverable is not a catalog — it's a catalog **plus a repeatable render check** you can re-run whenever you add or touch a provider. ## Step 1 — Know the host's TWO embed surfaces (they have different rules) Almost every builder has two, and conflating them is the most common mistake: | Surface | Runs where | Typical rules | |---|---|---| | **Site-wide head code** | injected into the page `` for every page | tag-**restricted** (often only `script`/`link`/`style`/`noscript`, no `iframe`/`form`); **small** char limit; may gate behind a paid plan + custom domain | | **Per-section code embed** | inside a **sandboxed iframe** on one section | tag-**unrestricted** (iframe/form/object fine — the sandbox contains them); **large** char limit | Find the host's real limits and validator and **mirror them exactly** — don't assume both surfaces share rules. Pull the numbers from the host's own field-limit config, not from memory. Enforce the char limit in your validator; every generated snippet must comply (they're usually tiny, but guard it anyway). ## Step 2 — Catalog + generator UX - One entry per provider: name, category, target surface, logo, docs URL, input fields (with realistic placeholders), and a `template(values) => string`. - **Drill-down, not a wall.** A long always-open catalog + config pane is unusable. List → pick a provider → show its fields + generated code + Copy, with a back arrow. - Filters that **wrap** (don't horizontal-scroll — the scrollbar covers the labels). - Empty search state = a "don't see your tool? request it" CTA, not a dead end. - Per-account hosts: when the embed host is the customer's own subdomain (`youraccount.provider.com/...`), take a **pasted full URL** field — do NOT hardcode a shared host + an id, it will point at the wrong origin. ## Step 3 — Verify by REPRODUCING the host's real embed sandbox (the core technique) Don't screenshot the builder. Read the host's actual code-embed **render component** and copy its contract into a headless harness: 1. Find how the host injects section embeds — almost always an `