Docs · Embedding

Embed a drop in your own site.

Every drop ships with an iframe option. Toggle it on, add the hostnames allowed to embed it, and paste the snippet into your site. Free for every account.

How it works

By default, drops can't be embedded — htmldrop sends Content-Security-Policy: frame-ancestors 'none' so browsers block iframe loads on any third-party page. Turning on embedding for a drop tells htmldrop which origins are allowed; the CSP header is updated to permit those exact hosts.

Enable it

In the dashboard, open the drop and find the Embed section. Flip the toggle on, then add the hostnames allowed to embed it — one per line.

Each line is a hostname pattern. Two forms are supported:

example.com
*.example.com

Use example.com for an exact host, or *.example.com for any subdomain. Schemes, ports, and paths are not allowed — only the hostname.

Copy the snippet

Once at least one origin is on the allowlist, the snippet generator appears. Pick a width and height, then copy the iframe:

<iframe src="https://htmldrop.app/s/your-slug" width="100%" height="600" style="border:0" loading="lazy" allowfullscreen></iframe>

Paste it into your blog post, docs page, or Notion / Substack embed block. Anything that supports raw HTML iframes works.

Password protection

Embedding is mutually exclusive with password protection. A password gate inside a small iframe makes for a broken experience, so htmldrop blocks the combination at save time. Remove the password first if you want to embed the drop.

Heights and scrolling

The iframe uses a fixed height that you set in the snippet. If the drop's content is taller, the iframe scrolls internally — same as YouTube, CodePen, and GitHub Gist embeds. Auto-resize via postMessage isn't supported yet.

Heads up: drops are not iframeable by default. If you were embedding a drop before this feature shipped, you'll need to enable embedding and add the host site to the allowlist for it to keep working.