Removing bottom toolbar in iframe

💬 App Building
1

I'm trying to embed something I created in Canva to MailerLite to create some beautiful emails.

I've almost got there, but I'm having a slight problem with the bottom toolbar of iframe as it has an overlay with the "zoom" and "more" buttons. I would like to remove this overlay/toolbar so that the email is seamless between the embedded code and the rest of the MailerLite email.

I've tried so many different variations that I don't think I can list them here (easily about 30+ different attempts), and nothing has seemed to work.

Here's the code I'm using:

<div style="position: relative; width: 100%; height: 0; padding-top: 428.5714%;
 padding-bottom: 0; margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;">
  <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
    src="https://www.canva.com/design/DAGjOOfudRc/55wEr0-tSF10s-kKrd_P9A/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe>
</div>

I've added a screenshot of the part I would like to remove - the grey overlay at the bottom.

image
image936×422 17.6 KB

2

Hi @fdehav,

Thanks for reaching out!

The overlay is coming from the Canva styles, so it might be worth reaching out to their support team. I did some testing on my side, but unfortunately, I haven't been able to track down a Canva setting for this :disappointed:

Is there another way you could use the file - maybe as a static PDF?