> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://katalyz.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Document widget

Use the **Document** widget to embed a file inline — PDFs, decks, spreadsheets — with in-browser preview and an optional download.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/4/8/554891f22af0b400/screenshot-2026-06-16-at-17453_co5acf.png =679xauto)

## How to add

1. On the **floating build bar** at the bottom of the editor, locate the widget — in the primary widgets row, or under the **⌄ All widgets** popover if it's not there.
2. Drag the **Document** widget onto the target section.
3. Upload a file (from your computer or the Content library) or paste a URL.
4. Configure display mode and captions from the selection pill (see below).

## Supported formats

- **PDF** — most reliable; previews natively
- **Word (.docx)**, **Excel (.xlsx)**, **PowerPoint (.pptx)** — preview support varies by browser
- **Google Docs / Sheets / Slides** — supported via URL, but see the heads-up below

For reliability, **convert to PDF before uploading** whenever possible — PDF previews are consistent across browsers and devices.

> ⚠️ **Heads-up on Google Docs / Sheets / Slides:** by default, a Google document is only accessible to **invited, logged-in Google accounts**. If you link or embed a Google doc without changing its sharing, most buyers will see a "You need access" screen. Options: either **Publish to web** on the Google doc (File → Share → Publish to web — but very few teams do this in practice), or **export to PDF** and upload the PDF instead. PDF is the safest default.

## The selection pill — Document controls

Click the document to select it. The pill above mirrors the [Image widget pill](→ 02-rooms/03-widgets-content-storytelling/03-image-widget#the-selection-pill-image-controls), with one difference: the first chip is a **Display mode** dropdown instead of a Size selector.

Left to right:

1. **Display mode** — dropdown with **four options**:
   - **Embed directly** — the document is rendered inline, full-width, no clicking needed (default in many cases — best for the centerpiece document of a page).
   - **Small** — clickable thumbnail, compact row with the file-type icon + captions.
   - **Medium** — clickable thumbnail, larger preview alongside captions (side-by-side).
   - **Large** — clickable thumbnail, big preview on top with captions stacked below.
2. **🌙 Dark mode (captions)** — toggle. Flips the caption block to a dark background with light text.
3. **Edit resource** (sliders icon) — opens the **edit popup** with the document's title, captions, and the **Replace document** action.
4. **Replace document** (refresh icon) — shortcut to swap the file without opening the full edit popup. Caption content and design settings are preserved.
5. **Design** (paintbrush icon) — opens the contextual Design panel (Layout & corners / Spacing / Background / Border / Effects).
6. **Expand on click** (diagonal arrows icon) — toggle. When on, clicking a thumbnail in the rendered room opens the fullscreen viewer. (Has no effect on **Embed directly**, since the document is already fully visible.)
7. **⋮ More** — Edit resource (same as the sliders icon) · **Duplicate** · **Delete**.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/4/8/554891f22af0b400/screenshot-2026-06-16-at-17461_1q1hypf.png =563xauto)

> **Note:** when the document is **Small or Medium**, the **title caption is always displayed** — regardless of the Title toggle. The toggle only controls display when the document is **Large** or **Embed directly**.

## Edit resource — captions and content

Open via the sliders icon on the pill (or the same item in the ⋮ More menu). Same caption fields as the Image and Video widgets:

- **Name** — the document's **title**
- **Subtitle** — a short secondary line under the title
- **Quote** — a highlighted quote block
- **Author** — name shown under the quote
- **Author avatar** — uploaded image next to the author name
- **Replace document** — button to swap the file without losing your caption content or design settings

## What buyers can do

Your buyer can:
- **Preview** the document inline (no download required)
- **Download** a local copy
- **Open full-screen** for careful review

## Replacing the document later — preserve the design

When swapping content for a new deal, **replace the file inside the existing widget** instead of deleting and re-adding. All design settings and caption content stay intact.

To replace: select the document, then click the **refresh** icon on the pill (or **Edit resource → Replace document** inside the popup) → upload / pick the new file.

## Related articles
- [Introduction to widgets](https://katalyz.crisp.help/en/article/introduction-to-widgets-skwh2f/)
- [Image widget](https://katalyz.crisp.help/en/article/image-widget-40o2ax/)
- [Video widget](https://katalyz.crisp.help/en/article/video-widget-415ise/)
- [Adding assets to the library](https://katalyz.crisp.help/en/article/adding-assets-to-the-library-16i8fyp/)
- [Signature widget](→ 02-rooms/05-widgets-conversion-engagement/03-signature-widget)