Website embeds

Frame any web address on the canvas, for everything the named services do not cover.

The other embeds each know one service. Website knows none of them, which is the point: type any http or https address, press Load embed, and the page renders inside the element. A status page beside the architecture it monitors, a spec next to the flow it describes, a dashboard on the retro board.

In Illustrate mode, add one from Media → Embed → Website in the palette. In Diagram mode the palette leaves embeds out, so search for "website" in the editor's Search panel and add it from Add to canvas. Then double-click the card and paste the address.

The named services still win

Adding a website embed does not stop YouTube being YouTube. Every named service is checked first, so a youtube.com link is still a player and a docs.google.com link is still a document, however you added the card. Only addresses on hosts the editor has no opinion about are framed as plain websites.

One case is worth knowing because it looks like a bug and is not. A broken link for a service we do know is refused rather than framed: vimeo.com/nonsense says it can't embed that link instead of quietly showing you Vimeo's 404 page. "That is not a Vimeo video" is the more useful answer, and you would not have wanted the 404 anyway.

The flip side is that a lookalike host is framed, because it is not a host we know. evil-vimeo.com loads as an anonymous website; it never gets to wear Vimeo's name or badge. You typed an address and framing addresses is the feature, so the card shows you exactly what you asked for and no more.

The card is labelled with the host

A website card reads bbc.co.uk (in capitals, like every embed's name chip), not the word "Website". Three cards side by side saying "Website" tell you nothing; three saying bbc.co.uk, status.example.com and docs.internal tell you what the canvas holds at a glance. A leading www. is dropped.

That means the label follows the address. Change the address and the label changes with it.

STATUS.EXAMPLE.COMLoad embedLabelled with its hostLoaded, with open in a new tab
A website card is labelled with its host; once loaded it carries a third control, open in a new tab.

Some sites will come up blank

Plenty of sites send a header that forbids being displayed inside another page. News sites, banks and most things behind a login do it as standard.

When one of those is framed, the rectangle comes up empty. The refusal happens in the browser on the site's own instruction, and the editor genuinely cannot see it: from the outside, a page that refused to be framed and a page that loaded perfectly look identical in every signal a browser exposes. So you will not get a message saying "this site refused", because that would be a guess dressed up as a diagnosis.

What you get instead is the thing you actually want:

  • Open this page in a new tab sits beside a running website embed's other controls at all times, not only when something goes wrong. If the rectangle is blank, that is the button.
  • If nothing loads at all within eight seconds, the card says the site "isn't loading", hedged, because the honest reading covers both causes: the site may be refusing, or it may just be slow or unreachable. It offers an Open in a new tab button right there.

The palette tile, the empty card and the address hint all warn you about framing before you try, so a blank rectangle is never the first you hear of it.

If a site refuses to be framed, a link card is the better tool. It shows the title and a preview and opens the real page in a new tab, which is usually what you wanted from the blank rectangle anyway.

Nothing loads until you ask

Like every other embed, a website card fetches nothing until you press Load embed. Opening a canvas with five website cards must not quietly fetch five third-party pages and announce your visit to all of them. It matters more here than anywhere: with the named services you at least chose the service, whereas a website card could be pointing anywhere at all.

What a framed page may and may not do

A framed website runs in a sandbox. Scripts, forms and pop-ups are allowed, because a page without them is not really a page.

The permission deliberately left out is the one that lets a framed page navigate the tab it sits in. Without it, a page inside an embed cannot replace your editor with itself, which is the single thing a "frame any address" feature must not allow. Your document stays where it is no matter what the framed page tries.

The named services carry no sandbox at all, because those hosts were each chosen on purpose and several of them break under one.

Using it, and moving it

An embedded page ignores the pointer by default, so it never becomes a hole you can't drag or select through. When you want to scroll or click inside the page, hover it and press the pointer button (Use the player controls) in its top-left corner; press it again to get dragging back. The square beside it (Stop video) closes the page and returns to the card. This works as it does for the video embeds, covered in Embeds on the canvas.

A website embed carries one control the others do not: Open this page in a new tab, beside the other two. It is there whether or not the page loaded, because a framed page is a convenience and the real page is always the fallback.

Was this article helpful?