Hide LeadBooster

API
1

Hi. I’m integrating a LeadBooster chat bot into a React page.
Following these instructions I’ve got it loading, and it works great.
Now, I need to be able to hide the chat bot under certain conditions.
Not minimize the chat window down to just the icon: hide it completely, icon and all. Make it not visible on the page, full stop.
I’ve tried

document.getElementById('LeadboosterContainer').style.display = 'none';

I’ve tried

document.getElementById('LeadboosterContainer').style.display = 'none !important';

No effect. Looking at the element in dev tools, it doesn’t event add the style to the iframe element.

I’ve tried visbility: 'hidden !important'.
I’ve tried right: '-5000px !important'.

No effect.

An alternate approach would be if I could get the iFrame to attach itself to the DOM inside an element that I specify, like so:

<div id="pipedrive-chat-container'>
    <iframe id="LeadboosterContainer" ... ></iframe>
</div>

Then I could just hide the container element as needed.
Other insertable widgets follow this pattern: either creating the iframe inside a div, or allowing you to specify the id of an element to add the iframe to.
But I can’t find anywhere in the docs that allows me to specify such a thing.

Any insight would be very appreciated.
Thanks in advance!

2

Hi @JWalkerPhonesoap

Chatbot (LeadBooster) creates CSS that guarantees appearance via !important rule in CSS.

Screenshot 2021-06-15 at 09.53.00

If a page reload does not matter (as ChatBot script will appear again), to hide it programmatically on the frontend you could use something like this

document.getElementById('LeadboosterContainer').setAttribute('style', 'display:none !important');

In other cases, I would suggest adding/skipping the ChatBot script on the backend instead, so if “hiding” conditions are met, ChatBot script is not included in the page response, hence ChatBot is not rendered and no need to hide it on the frontend.

3

I kinda figured that would be the case.

We really don’t want the user to suffer a page reload.

Also, we’re not doing any server side rendering. All of our pages are statically rendered or client side rendered (we’re using Gatsby), so the server rendering won’t work either.

Here’s what I’ve come up with. When the component responsible for managing pipedrive chat unmounts the first time, we create a new div as a container for the pipedrive chat bot iframe, move the iframe to its new container, then hide the container:

const pipedriveContainer = document.createElement('div');
pipedriveContainer.id = 'pipedrive-container';
const pipedriveFrame = document.getElementById('LeadBooster');
pipedriveFrame.parentElement.removeChild(pipedriveFrame);
pipedriveContainer.appendChild(pipedriveFrame);
document.body.appendChild(pipedriveContainer);
pipedriveContainer.style.display = 'none';

Then, in the future, when the same component mounts:

document.getElementById('pipedrive-container').style.display = 'block';

And every subsequent time it unmounts, it just hides the container again.

I don’t love this solution but it works, and doesn’t have any undesired UI/UX side effects.