Embed Live Websites in PowerPoint with a Custom Add-in

🌐

Live Websites

Display any website directly inside your slides

🎯

Per-Slide URLs

Each slide remembers its own website URL

🎨

Clean UI

Hide controls during presentations for a seamless look

⚡

Easy Setup

Just two files: viewer.html + manifest.xml

1 Host the Viewer Page

Create viewer.html on your server (e.g. https://powerpointwebviewer.peopleworksservices.com/viewer.html). This is the page that PowerPoint will load inside the slide:

Key features of the viewer:

Auto-adds https:// if you forget the protocol
Shows a loading spinner while the page loads
Friendly error messages if a site can't be embedded
Hide/show controls button for presentation mode
Press Enter to load (no need to click the button)
Saves the URL per slide using Office Settings API

<!DOCTYPE html>
<html>
<head>
  <title>Website Viewer</title>
  <meta charset="UTF-8">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { width: 100%; height: 100vh; font-family: 'Segoe UI', sans-serif;
           overflow: hidden; background: #f0f2f5; }

    #config {
      position: absolute; top: 12px; left: 12px; right: 12px; z-index: 100;
      background: rgba(255,255,255,0.97); border-radius: 12px;
      padding: 10px 14px; display: flex; align-items: center; gap: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.12);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    #config.hidden { opacity: 0; transform: translateY(-20px); pointer-events: none; }

    #urlInput {
      flex: 1; padding: 8px 12px; border: 2px solid #e0e0e0;
      border-radius: 8px; font-size: 14px; outline: none;
    }
    #urlInput:focus { border-color: #4a90d9; }

    .btn {
      padding: 8px 16px; border: none; border-radius: 8px;
      font-size: 13px; font-weight: 600; cursor: pointer;
    }
    .btn-primary { background: #4a90d9; color: white; }
    .btn-hide { background: #e8e8e8; color: #555; }

    #toggleBtn {
      position: absolute; top: 8px; right: 8px; z-index: 101;
      width: 36px; height: 36px; border-radius: 50%; border: none;
      background: rgba(255,255,255,0.9); cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      display: none; align-items: center; justify-content: center;
    }
    #toggleBtn.visible { display: flex; }

    #webFrame { width: 100%; height: 100%; border: none; }

    #overlay {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; background: #f0f2f5; z-index: 50;
      text-align: center; padding: 2em;
    }
    #overlay.hidden { display: none; }
  </style>
  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
</head>
<body>
  <div id="config">
    <span>🌐</span>
    <input id="urlInput" type="text" placeholder="Enter website URL" />
    <button class="btn btn-primary" onclick="loadUrl()">Load</button>
    <button class="btn btn-hide" onclick="toggleControls()">✕</button>
  </div>
  <button id="toggleBtn" onclick="toggleControls()">⚙</button>
  <div id="overlay">
    <h2>Live Website Viewer</h2>
    <p>Enter a URL above and click Load</p>
  </div>
  <iframe id="webFrame" src=""
    sandbox="allow-scripts allow-same-origin allow-forms allow-popups">
  </iframe>

  <script>
    const urlInput = document.getElementById('urlInput');
    const webFrame = document.getElementById('webFrame');
    const overlay  = document.getElementById('overlay');
    let controlsVisible = true;

    function normalizeUrl(url) {
      url = url.trim();
      if (!url) return '';
      if (!/^https?:\/\//i.test(url)) url = 'https://' + url;
      return url;
    }

    function loadUrl() {
      let url = normalizeUrl(urlInput.value);
      if (!url) return;
      urlInput.value = url;
      overlay.classList.add('hidden');
      webFrame.src = url;
      try {
        Office.context.document.settings.set('webViewerUrl', url);
        Office.context.document.settings.saveAsync();
      } catch(e) { console.log('Office API not available:', e); }
    }

    function toggleControls() {
      controlsVisible = !controlsVisible;
      document.getElementById('config').classList.toggle('hidden');
      document.getElementById('toggleBtn').classList.toggle('visible');
    }

    urlInput.addEventListener('keydown', e => { if (e.key === 'Enter') loadUrl(); });

    Office.onReady(() => {
      try {
        const saved = Office.context.document.settings.get('webViewerUrl');
        if (saved) { urlInput.value = saved; webFrame.src = saved;
                     overlay.classList.add('hidden'); }
      } catch(e) {}
    });
  </script>
</body>
</html>

2 Create the Manifest

Save the following XML as manifest.xml. This tells PowerPoint where to find your add-in:

<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:type="ContentApp">

  <Id>e2b7c1a0-1234-5678-9abc-def012345678</Id>
  <Version>1.1.0.0</Version>
  <ProviderName>PeopleWorks Services</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>

  <DisplayName DefaultValue="Live Website Viewer"/>
  <Description DefaultValue="Embed and display live websites directly inside PowerPoint slides."/>

  <IconUrl DefaultValue="https://powerpointwebviewer.peopleworksservices.com/icon.png"/>
  <SupportUrl DefaultValue="https://powerpointwebviewer.peopleworksservices.com/support"/>

  <Hosts>
    <Host Name="Presentation"/>
  </Hosts>

  <DefaultSettings>
    <SourceLocation DefaultValue="https://powerpointwebviewer.peopleworksservices.com/viewer.html"/>
  </DefaultSettings>

  <Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

3 Install & Use

Option A: PowerPoint Online

Go to PowerPoint Online and open a presentation
Go to Insert → Add-ins → Upload My Add-in
Select your manifest.xml file
Insert the add-in into any slide
Type a URL and press Enter or click Load

Note for PowerPoint Online users: The browser enforces strict security rules. Many websites (Google, YouTube, Facebook, etc.) block being embedded inside frames. If a website does not display:

Click the "Window" button in the toolbar to open the site in a separate browser window using Office's Dialog API
If the iframe times out, you'll see an "Open in Window" button automatically
Sites that work well in frames: custom dashboards, internal tools, documentation sites, and sites without X-Frame-Options headers

Option B: PowerPoint Desktop (Windows) — Recommended

Important: PowerPoint Desktop does not have an "Upload" button. You need to set up a shared folder catalog first.

Step 1: Create a shared folder

Create a folder on your PC, e.g. C:\AddinManifests
Copy manifest.xml into that folder
Right-click the folder → Properties → Sharing tab → Share...
Add your user (or "Everyone") with Read permission
Note the network path (e.g. \\YOUR-PC\AddinManifests)

Step 2: Register in PowerPoint

Open PowerPoint → File → Options
Click Trust Center → Trust Center Settings...
Click Trusted Add-in Catalogs
In Catalog URL, paste the network path: \\YOUR-PC\AddinManifests
Click Add catalog, then check Show in Menu
Click OK → OK
Close and reopen PowerPoint (required!)

Step 3: Load the add-in

Go to Home → Add-ins (in the ribbon)
Click Advanced (at the bottom of the panel)
Select SHARED FOLDER at the top
Select "Live Website Viewer" and click Add

Using the add-in:

Type a URL and press Enter or click Load
Click ✕ to hide controls during your presentation
Click the ⚙ button to bring controls back
Each slide can have its own URL
In PowerPoint Online, use the "Window" button if a site doesn't load in the frame

Troubleshooting

Website shows blank or doesn't load (PowerPoint Online):

Many websites block iframe embedding for security. This is a browser limitation, not a bug.
Use the "Window" button to open the site via Office's Dialog API instead.
The add-in auto-detects PowerPoint Online and shows a yellow badge + extra tips.

Add-in icon disappears (Desktop):

Sideloaded add-ins (via shared folder) don't pin to the ribbon permanently. You need to insert the add-in on each slide where you want it.
Once inserted into a slide, the add-in is saved with the presentation file — it will appear when you reopen that file.
For permanent ribbon access, the add-in would need to be published to Microsoft AppSource (centralized deployment).

Can't resize or select the add-in after making it bigger (Online):

This is a known PowerPoint Online limitation with Content Add-ins, not a bug in our add-in.
Workaround: Click outside the add-in first, then click the border/edge of the add-in frame to select it (not the content inside). You should see resize handles appear.
If that doesn't work, use Ctrl+Z (undo) to revert the resize, or delete the add-in and re-insert it.

Sites that typically work in frames:

Wikipedia, custom dashboards, Grafana, internal tools, documentation sites
Sites that do NOT work: Google, YouTube, Facebook, Twitter/X, most banking sites

Share the manifest with your colleagues or community — they'll be able to use the same add-in instantly!

🌐

Sitios Web en Vivo

Muestra cualquier sitio web directamente en tus diapositivas

🎯

URL por Diapositiva

Cada diapositiva recuerda su propia URL

🎨

UI Limpio

Oculta los controles durante la presentación

⚡

Fácil de Instalar

Solo dos archivos: viewer.html + manifest.xml

1 Hospeda la página Viewer

Crea el archivo viewer.html en tu servidor (por ejemplo https://powerpointwebviewer.peopleworksservices.com/viewer.html). Esta es la página que PowerPoint cargará dentro de la diapositiva.

Características del viewer mejorado:

Agrega https:// automáticamente si olvidas el protocolo
Muestra un spinner de carga mientras la página carga
Mensajes de error amigables si un sitio no puede incrustarse
Botón para ocultar/mostrar controles en modo presentación
Presiona Enter para cargar (no necesitas hacer clic)
Guarda la URL por diapositiva usando Office Settings API

El código completo del viewer está en la sección en inglés arriba. Puedes copiarlo directamente.

2 Crea el Manifiesto

Guarda el siguiente XML como manifest.xml. Este archivo le dice a PowerPoint dónde encontrar tu complemento:

El código del manifiesto es el mismo mostrado en la sección en inglés.

3 Instala y Usa

Opción A: PowerPoint Online

Ve a PowerPoint Online y abre una presentación
Ve a Insertar → Complementos → Cargar mi complemento
Selecciona tu archivo manifest.xml
Inserta el complemento en cualquier diapositiva
Escribe una URL y presiona Enter o haz clic en Load

Nota para usuarios de PowerPoint Online: El navegador aplica reglas de seguridad estrictas. Muchos sitios web (Google, YouTube, Facebook, etc.) bloquean ser incrustados dentro de frames. Si un sitio no se muestra:

Haz clic en el botón "Window" en la barra de herramientas para abrir el sitio en una ventana separada usando la API de Diálogos de Office
Si el iframe expira, verás un botón "Open in Window" automáticamente
Sitios que funcionan bien en frames: dashboards personalizados, herramientas internas, sitios de documentación y sitios sin cabeceras X-Frame-Options

Opción B: PowerPoint Desktop (Windows) — Recomendado

Importante: PowerPoint Desktop no tiene botón de "Cargar complemento". Necesitas configurar una carpeta compartida primero.

Paso 1: Crear una carpeta compartida

Crea una carpeta en tu PC, por ejemplo C:\AddinManifests
Copia manifest.xml en esa carpeta
Click derecho en la carpeta → Propiedades → pestaña Compartir → Compartir...
Agrega tu usuario (o "Everyone") con permiso de Lectura
Anota la ruta de red (ej. \\TU-PC\AddinManifests)

Paso 2: Registrar en PowerPoint

Abre PowerPoint → Archivo → Opciones
Click en Centro de confianza → Configuración del Centro de confianza...
Click en Catálogos de complementos de confianza
En URL del catálogo, pega la ruta: \\TU-PC\AddinManifests
Click en Agregar catálogo, luego marca Mostrar en el menú
Click en Aceptar → Aceptar
Cierra y vuelve a abrir PowerPoint (¡obligatorio!)

Paso 3: Cargar el complemento

Ve a Inicio → Complementos (en la cinta)
Click en Avanzado (en la parte inferior del panel)
Selecciona CARPETA COMPARTIDA en la parte superior
Selecciona "Live Website Viewer" y haz click en Agregar

Usando el complemento:

Escribe una URL y presiona Enter o haz clic en Load
Haz clic en ✕ para ocultar los controles durante tu presentación
Haz clic en el botón ⚙ para mostrar los controles de nuevo
Cada diapositiva puede tener su propia URL
En PowerPoint Online, usa el botón "Window" si un sitio no carga en el frame

Solución de Problemas

El sitio web se ve en blanco o no carga (PowerPoint Online):

Muchos sitios web bloquean la incrustación en iframes por seguridad. Esto es una limitación del navegador, no un error del complemento.
Usa el botón "Window" para abrir el sitio mediante la API de Diálogos de Office.
El complemento detecta automáticamente PowerPoint Online y muestra consejos adicionales.

El icono del complemento desaparece (Desktop):

Los complementos cargados por carpeta compartida (sideloaded) no se fijan permanentemente en la cinta. Necesitas insertar el complemento en cada diapositiva donde lo quieras usar.
Una vez insertado en una diapositiva, el complemento se guarda con el archivo de presentación — aparecerá cuando vuelvas a abrir ese archivo.
Para acceso permanente en la cinta, el complemento necesitaría publicarse en Microsoft AppSource (despliegue centralizado).

No puedo redimensionar o seleccionar el complemento después de agrandarlo (Online):

Esto es una limitación conocida de PowerPoint Online con Content Add-ins, no es un error de nuestro complemento.
Solución: Haz clic fuera del complemento primero, luego haz clic en el borde/marco del complemento (no en el contenido). Deberían aparecer los controles de redimensionar.
Si no funciona, usa Ctrl+Z (deshacer) para revertir el cambio de tamaño, o elimina el complemento y vuelve a insertarlo.

Sitios que típicamente funcionan en frames:

Wikipedia, dashboards personalizados, Grafana, herramientas internas, sitios de documentación
Sitios que NO funcionan: Google, YouTube, Facebook, Twitter/X, la mayoría de sitios bancarios

Comparte el manifiesto con tus colegas o la comunidad — podrán usar el mismo complemento al instante.

Live Website Viewer for PowerPoint