I have Hubspot chat script embedded in the index.html file of my React App using the <script/> tag for user communication.
Now, when a button is clicked I want the hubspot container to be hidden and then when another button is clicked I want it to be displayed again.
I do not have control over the behaviour of the chat icon because it was added to the page via a <script/> tag.
But after some digging I was able to get the id of the element so here is how I've tried toggling the visibility of the chat but it's not working for me.
const toggleHubspotContainer = (turnOn) => {
let hubSpotContainer = document.getElementById("hubspot-messages-iframe-container");
if (turnOn) {
hubSpotContainer.style.display = 'block';
return;
}
hubSpotContainer.style.display = 'none'; //The chat icon is not hiding even after this
}
Please note that the hubspot script was added in the index.html file like this
<script type="text/javascript" id="hs-script-loader" async defer src="//js-eu1.hs-scripts.com/adadadad.js"></script>
Is there a way to do this properly?
Thank you.
Try this, consider your script is in header
function hideHb() {
var head = document.getElementsByTagName('head').item(0);
var js = document.getElementById("hs-script-loader");
head.parentNode.removeChild(js);
}