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

**URL:** <https://community.hubspot.com/t/live-chat-integration-issue-iframe-src-about-blank-display-none/16220>\
**Category:** APIs & Integrations\
**Tags:** cms-content\
**Created:** [September 12, 2019, 7:53pm UTC](https://community.hubspot.com/t/live-chat-integration-issue-iframe-src-about-blank-display-none/16220 "2019-09-12T19:53:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![JohnS63](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/johns63/32/84489_2.png) [@JohnS63](https://community.hubspot.com/u/JohnS63)\
**Post date:** [September 12, 2019, 7:53pm UTC](https://community.hubspot.com/t/live-chat-integration-issue-iframe-src-about-blank-display-none/16220/1 "2019-09-12T19:53:58Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![WendyGoh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wendygoh/32/42320_2.png) [@WendyGoh](https://community.hubspot.com/u/WendyGoh)\
**Post date:** [September 13, 2019, 3:25am UTC](https://community.hubspot.com/t/live-chat-integration-issue-iframe-src-about-blank-display-none/16220/2 "2019-09-13T03:25:21Z")

</div>

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](http://info.xexec.com), you can insert the following code under your Settings \> Website \> Pages \> Select domain ‘_[info.xexec.com](http://info.xexec.com)_’ \> Under the ‘_Site header HTML_’

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

```

I hope this helps to clarify!

---

<div class="post-metadata">

**Author:** ![JohnS63](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/johns63/32/84489_2.png) [@JohnS63](https://community.hubspot.com/u/JohnS63)\
**Post date:** [September 13, 2019, 9:44am UTC](https://community.hubspot.com/t/live-chat-integration-issue-iframe-src-about-blank-display-none/16220/3 "2019-09-13T09:44:32Z")

</div>

Wow - thanks @WendyGoh what a great solution!

I’ve tried both and they work perfectly  
 ![16x16_smiley-happy.png.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/22d5e40d253def47f5f4ea7f0e3e70be19010689.png)

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?

---

<div class="post-metadata">

**Author:** ![WendyGoh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wendygoh/32/42320_2.png) [@WendyGoh](https://community.hubspot.com/u/WendyGoh)\
**Post date:** [September 16, 2019, 2:03am UTC](https://community.hubspot.com/t/live-chat-integration-issue-iframe-src-about-blank-display-none/16220/4 "2019-09-16T02:03:56Z")

</div>

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.