3

I have embedded a google presentation inside my web-app, using iframe.

<iframe src="https://docs.google.com/presentation/..." />

And that works and is great, but I am trying to programmatically (with JavaScript) to press next (when I need to go to the next slide). I want to be able to control when next is called based on my logic.

At first I tried doing that using:

let iframe = document.querySelector("iframe")
let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// get the next button's div
iframeDoc.querySelector(".punch-viewer-navbar-next").click()

But it failed on just let iframeDoc = iframe.contentDocument || iframe.contentWindow.document; because iframe limits you from accessing the content using JS if it's from another domain (I guess that's what happens in new chrome versions)

So I proxied my site and docs.google behind some port and then did a different iframe

<iframe src="https://localhost:7777/presentation/..." />

So I don't have an issue with making the above code run - but it has no effect - I see not result.

I guess I can continue and understand why div inside iframe click doesn't work (probably security issue), but this already sounds like a too cumbersome solution for what I need.

Do you know of any API or something that google presentation offers to help you do a simple next programmatically?

user967710
  • 1,815
  • 3
  • 32
  • 58

4 Answers4

2

I haven't seen anything resembling an API, but you can append the page number at the url you request to get a specific slide, for example https://docs.google.com/presentation/.../embed#slide=9 will show the 9th slide. So you can change the iframe src using javascript.

Warning: it re-downloads the whole slideshow every time you change this, so if you can find any other way to do this, it would probably be better.

Unfortunately I don't see a way to get feedback from the iframe on which slide is currently shown, so I would suggest hiding the controls with rm=minimal (https://docs.google.com/presentation/.../embed?rm=minimal#slide=9) and placing a mask over the iframe to stop the user from changing the slide outside your control.

Edit: You can also check this: https://developers.google.com/slides

Johan Malan
  • 151
  • 1
  • 4
  • I found a div I can click and that does do the work - I was hoping for some more official api – user967710 Aug 17 '21 at 21:00
  • I have similar requirement, in which i want to control slide presentation from my custom app. Could you please share the details of the div you found using which you are able to change the slide remotely. Thanks! – Akash Ingle Jun 08 '22 at 07:51
1

if the next button is inside the presentation you can set a condition inside the setOnClickAction see the docs below it has wide range of methods and events just like js google AppScript

Boudy hesham
  • 332
  • 1
  • 2
  • 12
  • That looks awesome. Never heard of AppScript. Do users need to be aware of that? – user967710 Aug 19 '21 at 11:09
  • @user967710 no only the dev you're the one who is going to set the action, or whoever the developer, you said on certain condition so you can check a certain cell value and then redirect to a certain slide in the same presentation, even you can open other sheets, from inside of the file. – Boudy hesham Aug 20 '21 at 01:25
  • I checked it out. AppScript can help me do extra things when I click a button, it can't help me programmatically simulate the click. I need to trigger 'next' click without the user's interaction – user967710 Aug 21 '21 at 06:06
1

You can check the official REST API Google Presentations offer you in: https://developers.google.com/slides/api/reference/rest

The downside of it is the need to make authenticated requests

Miguel Trabajo
  • 437
  • 3
  • 11
  • Thx, but this seems more about a "backend" updating or retrieving data about a slide, and less useful for presenting an instance of a slide. I will explain - every REST API I saw in the list is about "the slide", but I need something that is actually different for every user interacting with it using my FE. Eitherway, couldn't find a relevant API there. Thx though. – user967710 Aug 24 '21 at 09:02
0

Ok. I found an alternative solution - I am now using RevealJS. I can use their https://www.slides.com to create slides using a UI, then I download it as HTML and embed in my website.

It does require a $14 monthly subscription for their "PRO" but I ended up paying, just to be able to create slideshows that I can control when the next slide is used.

user967710
  • 1,815
  • 3
  • 32
  • 58