Adding a 3rd party live chat window with javascript

My client would like to have a "live chat" window on a Modern Team SharePoint site with a floating element. The third party the client wants to use, sent some JavaScript and HTML and insists it will work if placed above the closing body tag of a page.

<!-- Start of LiveChat (www.livechatinc.com) code --> <script type="text/javascript"> window.__lc = window.__lc || {}; window.__lc.license = LicNumber; (function() { var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true; lc.src=('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s); })(); </script> <noscript> <a href="https://www.livechatinc.com/chat-with/11798958/" rel="nofollow">Chat with us</a>, powered by <a href="https://www.livechatinc.com/?welcome" rel="noopener nofollow" target="_blank">LiveChat</a> </noscript> <!-- End of LiveChat code -->

I did get this to work modified and in an iframe:

<iframe src="https://secure.livechatinc.com/licence/"LicenseNumber"/open_chat.cgi" width="400px" height="300px">
</iframe>

Which resulted in a fully functional window:

However, my client wants a floating element such as:

Any guidance/ideas for implementing this would be greatly appreciated!