Hide navigation in embedded google slides

[lnorris1]

I have created an interactive google slide show for a professional learning course for our teachers and have embedded it on a page in Canvas. The idea is to "lead your own learning" by clicking on parts of the slide that will advance you to a particular point in the slideshow to learn more. I do not want users to navigate the slideshow on their own, but instead by following the prompts on the slides. I have tried different coding in the html but cannot seem to get it right. I did end up hiding the navigation controls at one point, but the slideshow ended up too small. Here is the hyperlink to the google slideshow: Student-Centered Learning - Google Slides Here is the embed code: <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vS5fbVqoYFuZTaE5TKcDyL5Se8vVNNHZPtE5vu6LyJhM1NKs7dbj..." frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

I'm not sure which one you may need. Any help would be greatly appreciated! Thank you! Laurie

[jschaffer · Accepted solution]

 @lnorris1 ‌,

Much like the others here, I am not expert on HTML, however, I know when I embed Google Sheets, the following works for me:

<iframe src="SOME SHAREABLE SPREADSHEET LINK;rm=minimal" width="SOMETHING" height="SOMETHING"></iframe></p>

The operative piece is the "rm=minimal".  This will hide the menu on the sheet and only show the cells/contents.  Maybe you can work with this and see if you get the results you need.  Good luck. 

[AE2 · Accepted solution]

This was very helpful and worked great! I had to modify the width and height a littleafter adding this code. But that's OK because now my slide does not have the Google Slides task bar at the bottom and students can use the interactive links embedded in the slide. Thanks! 

[ericwerth]

Hi  @lnorris1 .  I know very little about HTML, but a while back was trying to do something similar and found a segment of code that seemed to work.  I included your Google Slides link, and ended up with the snippet below.  What I noticed in my own sandbox course is that the navigation bar isn't visible and you can navigate using the screen links, but the back or forward buttons appear cut off a bit.  I played around with the dimensions but couldn't figure out how to keep the navigation bar hidden but show the complete buttons.  Maybe you can, or perhaps in the slide presentation itself it would be possible to move those navigation buttons up.

I'm not sure if this helps much but I thought I would pass it along in hopes it gets you closer to what you are looking to accomplish!

<div style="margin: 0 auto; width: 99%; height: 525px; overflow: hidden;"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vS5fbVqoYFuZTaE5TKcDyL5Se8vVNNHZPtE5vu6LyJhM1NKs7dbj..." width="960" height="569"></iframe></div>

[lnorris1]

Thanks, Eric. I appreciate your help. This didn't work for me. The navigation bar still appears at the bottom when I tried it. I'll keep tweaking the code and see if I can get it right. I would love for this to be an option that Google supports - there may be many instances when you don't want the user to navigate the slide show on their own. Thanks again!

[ericwerth]

That's a bummer  @lnorris1 .  Below is what I see on my page, so that is strange.  I'm sure that there is  a good reason for this.  Maybe someone will have a great thought that helps us both.

If you figure something out, please let me know!

[rswengel]

I have tried this as well. It changes nothing in the display. If I move the rm=minimal to another logical location, the slides don't show at all.

[jschaffer · Accepted solution]

 @lnorris1 ‌,

Much like the others here, I am not expert on HTML, however, I know when I embed Google Sheets, the following works for me:

<iframe src="SOME SHAREABLE SPREADSHEET LINK;rm=minimal" width="SOMETHING" height="SOMETHING"></iframe></p>

The operative piece is the "rm=minimal".  This will hide the menu on the sheet and only show the cells/contents.  Maybe you can work with this and see if you get the results you need.  Good luck. 

[lnorris1]

Beautiful!! This worked perfectly. I can see the opportunities begin to soar for interactive learning! Thank you Jason!

[samsustenable]

Hi Eric; 

I came a-searching for an answer to this very problem. Your suggestion was the first one I hit upon and it worked like a dream! I had to wiggle a little with the height px number, but otherwise it was spot-on. Thanks so much! I was a little crushed when I embedded my slideshow only to see that the navigation buttons I'd so painstakingly put into my slideshow were going to be easily ignored because the Google Slide nav bar was there but thanks to your help I'm #winning again!

Cheers!

[ericwerth]

Excellent samsustenable!  I'm glad that it worked for you!  I wish there was a toggle switch in Slides that you could use to automatically remove their navigation bar, but until then at least there are work-arounds.  I hope the class goes well!

[AE2]

After reading your solution to try to remove the taskbar for my interactive Google slide at the bottom by inserting rm=minimal in my code that I am embedding, my page that I have this in comes up with a Google error message. Here is my code:

<p><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQZ66-yHAubeR3TNjbL717VjevMgrO7bjBeK8IBGsKs1kJwDexI6..." width="960" height="569" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"></iframe></p>

I placed the rm=minimal after the 3000 and before the ". Is this rm=minimal needing to be placed somewhere else in this coding?

AE2

[bschopf]

Hi!.

Delete the delayms=3000 after the semicolon and replace it with rm=minimal. This removed the controls at the barn and worked for me!

[AE2 · Accepted solution]

This was very helpful and worked great! I had to modify the width and height a littleafter adding this code. But that's OK because now my slide does not have the Google Slides task bar at the bottom and students can use the interactive links embedded in the slide. Thanks! 

[KSchneiderQuest · Accepted solution]

Add this to your code after selecting the < > at bottom of edit screen: &amp;rm=minimal

Example:

<p><iframe src="https://docs.google.com/presentation/d/e/0k9XJnj-EQrXhu5ejZegU2nN_5gy-G5nDfkfgnlI7SDAEtJnKiubc LiWao2DU8xKnR0kUs91/embed?start=false&amp;loop=false&amp;delayms=3000&amp;rm=minimal" width="960" height="569" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"></iframe></p>

[Jen_Charles]

Good morning! I have a potentially silly question here. I tried this, and yes, the navigation bar is removed from the embed. But it seems to me that they can still click through the presentation in order by simply clicking on the slide? That it won't stop them from doing that, only nudge them without the visible tool bar?

[chrisream]

I learned from a blogger, that you have to cover your slide with boxes that link to the same slide you are putting those boxes onto. Seems a bit hacky, but it works.

[KGrant1917]

With the update to the text editor that allows direct embedding from Google Drive, it seems like the solution no longer works the same because the html code looks different, I think?  My code looks like:

<p><iframe style="width: 750px; height: 750px;" title="Test Presentation for Embeding" src="https://docs.google.com/presentation/d/1HzNwrvyaUYi8ZKi8csK1SOTSKC07ePBeENOt-MPLXek/preview" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *; autoplay *"></iframe></p>

inserting rm=minimal doesn't seem to work, unless I'm doing something wrong?  Any help appreciated!

[MicheleHerod]

I think that KGrant1917 is correct - with the integration of Google Drive into Canvas, the minimal coding no longer appears to work. I tried with both publishing to the web and embedding the slide coding, and also with embedding from the Google Drive LTI.  If anyone has a new coding that does work, please share!

[Rachel261]

I found this to work: replace everything from edit on with preview?rm=minimal