Need Help Hiding the chat widget within an Iframe

Developer Support CMS Development
1

Hello HubSpot Community,

I am encountering an issue with hiding chat widget within an iframe on a specific page of our website and would appreciate any assistance. Here are the details:

What I’m Trying to Achieve:

  • Hide the chat widget inside an iframe.

Attempts Made:

  1. CSS:

    • Applied CSS rules directly within the parent document and iframe.
    • Used JavaScript to inject CSS into the iframe’s document.

  2. JavaScript:

    • Implemented a script to wait for the iframe to load and then hide the target element.
    • Used MutationObserver to monitor changes within the iframe and ensure the element is hidden even if it appears after a delay.

Specifics:

  • The iframe is embedded using an HTML widget in Elementor and has the ID #profile-iframe.

Challenges:

  • Despite these efforts, the target element remains visible.

Question: Can anyone provide guidance or solutions to successfully hide this element?

Thank you in advance for your help!

2

You can’t easily address the contents of an iframe, but you can wrap the iframe launcher in an element, and use CSS to hide the contents.
if the page you wanted to hide this on had
<body class=“kittens”>
…
<div class=“iframe_wrapper”>
%iframage%
</div>
This CSS would hide the contents:
.kittens .iframe_wrapper{

display:none;
}

3

I’m having this same issue but need the ELI5 version as a low-code/no-code marketer. I have a chat bot showing up inside an iframe that I used to embed a Typeform into a page on my site. I use Webflow. It’s driving me crazy that I can’t remove it. There were two instances on that page, once in the main page wrapper and another in the iframe. I managed to get rid of the one from the main wrapper but not the iframe. Can you (or anyone else seeing this) help?
If it helps our site is hosted on Webflow. I have updated my chatbot’s targeting to exclude that URL.

4

I was having the same issue when embedding a Typeform form widget into an IFrame on my website. The fix I found that seemed to work is I went to Typeform - got the full URL for the form - then added that form URL into the Chatflow settings as the exclude URL value. This has resulted in the chatflow widget only showing on my parent page as desired, and not showing over my Typeform Form embed.

5

Hey @JSymons, thanks so much for sharing your solution!
Adding the Typeform URL as an exclude URL in Chatflow settings is a great tip and will definitely help others with the same issue.
We appreciate your contribution, please feel free to share any other tips or questions with the Community!
Have a wonderful weekend! :sun_with_face:
Bérangère