Embed component

The drop-files-get-a-website flow is a reusable web component, served by every instance. Sitebin's own startpage is built on it — two lines put the same widget on your page:

<script src="https://your-instance/_sitebin/embed.js" defer></script>
<sitebin-drop instance="https://your-instance"></sitebin-drop>

Attributes

Attribute	Effect
`instance`	API base URL. Defaults to the origin the script was loaded from.
`demo`	Simulate publishing — no network at all. See demo mode.
`no-domains`	Hide the custom-domains option.
`event-only`	Emit events instead of rendering the built-in claim ticket.

Events

The component emits two events:

sitebin-published — detail is the full create response body (view URL, edit URL, edit password).
sitebin-error — detail is {status, error}.

const drop = document.querySelector('sitebin-drop');
drop.addEventListener('sitebin-published', (e) => {
  console.log(e.detail);            // the create response body
});
drop.addEventListener('sitebin-error', (e) => {
  console.error(e.detail.status, e.detail.error);
});

The element also exposes a reset() method to return it to the empty drop state, ready to publish another site.

Cross-origin embedding

Embedding on a different origin than the instance needs the instance to allowlist that origin, so the create endpoint answers with CORS headers: set SITEBIN_EMBED_ORIGINS=https://your-site.com — a comma-separated list of origins, or *.

Cross-origin embedding is an Enterprise capability. The community edition ignores SITEBIN_EMBED_ORIGINS with a warning — but same-origin use and iframes work everywhere, in both editions.

Demo mode

With the demo attribute the component simulates publishing — nothing leaves the browser, and the resulting ticket is clearly stamped as a demo. That makes it great for landing pages: show the real interaction without a live backend. sitebin.io's own landing page does exactly this.

← Custom domains Configuration →