Hide iFrame on one page

SOLVE
Top Contributor

Hello all,

 

I'm currently working on this page. There is an iFrame at the bottom for live chat (please see photo1) and i would like to hide it as we don't want it on this page.

 

hubhelp.PNGPhoto1

Any advice on how to do this would be greatly appreciated.

 

Best,

Jamila Smiley Happy

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Regular Contributor

Hi @Jlawal,

you can hide the iFrame by adding 

#liveAgent{
display:none;}

to your main CSS.

This will hide the live chat iFrames from all of your page.

 

If it is really the one page you can add the page class to it. You find it by opening the browser inspector and look for the class which your body has and add it to the code above. 

 

browser inspector shortcut:

Chrome: STRG+ALT+i(WIN) or CMD+ALT+i(macOS)

(other browsers should be very similar)

or 

right-click and inspect/explore

 

You'll find the body class here: 

Bildschirmfoto 2018-12-10 um 21.44.14.png

by adding the body class to the code it should look like this:

 

body.hs-content-id-6178002901 #liveAgent{
display:none;}

(there is a difference where you put it and if it has a space or doesn't - just a tipp)

 

You can also try this:

.hs-content-id-6178002901 #liveAgent{
display:none;}

 

Tipp:

add this code at the very bottom of your main css.

 

Tipp 2: 

If it should still not work try the "sledgehammer"-method by adding an !important after "none". 

Your code should look like this

.hs-content-id-6178002901 #liveAgent{
display:none !important;}

 

 

 

Hope this helps

 

 

regards, 

Anton

 

 

Did my post help answer your query? Help the Community by marking it as a solution

 

2 Replies
Highlighted
Regular Contributor

Hi @Jlawal,

you can hide the iFrame by adding 

#liveAgent{
display:none;}

to your main CSS.

This will hide the live chat iFrames from all of your page.

 

If it is really the one page you can add the page class to it. You find it by opening the browser inspector and look for the class which your body has and add it to the code above. 

 

browser inspector shortcut:

Chrome: STRG+ALT+i(WIN) or CMD+ALT+i(macOS)

(other browsers should be very similar)

or 

right-click and inspect/explore

 

You'll find the body class here: 

Bildschirmfoto 2018-12-10 um 21.44.14.png

by adding the body class to the code it should look like this:

 

body.hs-content-id-6178002901 #liveAgent{
display:none;}

(there is a difference where you put it and if it has a space or doesn't - just a tipp)

 

You can also try this:

.hs-content-id-6178002901 #liveAgent{
display:none;}

 

Tipp:

add this code at the very bottom of your main css.

 

Tipp 2: 

If it should still not work try the "sledgehammer"-method by adding an !important after "none". 

Your code should look like this

.hs-content-id-6178002901 #liveAgent{
display:none !important;}

 

 

 

Hope this helps

 

 

regards, 

Anton

 

 

Did my post help answer your query? Help the Community by marking it as a solution

 

Top Contributor

Thank you @AntonB, that's worked perfectly!

Reply
0 Upvotes