Web embeds

A web embed shows a page from another site on the board, live:

• Address: it comes from an address you paste or import. For supported sites it loads the version made for embedding.
• Heading: a pill above the page names the address and holds the controls to open, reload, and collapse it.
• Cover: a still picture stands in while the page rests, so a board full of embeds stays light.

Adding a web embed

Places a web page or an embeddable site on the board.

• Operation: one of:
  • Paste a web address on the board, or a list of them separated by spaces or line breaks. Each address becomes its own embed, at the pointer; several land in a grid.
  • Click Import URL in the App menu, in the Main panel, enter the address, and click Accept. The embed lands at the center of the view.
• Result: for a supported site, its embeddable version at the size the site prefers; for any other address, the page in an 800 by 600 frame.
• Tip: addresses of pictures, sounds, and videos, including YouTube and Vimeo, become image, audio, and video shapes instead.

Supported sites: Figma, Canva, Google Maps, Google Docs, Google Drive, Google Calendar, Google Slides, GitHub Gist, CodeSandbox, Codepen, Replit, Val Town, Observable, Scratch, Felt, Desmos, Spotify, and tldraw. Any other address loads as a plain web page, if its site allows other pages to show it. Many sites don't, and the frame then shows the browser's error instead.

Heading pill

The rounded heading above the page names the address and carries the embed's own controls, from left to right:

• Open in new tab: opens the address in a browser tab.
• Reload page: loads the page again from scratch.
• Address: the page's address. Double-click the embed to edit it in place, then press Enter or click away. An address without a scheme gets https:// added.

Collapsing the page

• Collapse to heading: hides the page and leaves the heading alone on the board. Its arrow points down while the page shows, and up as Show page, which brings the page back.

Interacting

Your clicks, keys, and scroll wheel go either to the board or to the page inside the embed, never to both. They go to the board until you choose to use the page.

• On the board, at first: clicking the embed selects it, dragging moves it, and the scroll wheel moves the board. The page shows but doesn't respond.
• Using the page: double-click the embed, or click the hand button over it, labeled Click to interact. An outline marks the embed, and the page takes your clicks, keys, and scroll wheel, as in a browser tab. Moving the pointer off the embed doesn't end it.
• Back to the board: click anywhere outside the embed. In the Player, when the page fills most of the view and no board is left to click, use Stop interacting at the top left.
• Resting embeds: while the embed shows its cover, the hand button loads the page first.
• In play mode and in the Player, one click or tap anywhere on the embed starts using the page.
• A web embed can be used even when the board is read-only or the shape is locked.

Cover

A live page uses far more of your device than a drawing. An embed can rest behind a still picture, its cover, and wake up only when it is needed.

• Activation decides when the page loads: whenever the embed is on screen, when your device can afford it, or only after a click. On a capable computer the default lets the page load right away and only waits for your click to interact. On devices with little memory the embed rests until activated.
• Cover is what shows while the embed rests. Without a cover of your own it shows a name card: the site's name and initial, its hostname, and the address. A picture you capture from the page, or an image you choose or paste, replaces the card until you remove it.
• Tip: like every live shape, capturing works through a screenshot of the tab, which the browser asks permission for. A resting embed is woken briefly for the capture. After a capture, the embed rests so its new cover shows.

Both settings live in the Cover section of the Attributes panel.

Exporting a web embed

A web embed can become a picture only through a capture of this tab, and your browser asks you to approve it first.

• Why: the browser keeps each site's page private, so the board can't draw it. Instead, the browser shares this tab, as in a video call, and Irakasi cuts the embed out of that picture.
• What Irakasi gets: a picture of the tab, like a screenshot, and nothing more. It can't click, read, or change anything in the page, and it never sees your other tabs. Only the part showing the embed is kept.
• Approving: the first time, the browser asks which tab to share; choose this one. It stays shared, with the browser's sharing bar showing, until you stop sharing, so later captures don't ask again.
• What uses it: Copy as PNG and Copy as SVG, image exports in any format, prints, Convert to Image, capturing a cover, and a video export of the board.
• When the cover is used instead: if you decline, if your browser can't share a tab (only Chrome, Edge, and other Chromium browsers can), or if the page isn't loaded or is collapsed. Without a cover, the heading pill appears alone.

Sizing

• Every embed resizes freely, except Scratch, whose viewer has a fixed size. The width cannot shrink below the heading's buttons.
• A collapsed embed keeps its height: resizing it changes the width only.
• Locked Ratio keeps the frame's proportions while resizing.
• Double-click the right resize handle to fit the frame to the width of its address.

Content scale

A website lays itself out for the size of the window it's shown in. In a web embed, that window is the shape: at a content scale of 1, the page sees a screen exactly the shape's size. A small shape then works like a tiny screen, so many pages show very little of themselves, or switch to their phone layout.

Scale, in the Fill section, sets the page's window apart from the shape:

• Below 1: the page gets a window larger than the shape, and is drawn smaller to fit. At 0.5, a 400 by 300 shape shows the page as if on an 800 by 600 screen.
• Above 1: the page gets a smaller window, and is drawn larger, to enlarge text and controls that come out too small.
• The shape keeps its size on the board either way; only the page inside changes.

Attributes

A selected web embed shows these sections of the Attributes panel.

Embedded URL

The attributes that affect the shape as a whole.

• X: the horizontal position of the shape's pivot. Inside a frame, it's measured from the frame.
• Y: the vertical position of the pivot, also measured from the frame inside one. Which way it grows depends on the Y axis direction in the UI settings.
• W: the width of the shape.
• H: the height of the shape.
• Rotation: the angle around the pivot.
• Opacity: the transparency of the whole shape, stroke and fill included.
• Corners radius: rounds the corners of the shape.
• Locked Ratio: keeps the proportion between width and height while resizing.

Its Info rows show the Type, the site's name or General URL for other pages, and the URL with an Open link.

Cover

When the page loads, and the picture shown while it rests.

• Activation: when the content runs.
  • Active: runs whenever the shape is visible.
  • Auto: runs when the device has capacity for it.
  • Manual: waits for a click on the shape, and goes back to rest when the shape leaves the visible canvas.
  • On devices with little memory, web embeds and HTML shapes wait for a click whatever their Activation. In the Player, phones and tablets always wait for a tap.
• Cover: the image shown while the content rests.
  • Capture: takes the cover from the content itself.
  • Choose image: uses an image file from your device as the cover.
  • Paste image from clipboard: uses the image in the clipboard as the cover.
  • Remove cover: clears the cover. Shown once the shape has a cover.
  • Once the shape has a cover, Capture reads Recapture and Choose image reads Replace. Capture works with one shape selected, and puts a running shape to rest.
• For provider videos only:
  • Hide player interface in captures: replays the video silently before capturing, so the player's controls and overlays fade out of the cover.

Stroke

The line around the frame: none, solid, or dashed.

• Stroke style: the kind of line. The style decides which of the controls below appear.
  • No stroke: no line at all. Arrows don't offer it.
  • Solid stroke: a continuous line.
  • Dashed stroke: a line made of dashes.
• Stroke color: the color of the line.
• Stroke opacity: the transparency of the line alone.
• Stroke width: the thickness of the line.

Dashed borders

Fill

The zoom and transparency of the page inside the frame.

• Scale: how big the page thinks its window is, from 0.1 to 100. At 1 the page lays itself out for the shape's own size. Lower it to fit more of the page, drawn smaller; raise it to enlarge text and controls that come out too small.
• Fill opacity: the transparency of the page.

Filter

A chain of SVG filter primitives applied to how the shape is drawn. See Filters.

Mask

A web embed can be masked. See Masks.

Actions

Besides the actions every shape has, covered in What every shape shares, a web embed offers this in the Actions panel.

Convert to Image

Replaces the embed with a picture of the page as shown, which draws faster but is no longer live.

• Operation: click Convert to Image. When the conversion would lose something, a dialog lists what, and you confirm with Convert.
• Needs: to picture the page itself, an embed that is loaded, expanded, and in view, and the browser's permission to share the tab. See Convert to Image.
• Result: one image in place of the embed, at up to double resolution, as a JPEG when the picture is opaque or a PNG when it needs transparency. The stroke, corners, filter, and mask carry over. Otherwise, or if you decline the capture, the saved cover is used, or the heading pill alone when there is none. Move, rotate, scale, resize, and opacity animations move to the image.
• Tip: the page is captured first: the view jumps to the embed and the screen may flicker, so wait until the board is back. After that, an empty image marks its place while it is saved, and the original stays untouched, so you can keep working.

Player interaction

• One tap activates the embed and starts using its page, as with the other interactive shapes. On phones and tablets it always starts resting behind its cover.
• Collapsing an embed to its heading during playback is not saved.
• The embed cannot be resized or have its address edited in the Player.

Animating web embeds

A web embed takes the position, rotation, scale, resize, and opacity animations. See Transforming shapes and Revealing and hiding shapes. Scratch embeds can't take the resize animation, since their viewer has a fixed size.

Limits

• A site that refuses to be shown inside other pages shows the browser's own error inside the frame.
• Pages from sites other than the supported ones run in a stricter sandbox: no forms, no popups, and no shared cookies with the site, so logged-in views do not work there.