Embedding Presentations

Embed Cuppa Studio presentations in any web page.

HTML Export

The simplest way to share a presentation is as a standalone HTML file. Everything is bundled into a single file — no server needed:

mycuppa export slides.cup --out talk.html

The exported HTML can be:

• Hosted on any static file server (GitHub Pages, Vercel, Netlify)
• Sent as an email attachment
• Opened directly from the filesystem

iframe Embedding

Embed an exported HTML presentation in any page using an iframe:

<iframe
  src="https://example.com/my-talk.html"
  width="800"
  height="450"
  style="border: none; border-radius: 8px;"
  title="My Presentation"
></iframe>

Web Component

The <cuppa-cue> web component provides a drop-in embed for any website. Install from npm:

npm install @cuppa-studio/embed

Then use it in your HTML:

<script type="module">
  import "@cuppa-studio/embed";
</script>

<cuppa-cue src="https://example.com/talk/" autoplay></cuppa-cue>

Supported attributes:

Attribute	Description
src	URL to a .cup directory (containing manifest.json)
autoplay	Auto-play on load

The component uses Shadow DOM and renders at 16:9 aspect ratio by default.

JavaScript API

The web component exposes methods for programmatic control:

const el = document.querySelector("cuppa-cue");

// Navigation
el.goToScene(0);         // Go to first slide
el.play();               // Start autoplay
el.pause();              // Pause autoplay
el.getPlayer();          // Access the underlying CuePlayer

// Events
el.addEventListener("load", () => {
  console.log("Presentation loaded");
});
el.addEventListener("error", (e) => {
  console.error("Load failed:", e.detail);
});

Player JavaScript API

When embedding via iframe or the web component, the player exposes a JavaScript API on window.cuePlayer:

const player = window.cuePlayer;

// Navigation
player.goToScene(0);      // Go to first slide
player.nextScene();       // Next slide
player.prevScene();       // Previous slide

// Playback
player.play();            // Start autoplay
player.pause();           // Pause autoplay

// Events
player.on('scenechange', (data) => {
  console.log('Scene ' + data.index);
});

player.on('load', () => {
  console.log('Presentation loaded');
});

player.on('end', () => {
  console.log('Last slide reached');
});