在 React 中切换不可控元素的可见性

Question

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.

Answer 1

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);
}