How can I make an embedded Google presentation clickable in Webflow?

Published on
September 22, 2023

To make an embedded Google presentation clickable in Webflow, you can follow these steps:

  1. Obtain the embed code for your Google presentation:
  • First, go to your Google Drive and open the presentation you want to embed.
  • Click on the "File" tab in the top-left corner.
  • From the drop-down menu, select "Publish to the web".
  • In the dialog box, click on the "Embed" tab.
  • Customize the settings according to your needs (autoplay, slide size, start slide, etc.).
  • Copy the generated embed code.
  1. Create a new web page or open an existing page in the Webflow Designer.

  2. Drag and drop an Embed element onto the page where you want to display the Google presentation. You can find the Embed element under the "Components" tab in the left panel.

  3. Double click on the Embed element to open the embed code settings.

  4. Paste the Google presentation embed code into the embed code field and click "Save".

  5. By default, the embedded Google presentation might not be clickable. To make it clickable, you have two options:

  • Option 1: Add a clickable hyperlink manually

    • After you have added the embed code, add a text element or a button element beneath the embedded Google presentation.
    • Highlight the text or button and click on the link icon in the toolbar.
    • In the Link settings, enter the URL of the Google presentation or any other desired URL you want the embedded presentation to link to.
    • Save your changes and preview the page to see the embedded Google presentation with a clickable hyperlink.
  • Option 2: Use custom code to make the embedded Google presentation clickable

    • After adding the embed code, click on the "Settings" tab in the right panel.
    • Scroll down to the "Custom code" section and click on the "Footer code" field.
    • In the footer code, you can use JavaScript/jquery to target the embedded presentation and assign a hyperlink to it.
    • For example, you can use a script like this:
<script>  $(document).ready(function(){    $("iframe").wrap("<a href='https://example.com'></a>");  });</script>
- Replace "https://example.com" with the desired link you want the embedded presentation to go to.- Save the changes and preview the page to see the embedded Google presentation as a clickable hyperlink.

Remember to publish your changes for the clickable embedded Google presentation to be visible on your live Webflow site.