Embedding a Google Slides presentation into a website or blog post allows you to seamlessly integrate an interactive slideshow into your content. Getting the embed code is quick and easy. Here’s a step-by-step guide:
Publish the Presentation
The first step is to publish your Google Slides presentation to the web:
- Open the Google Slides presentation you want to embed.
- Click File > Publish to the web.
- In the publish window, click the Embed tab.
Customize the Embed Options
In the embed tab, you can customize display options:
- Slide size – choose a display size of small, medium or large
- Auto advance – enable auto advancing slides and set the interval time
- Start slideshow – start the slideshow automatically when loaded
- Loop – loop the slideshow continuously
I recommend:
- Medium size
- 5 second auto advance
- Start slideshow enabled
- Loop enabled
These settings allow your embedded slideshow to display nicely and run automatically like a slideshow should.
Copy the Embed Code
Once you have your options set, copy the entire embed code by clicking the Copy button.
The embed code will look something like this:
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vTxuojjXatC63m-vLvFG5nr9hjYX17JpOPgQeGvX6V0IrgG2hxdG2lXHqk3NzGIC/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
This is the code you’ll need to embed the slides.
Embed into Your Website
To embed the slideshow into your website or blog post:
- Switch to the text editor in your CMS (don’t use the visual editor)
- Paste the embed code into the HTML
- Save your changes and view the live page
The Google Slides presentation will now be embedded and displayed in your content!
Embedding Tips
Here are some additional tips when embedding Google Slides:
- Make sure viewers have permission to view the presentation if access settings are enabled
- Adjust iframe height/width if the default size doesn’t fit your content area
- Use CSS to make the embed responsive on mobile devices
- Link to the presentation as a fallback in case the embed doesn’t load
- Consider embedding a video instead for multimedia sites
- Test the embed across browsers and devices before publishing
Responsive Embedding
To make the Google Slides embed responsive:
- Remove height/width attributes from the iframe code
- Add this CSS:
.responsive-embed {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
overflow: hidden;
}
.responsive-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
- Wrap the iframe in a
<div>
with the.responsive-embed
class
This makes the iframe fluid width to fit any screen size.
Link to Presentation
In case the embed fails, also provide a link to the Google Slides presentation as a fallback:
<div class="responsive-embed">
<iframe src="https://..."></iframe>
</div>
[View Google Presentation](https://docs.google.com/presentation/d/)
This allows users to still access the content if needed.
More Embed Options
A few other options for embedding Google Slides content:
- Embed images only – Useful for sharing slides images/visuals
- Embed PDF export – Export as PDF and embed that document
- Embed summary slides – Share an summary of key slides
But the full interactive embed delivers the best presentation experience.
I hope this guide covers the basics of getting and using the Google Slides embed code! Let me know if you have any other questions.