Livechat in embedded mode

Development
1

Hi, a try but livechat in ‘embedded’ mode to allow use in a web and mobile application.

Image for reference:
Seleção_999(269)

The closest I could get was using (livechat?mode=popout) and some scripts to adjust the placement

<!-- Start of Rocket.Chat Livechat Script -->
    <script type="text/javascript">
    (function(w, d, s, u) {
        w.RocketChat = function(c) { w.RocketChat._.push(c) }; w.RocketChat._ = []; w.RocketChat.url = u;
        var h = d.getElementsByTagName(s)[0], j = d.createElement(s);
        j.async = true; j.src = 'http://localhost:3000/livechat/rocketchat-livechat.min.js?_=201903270000';
        h.parentNode.insertBefore(j, h);
    })(window, document, 'script', 'http://localhost:3000/livechat?mode=popout');
    </script> 
    <script type="text/javascript">
       RocketChat(function() {

           this.onWidgetShown(function(data) {
        	   fixWidget();
               console.log('chat widget shown');
           });

        });
    </script>

Adjustments:

<style>
    .rocketchat-widget{height: 100% !important; z-index: 0 }
</style>

<script>
  function resizeIframe(obj) {
	var marginTop = 50;
    obj.style.height = (window.innerHeight - marginTop) + 'px';
    document.body.style.cssText += 'overflow: hidden; height: 100%; width: 100%;';
  }
  
  function fixWidget() {
	  
	  resizeIframe(document.getElementById('rocketchat-iframe'));
	  
	  var $widget = $(".rocketchat-widget");
	  $widget.css('position', 'relative');
	  
	  var left = $(".slimScrollDiv").width();
	  $widget.css('left', left + 'px');
          $widget.css('z-index', '0');
	  $widget.css('width', (window.innerWidth - left) + 'px');
	  // $("#content-wrapper").append($widget); // move to 'content' container
  }
</script>

Of course, this creates some problems, as I have a ‘slimScrollDiv’ sidebar, which can be minimized. So it’s not a perfect solution. It may fail in other cases

–
What would make it easier was to allow this, it would be to inform where the DIV(rocketchat-widget) would be created, and adjust the body’s css (overflow: hidden).

Usin: $("#content-wrapper").append($widget);, cause a reflresh loop in iframe

Is there an easier way to do this?