How to Embed and Display Document Files on Your Site

How to Embed and Display Document Files on Your Site

By Michael Thompson

December 20, 2024 at 02:36 PM

Embed files like PDFs, Excel spreadsheets, and Google Drive documents directly on your website using these simple methods:

PDFs

  • Use Issuu to embed PDF files
  • Follow Issuu's documentation for specific embedding instructions

Excel and PowerPoint Files

  1. Upload your file to Microsoft OneDrive
  2. Navigate to the Files page
  3. Right-click the document (Control+click on Mac)
  4. Click Embed
  5. Click Generate
  6. Copy the embed code

Green Excel file icon

Green Excel file icon

Black browser window with toolbar

Black browser window with toolbar

Google Drive Documents

  1. Open your document
  2. Click File
  3. Select "Publish to the web"
  4. Click Publish
  5. Copy the code from the Embed tab

File menu with arrow to Publish

File menu with arrow to Publish

Embedded code in a yellow box

Embedded code in a yellow box

To Add Embedded Files to Your Site:

  1. Add a Code block where you want the file to appear
  2. Paste the embed code
  3. Click Save or Publish

Customize Document Display:

  • For Google Slides: Adjust height and width in the embed code
  • For documents and spreadsheets: Add this after the URL:
    &embedded=true" style="border: none; width: 100%; height: 600px"
    
  • Modify the height value (600px) as needed
  • Use Spacer blocks to adjust width
  • Document will fill column width when set to 100%

Note: Custom code modifications are not officially supported and may require additional troubleshooting or developer assistance.

Related Articles

Previous Articles