Embedding

Embed Deckyard presentations in external websites and applications.

Overview

There are two ways to put a deck on another page:

From your running instance, with an iframe or the embed SDK. The embed loads the deck’s current content each time it is viewed, so later edits show up without new embed code.
Without an instance, with the standalone HTML export. The file is a snapshot and works on any static host.

Published dialog with expanded Advanced section showing iframe embed code and SDK integration code for each language

Static embed (no instance needed)

The embed described further down loads a presentation from a running Deckyard instance. If you just want to drop a deck onto a static site with no server, use the standalone HTML export instead.

Download → HTML produces a single self-contained .html file: inline CSS, curated/uploaded fonts as base64, local images as data-URLs, and the full viewer runtime as an inline <script>. It runs from any static host, even file:// - so embedding is just an <iframe> pointing at the local file:

<iframe
  src="/decks/my-deck.html"
  title="My deck"
  loading="lazy"
  allow="fullscreen"
  style="width:100%;aspect-ratio:16/9;border:0"
></iframe>

The viewer runtime in the export handles navigation, keyboard, fullscreen and auto-advance itself; the iframe only needs a size and focus.

Caveats

A deck is only 100% self-contained if you avoid the few things that reach back to a server or CDN:

Use uploaded images, not Unsplash/Giphy. Remote stock images stay CDN links; uploaded images are inlined as data-URLs.
Externally managed fonts stay network-linked. Adobe/Monotype/Google fonts remain remote; curated/uploaded fonts are inlined.

On this site (deckyard.eu) the pattern is packaged as a reusable DeckEmbed.astro component: drop the export in public/decks/ and write <DeckEmbed src="/decks/my-deck.html" title="My deck" />. See public/decks/README.md in the website repo.

Embedding from your instance

Publish the deck first. The Publish dialog then offers ready-made embed code for each language version of the deck, under Advanced.

Iframe

The simplest embed is a plain iframe on the deck’s embed URL:

<iframe
  src="https://your-instance.com/embed/3f9a1c2e-quarterly-review?controls=1&ui=default&start=0"
  title="Quarterly review"
  style="width:100%;aspect-ratio:16/9;border:0"
  allowfullscreen
></iframe>

3f9a1c2e is the deck’s publish id: the 8-character part of its published URL (/p/3f9a1c2e-quarterly-review). Options such as controls, start, loop and lang go in the query string.

SDK

Use the embed SDK when your page needs to control the deck or react to it, for example to go to a slide from your own buttons or to track which slide a visitor is on:

<div id="deck"></div>
<script src="https://your-instance.com/client/embed-sdk.js"></script>
<script>
  const embed = PresentationSystemEmbed.createDeckEmbed({
    el: document.getElementById('deck'),
    publishId: '3f9a1c2e',
    options: { baseUrl: 'https://your-instance.com' },
  });
  embed.on('slidechange', (e) => console.log('Slide', e.slideIndex));
</script>

Every option, method, event and the message protocol behind them are in the Embed SDK reference.

Sizing

Both the SDK and the iframe snippet fill the width of their container and keep a 16:9 height, so control the size through the container:

<div style="max-width: 800px; margin: 0 auto">
  <div id="deck"></div>
</div>

Troubleshooting

The embed shows “not found”

Check that the presentation is still published.
Check the publish id: 8 characters, taken from the published URL.
With the SDK on a page that is not served by Deckyard, set baseUrl to your instance.

Your buttons do nothing, but the embed’s own controls work

The player only accepts commands from origins in allowedOrigins, which defaults to the page’s own origin. Add every origin the page runs on, such as a staging domain.

The embed is the wrong size

Give the container a width. The height follows from the width and the aspect ratio.