Adding third party js script on react component

Question

I have a script of a chat component developed by third parties, which has an option to include it in a website incorporating the following code:

<script type="text/javascript">
  var Comm100API=Comm100API||{};(function(t){function e(e){var a=document.createElement("script"),c=document.getElementsByTagName("script")[0];a.type="text/javascript",a.async=!0,a.src=e+t.site_id,c.parentNode.insertBefore(a,c)}t.chat_buttons=t.chat_buttons||[],t.chat_buttons.push({code_plan:147,div_id:"comm100-button-147"}),t.site_id=228642,t.main_code_plan=147,e("https://chatserver.comm100.com/livechat.ashx?siteId="),setTimeout(function(){t.loaded||e("https://hostedmax.comm100.com/chatserver/livechat.ashx?siteId=")},5e3)})(Comm100API||{})
</script>

In this way a clickable popup is incorporated, which when pressed opens the chat window.

The idea is to add it in a reactive application that already is built, within a component of it.

If we add the code in the index.html of the application, the popup is nested in the body of the application, occupying a fixed position on the screen.

We need insert chat view on this component, and don't know how can do it:

interface Props {
  showVideoChat: false,
}

class VideoChatActionsPane extends React.Component<Props, {}> {
  render() {

    if (this.props.showVideoChat) {
      return (
          <div className="wdrgy-videoChat-menu">
            <div className="wdrgy-wc-header-videochat">
              <div className="wdrgy-brand">
                <span className="wdrgy-title">Title</span>
              </div>
            </div>
            <div>
              { // Chat component should be inserted here
              }
            </div>
          </div>
      );
    }
    return null;
  }
}

Thanks in advance for your help!

Answer 1

Better late than never:

You can use React Helmet to add the script to the head section of your document, like this:

<Helmet>
    <script type="text/javascript">
        var Comm100API = Comm100API || {};
        (function(t) {
        ...
        })(Comm100API || {})
    </script>
</Helmet>

And then just add the div with react:

<div id="comm100-button-xxxx"></div>