Hiding an element from an HTML embed

Design help Custom code
1

Hello,

I’m working on a site that uses an HTML embed item to load an iframe from Coda.io. When it loads, it has some Coda badges showing that I want to hide

Screenshot 2023-05-27 at 10.21.07
Screenshot 2023-05-27 at 10.21.072914×396 30.7 KB

I have used the web inspector to find the classes of these and then tried various CSS and Javascript methods to try and hide them. The problem is that when calling document.getElementsByClassName(‘CLASSNAME’) it just returns an empty collection. I have even used a wait function and waited 10 seconds until the iframe has definitely loaded and this doesn’t make a difference. I can use the inspector to hide them by using the same code so the syntax is right, it just can’t seem to find them when using scripts on the page. They don’t exist from the Coda site, they only appear on the embed in the Webflow website. Any ideas how to hide these?

The page is Basic Chatbots.
Here is my site Read-Only: Webflow - Scale Street Platform

2

The syntax error => document.getElementsByClass(‘CLASSNAME’)

It should be document.getElementsByClassName(‘CLASSNAME’);

3

That is what I have in the code, I just typed it out wrong here, sorry for the confusion.

4

Since it’s an iframe, you don’t have any control over the CSS inside of it, unfortunately.

However - one solution that can work if the watermarks are somewhere around the edge of the iframe is to create a parent div with overflow set to none, and then apply some negative margin to the iframe - effectively hiding the watermark!