Articles on: Rooms

Image widget

Use the Image widget for any visual — product screenshots, team photos, architecture diagrams.



How to add


  1. On the floating build bar at the bottom of the editor, click or drag Image — it sits in the primary widgets row.
  2. Drop it onto the target section.
  3. The Select image picker opens automatically, with three tabs:
    • New — click the upload zone to pick a file, or paste an image URL. An optional Name field defaults to the file or URL name.
    • From this room — reuse an image already placed somewhere else in this room.
    • From library — pick from the workspace Content library (searchable).
  5. Add captions from Edit content on the selection pill (see below).


Supported upload formats: PNG, JPG, GIF, SVG.



The selection pill — image controls


Click the image to select it. The pill above shows controls specific to the Image widget, left to right:


  1. Ask AI (gradient AI mark) — start an AI thread anchored on this image.
  2. Open (expand icon) — opens the image in the fullscreen viewer.
  3. Edit content (settings icon) — opens the Resource details popup with the image's captions and the Replace image action (see below).
  4. Design (paint bucket icon) — opens the contextual Design panel (Layout & corners / Spacing / Background / Border / Effects).
  5. ⋮ More — Duplicate · Delete.


There is no Size, Dark-mode or Expand-on-click chip on the Image pill.


Sizing an image


The Image widget has no S / M / L switcher — you size it by dragging the block's resize handles in the section. (S / M / L layouts exist only on the Document and Link widgets.)


In the rendered room, clicking an image always opens the fullscreen viewer.


Edit content — the Resource details popup


Open via the settings icon on the pill. This popup is where the image's captions and replacement live:


  • Title — with a Shown / Hidden switch. Auto-filled from the file name, and hidden by default under an image, so turn it on when the caption is worth repeating.
  • Description (optional) — a short secondary line under the title, with its own Shown / Hidden switch.
  • Add a quote — reveals a quote block: the quote text (with its own Shown / Hidden switch), the author name, and an author photo you upload.
  • Replace image — button (bottom-left of the popup) that reopens the picker so you can swap the file without losing your caption content or design settings.
  • Cancel / Save.


Single image per widget


One widget = one image. For a gallery or comparison, add multiple Image widgets side-by-side (the section's Compaction setting controls the spacing).


Replacing the image later — preserve the design


When swapping content for a new deal (or updating a template), replace the image file inside the existing widget instead of deleting the widget and adding a new one. Why:


  • All design settings — size, padding, radius, background, border, shadow — stay intact.
  • All caption content (title, description, quote, author) stays unless you change it.
  • You save time + your room stays visually consistent.


To replace: select the image, click Edit content on the pill, then Replace image at the bottom of the popup → upload or pick the new file.


Image sources


  • Upload from your computer — simplest
  • Content library — reuse an image across many rooms (see Adding assets to the library)
  • External URL — embed from a public URL


Best practices


  • High-resolution images — min 1200px wide for Large displays
  • Optimize file size — large images slow load; under 500 KB is ideal
  • Consistent style — don't mix cartoon illustrations with photographic screenshots in the same room


Updated on: 01/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!