JavaScript integration with embedded Google Slides presentation controls

Other Questions Google docs
1

I’m working on a website where I have a Google Slides presentation embedded using an iframe. What I really need is to use JavaScript to interact with this embedded viewer.

What I want to do:

  • Toggle the slideshow controls on and off
  • Start and pause the presentation programmatically
  • Basically control the presentation from my own custom buttons

What I’ve tried so far:
I spent hours looking for some kind of official API from Google but couldn’t find anything useful. I also tried to access the iframe content directly but ran into cross-origin issues since my domain isn’t whitelisted.

My current setup:

<iframe id="slideViewer" src="https://docs.google.com/presentation/d/e/[ID]/embed" frameborder="0"></iframe>

<button onclick="startShow()">Begin Slideshow</button>
<button onclick="pauseShow()">Pause Slideshow</button>

function startShow() {
    // This is where I'm stuck - how to communicate with the iframe?
    const viewer = document.getElementById('slideViewer');
    // Need some way to send commands to the Google Slides player
}

Has anyone managed to pull this off? Any workarounds or alternative approaches would be super helpful.

2

No workaround for this one, unfortunately. Spent weeks trying different approaches - postMessage, iframe manipulation, you name it. Google’s got their embed viewer locked down tight.

Closest I got was using URL parameters to tweak the initial behavior. You can append stuff like start=true or delayms=3000 to auto-start presentations or control timing, but that’s only on page load. No runtime JavaScript control.

For my last project that needed presentation control, I just used Reveal.js with exported slide images. Lost Google’s formatting but got full programmatic control.

If you really need Google Slides styling, try their Picker API to let users select presentations, then handle display logic yourself instead of fighting with their embed viewer.

3

totally feel your pain, man. tried to fight with google slides too, but gave up. using reveal.js is a solid move! exporting to images gives you way more control. plus, you can implement custom features without the iframe headache!

4

Had this exact problem last year building a demo platform. You can’t directly control Google Slides iframes - cross-origin policies block everything.

Better approach: skip the iframe entirely. Use Google Slides API to grab your slide data, convert it to whatever format you need, then build custom controls that actually work with JavaScript.

I built a workflow that pulls presentation updates automatically, processes everything, and feeds it to a controllable player. No iframe headaches, full JS control, plus you can add features Google doesn’t even offer.

The automation handles content sync and player management. Way cleaner than fighting Google’s embed restrictions.

Latenode makes this presentation automation pretty easy. Connect to Google Slides API, process your data, integrate with any frontend player you want.

5

Yeah, you’ve hit the same wall as tons of other developers. Google’s cross-origin restrictions are there for security, and they don’t offer any public API to control embedded presentations from outside JavaScript.

I ran into this exact problem two years ago building a corporate training platform. Tried everything, but finally gave up on controlling the Google Slides embed. Instead, I exported the presentation as images and built my own slideshow player with a lightweight JS library. Way better - I could control navigation, timing, and customize the UI however I wanted.

You could also try Google Apps Script to create a custom web app that serves your presentation. More work upfront, but you’d control both the content and player interface. Trade-off is you’ll lose Google Slides’ animations and transitions.