> 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 Elementor

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


## Overview

Custom iFrame lets you embed Google Slides in Elementor by pasting a published presentation URL into the widget. 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 Gutenberg instead? Follow the [Embed Google Slides in Gutenberg](/gutenberg/documents/embed-google-slides) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A Google Slides presentation published to the web

## Video Tutorial

<iframe
  src="https://www.youtube.com/embed/V1AvOcD2dC8"
  width="720"
  height="405"
  frameBorder="0"
  allowFullScreen
/>

## 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 Custom iFrame.
  </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: Add the Custom iFrame Widget

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the presentation. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867149/getting-started/elementor-setup/Guide-Add-Custom-iFrame.webp"
      alt="Custom iFrame widget being dragged from the Elementor panel into a page section in the editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 3: Embed Google Slides in Elementor

<Steps>
  <Step title="Paste the Google Slides URL" icon="clipboard" title-type="p">
    In the Content tab, paste the `/pubhtml` URL into the **Source URL** field. The presentation appears in the editor.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776912781/elementor/documents/google-slides/embed-google-slide-link.webp"
      alt="Custom iFrame widget in Elementor editor showing Google Slides URL in Source URL field with live Google Slides presentation preview"
      width="1024"
      height="466" priority={true} fetchPriority="high" />
  </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: Customize and Configure Settings

For styling, smart loading, and advanced options, see the [Style Custom iFrame](/getting-started/styling) guide. Adjust dimensions, backgrounds, borders, and more.

## Step 5: Save and Publish

<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 fine-tune widget behavior? See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) guide for all widget options.

This guide showed you how to embed Google Slides in Elementor using the Custom iFrame plugin. From publishing the presentation to pasting the URL and updating the page, the whole setup runs through the Elementor 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 a 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 Gutenberg" href="/gutenberg/documents/embed-google-slides" icon="layout" horizontal={false}>
    Guide for the WordPress block editor.
  </Card>
  <Card title="Embed Google Docs in Elementor" href="/elementor/documents/embed-google-docs" icon="file-text" horizontal={false}>
    Embed Google Docs in Elementor.
  </Card>
</Columns>

## Related Guides

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