Embedding a google presentation inside html + clicking next slide from JS

Question

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?

Potentially related to [this question](https://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript) for iframe cross-origin issues. — Dane Brouwer, Aug 17 '21 at 09:46
I already took care of cross-origin issue with the proxy, so it's irrelevant — user967710, Aug 17 '21 at 21:00
the next button is inside the slide or is it inside your website ? — Boudy hesham, Aug 19 '21 at 00:49

Johan Malan · Answer 1 · 2021-08-17T10:24:39.400

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

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

Boudy hesham · Answer 2 · 2021-08-20T01:23:32.233

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

edited Aug 20 '21 at 01:23

answered Aug 19 '21 at 00:51

Boudy hesham

195
1
1
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

score 1 · Answer 3 · answered Aug 23 '21 at 15:07

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

answered Aug 23 '21 at 15:07

Miguel Trabajo

397
2
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

score 0 · Accepted Answer · answered Sep 02 '21 at 19:44

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.

Embedding a google presentation inside html + clicking next slide from JS

4 Answers4