How to Add Interactive HTML to PowerPoint and Excel

Add a ready-to-use HTML sample to your slide or worksheet with HTML Viewer 365. Copy the sample below, then use the resizing fixes if your content leaves empty space or overlaps.

Get HTML Viewer and insert the sample

Install HTML Viewer 365 from AppSource and place the add-in on your slide or worksheet.
Copy the full sample below and paste it into the add-in's HTML editor.
Choose Save to display the sample.
Save your presentation or workbook to keep the HTML with your document.

Ready-to-use HTML sample

The sample shows launch progress. Select Plan or Risks to expand the details. All styling is included; the sample needs no external libraries or images.

The HTML sample with launch progress and the Plan and Risks sections expanded

Click inside the code box, select all with Ctrl+A (Windows) or Command+A (Mac), then copy.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Launch Status</title>
    <style>
      * { box-sizing: border-box; }

      body {
        margin: 0;
        min-height: 100vh;
        padding: clamp(12px, 4vmin, 40px);
        background: #0f172a;
        color: #e2e8f0;
        font: clamp(16px, 3vmin, 28px)/1.5 Arial, sans-serif;
      }

      main { width: 100%; }
      h1 { margin: 0; font-size: clamp(24px, 7vmin, 64px); }
      p { margin: 12px 0; }
      progress { width: 100%; accent-color: #22d3ee; }

      details {
        margin-top: 16px;
        padding: 12px 16px;
        border: 1px solid #475569;
        border-radius: 8px;
      }

      summary { cursor: pointer; font-weight: bold; }
      ul { margin: 12px 0 0; padding-left: 24px; }
    </style>
  </head>
  <body>
    <main>
      <h1>Portal refresh</h1>
      <p>On track — 82% ready for review</p>
      <progress value="82" max="100" aria-label="Launch readiness">82%</progress>
      <details>
        <summary>Plan</summary>
        <ul>
          <li>Finish support handoff</li>
          <li>Publish release notes</li>
          <li>Confirm the launch date</li>
        </ul>
      </details>
      <details>
        <summary>Risks</summary>
        <p>Copy review and final testing remain open.</p>
      </details>
    </main>
  </body>
</html>

Common resizing problems and fixes

HTML Viewer resizes the frame, but your HTML controls the layout inside it. Check the content at the size you plan to use, including any expanded details.

The HTML sample leaves empty space

Fixed-width content stays small when you enlarge the add-in. Remove the fixed width and let the layout fill the frame:

body { margin: 0; min-height: 100vh; }
main { width: 100%; }

A fixed-size HTML sample leaving unused space around its content

Text overlaps or gets cut off

Large, fixed text sizes can crowd a smaller frame. Use clamp() to scale text within readable limits. The vmin unit follows the frame's smaller dimension:

body { font-size: clamp(16px, 3vmin, 28px); }
h1 { font-size: clamp(24px, 7vmin, 64px); }

If the content still does not fit, enlarge the add-in or shorten the text. Avoid overflow: hidden on the page: scrolling keeps overflowing content reachable.

Fixed-size HTML text overlapping nearby content in a smaller frame

Need help?

If your HTML does not display as expected, message support and we'll get back to you shortly.