How to Get the Embed Code for a Google Slides File

Google Slides / By /

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:

  1. Open the Google Slides presentation you want to embed.
  2. Click File > Publish to the web.
  3. 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:

  1. Switch to the text editor in your CMS (don’t use the visual editor)
  2. Paste the embed code into the HTML
  3. 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:

  1. Remove height/width attributes from the iframe code
  2. 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%;
}
  1. 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.

Related Posts