APIs & Integrations

JohnS63
Contributor

Live Chat Integration Issue - iframe[src="about:blank"] { display: none; }

SOLVE

Hello, 

 

Wondering if someone can advise. I've tried installing Live Chat (non HS) product onto our hubspot hosted pages but when you go to the page it is not showing up all the time. 

 

According to Live Chat support the chat is installed, but on the page css is being used to hide the chat bar. 

 

Apparently the css: iframe[src="about:blank"] { display: none; } is applied to any iframe on the website and after the chat installation it influenced to the chat iframe as well. 

 

Does anyone know why CSS in Hubspot is set up to do this and where I can remove the code in the CSS? 

 

Thanks!

0 Upvotes
1 Accepted solution
WendyGoh
Solution
HubSpot Employee
HubSpot Employee

Live Chat Integration Issue - iframe[src="about:blank"] { display: none; }

SOLVE

Hi @JohnS63,

 

I hope all is well with you 😄

 

When looking at the ticket interaction, I believe you're referring to the company perks page? If that's the case, while there isn't a way to edit the public_common.css which the iframe display:none is set (I believe the reason in setting the src=about:blank to display:none is to possibly increase the page speed), you can quite easily overwrite by setting the following on your template css:

 

iframe#livechat-compact-view {
display: block;
}

 

Under your Xexec_World_Design_Oct_2016-style.css > If you'd like you can uncomment line 346-348 by removing the /* and */ > After removing it, you should be able to see the chat widget loading.

 

Additionally, if you're looking to enable the chat widget across the page for the domain info.xexec.com, you can insert the following code under your Settings > Website > Pages > Select domain 'info.xexec.com' > Under the 'Site header HTML'

 

<style>iframe#livechat-compact-view {
    display: block;
}</style>

 

I hope this helps to clarify!

View solution in original post

3 Replies 3
WendyGoh
Solution
HubSpot Employee
HubSpot Employee

Live Chat Integration Issue - iframe[src="about:blank"] { display: none; }

SOLVE

Hi @JohnS63,

 

I hope all is well with you 😄

 

When looking at the ticket interaction, I believe you're referring to the company perks page? If that's the case, while there isn't a way to edit the public_common.css which the iframe display:none is set (I believe the reason in setting the src=about:blank to display:none is to possibly increase the page speed), you can quite easily overwrite by setting the following on your template css:

 

iframe#livechat-compact-view {
display: block;
}

 

Under your Xexec_World_Design_Oct_2016-style.css > If you'd like you can uncomment line 346-348 by removing the /* and */ > After removing it, you should be able to see the chat widget loading.

 

Additionally, if you're looking to enable the chat widget across the page for the domain info.xexec.com, you can insert the following code under your Settings > Website > Pages > Select domain 'info.xexec.com' > Under the 'Site header HTML'

 

<style>iframe#livechat-compact-view {
    display: block;
}</style>

 

I hope this helps to clarify!

JohnS63
Contributor

Live Chat Integration Issue - iframe[src="about:blank"] { display: none; }

SOLVE

Wow - thanks @WendyGoh what a great solution!

 

I've tried both and they work perfectly Smiley Happy

 

Can you possibly provide a quick explanation of what the code does to make it work? 

iframe#livechat-compact-view {
display: block;
}

Plus was it always there given that I just had to comment it back in or was it something that was added by support?

0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

Live Chat Integration Issue - iframe[src="about:blank"] { display: none; }

SOLVE

Hi @JohnS63,

 

Glad it works out well for you!

 

That particularly code was added by me and I didn't want to make any changes yet so I commented it out. The code basically target the iframe with the id livechat-compact-view to set the display as block to overwrite the display: none.

0 Upvotes