> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Embed Google Slides in Gutenberg

Step-by-step guide to embed Google Slides in Gutenberg using the Custom iFrame WordPress plugin. No API key needed. No coding required.


## Overview

Custom iFrame lets you embed Google Slides in Gutenberg by pasting a published presentation URL into the block. Display presentations, portfolios, and reports directly on your WordPress page without an API key.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Elementor instead? Follow the [Embed Google Slides in Elementor](/elementor/documents/embed-google-slides) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A Google Slides presentation published to the web

## Step 1: Get the Google Slides Link

<Steps>
  <Step title="Open your Google Slides presentation" icon="file-text" title-type="p">
    Open the presentation you want to embed in Google Drive.
  </Step>
  <Step title="Publish the presentation to the web" icon="globe" title-type="p">
    Go to **File > Share > Publish to web**. Click **Publish**, then confirm by clicking **OK**.
  </Step>
  <Step title="Copy the published link" icon="link" title-type="p">
    Copy the generated link. The URL ends in `/pubhtml`. This is the URL you will paste into the Custom iFrame block.
  </Step>
</Steps>

<Callout kind="alert">
  Paste the `/pubhtml` link into a browser where you are not logged into Google. If the presentation does not load, it was not published correctly. Repeat the publish step.
</Callout>

## Step 2: Install the Plugin and Add the Block

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="Custom iFrame for Elementor WordPress plugin by Coderz Studio showing 3000+ active installations on the plugin repository page"
      width="818"
      height="363" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the presentation. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

## Step 3: Embed Google Slides in Gutenberg

<Steps>
  <Step title="Paste the Google Slides URL" icon="clipboard" title-type="p">
    Select the Custom iFrame block. In the **Source** field in the right panel, paste the `/pubhtml` URL you copied. The presentation appears inside the block in the editor.
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to match your slide dimensions. A 16:9 presentation at 800px wide needs about 450px height.
  </Step>
</Steps>

## Step 4: Adjust Settings and Publish

**Scroll Bar:** Disable scrollbars for a cleaner presentation display.

**Refresh Interval:** Set how often the iframe refreshes. Useful if the presentation updates frequently.

**Smart Load:** Turn on lazy loading so the iframe loads only when it enters the viewport.

<Callout kind="success">
  Click **Update** or **Publish**. Your Google Slides presentation is now live on your WordPress site.
</Callout>

Want to add a custom watermark (Pro), device frame (Pro), or full screen button? See the [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup) guide for all block options.

This guide showed you how to embed Google Slides in Gutenberg using the Custom iFrame plugin. From publishing the presentation to pasting the URL and updating the page, the whole setup runs through the block editor without any code.

## FAQ

<ExpandableGroup>
  <Expandable title="Do I need a Google account to embed Google Slides?" default-open="false">
    No. Once published to the web, the presentation is publicly accessible. You do not need an account or API key.
  </Expandable>
  <Expandable title="The presentation shows blank. What should I check?" default-open="false">
    Confirm the URL ends in `/pubhtml`. Test it in a browser where you are not logged into Google. If it does not load, republish from **File > Share > Publish to web**.
  </Expandable>
  <Expandable title="Will the embedded slides update when I edit the presentation?" default-open="false">
    Yes. Published Google Slides reflect edits automatically. Updates appear in the embedded version after a short delay.
  </Expandable>
  <Expandable title="What aspect ratio should I use for Google Slides?" default-open="false">
    Standard Google Slides use a 16:9 ratio. For an 800px wide embed, set height to 450px. For 1024px wide, set height to 576px.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Google Slides in Elementor" href="/elementor/documents/embed-google-slides" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Google Sheets in Gutenberg" href="/gutenberg/documents/embed-google-sheets" icon="table" horizontal={false}>
    Embed Google Sheets in the block editor.
  </Card>
</Columns>

## Related Guides

- [Embed Documents in Gutenberg - Overview](/gutenberg/embed-documents)
- [Embed Google Docs in Gutenberg](/gutenberg/documents/embed-google-docs)
- [Embed Google Sheets in Gutenberg](/gutenberg/documents/embed-google-sheets)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)