MessageBird Omnichannel Widget - Single Page Web App - Errors

Question

I'm using an online ordering solution (white label solution) that only allows code edits via Google Tag Manager. I want to display a chat widget on the solution. Currently using LiveChat but want to change to MessageBird. Having problems with inserting code on single page app.

https://developers.messagebird.com/api/omnichannel-widget/

I've inserted the MessageBird Omnichannel widget via Google Tag Manager firing on all pages or history change (to allow for single page web app).

<script>  
var MessageBirdChatWidgetSettings = {     
widgetId: '37d411fb-b884-4342-a226-5c8aac703e44',     
initializeOnLoad: true,   
};  

!function(){"use strict";if(Boolean(document.getElementById("live-chat-widget-script")))console.error("MessageBirdChatWidget: Snippet loaded twice on page");else{var e,t;window.MessageBirdChatWidget={},window.MessageBirdChatWidget.queue=[];for(var i=["init","setConfig","toggleChat","identify","hide","on","shutdown"],n=function(){var e=i[d];window.MessageBirdChatWidget[e]=function(){for(var t=arguments.length,i=new Array(t),n=0;n<t;n++)i[n]=arguments[n];window.MessageBirdChatWidget.queue.push([[e,i]])}},d=0;d<i.length;d++)n();var a=(null===(e=window)||void 0===e||null===(t=e.MessageBirdChatWidgetSettings)||void 0===t?void 0:t.widgetId)||"",o=function(){var e,t=document.createElement("script");t.type="text/javascript",t.src="https://livechat.messagebird.com/bootstrap.js?widgetId=".concat(a),t.async=!0,t.id="live-chat-widget-script";var i=document.getElementsByTagName("script")[0];null==i||null===(e=i.parentNode)||void 0===e||e.insertBefore(t,i)};"complete"===document.readyState?o():window.attachEvent?window.attachEvent("onload",o):window.addEventListener("load",o,!1)}}();
</script>

This works fine on our desktop version - where the widget loads to an area "off screen" to the bottom right but it causes problems on the mobile version - slowing down page loads and interfering with page elements and other tags firing via Google Tag Manager. I suspect the problem relates to our online ordering solution being a single page web app?

I walk through the problem here on video: https://www.loom.com/share/efacb3ebe89e49ceb7b5049da8a31a58

I was previously using LiveChat and also inserted the code via GTM (same triggers). This worked fine and I have this currently on the website.

<script type="text/javascript">
  window.__lc = window.__lc || {};
  window.__lc.license = 11857671;
  (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/11857671/" 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 -->
<script src="https://73b0e137397e4eceb870f14567b2e515.js.ubembed.com" async></script>

I have tried firing the MessageBird widget tag on only the main page, same problem. I have also tried not initializing the MessageBird widget, same problem.

I would appreciate any advice or suggestions.