# Livechat in embedded mode

**URL:** <https://forums.rocket.chat/t/livechat-in-embedded-mode/8822>\
**Category:** Development\
**Tags:** design\
**Created:** [October 7, 2020, 2:50pm UTC](https://forums.rocket.chat/t/livechat-in-embedded-mode/8822 "2020-10-07T14:50:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ricardo.jl.rufino](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/ricardo.jl.rufino/32/2224_2.png) [@ricardo.jl.rufino](https://forums.rocket.chat/u/ricardo.jl.rufino)\
**Post date:** [October 7, 2020, 2:50pm UTC](https://forums.rocket.chat/t/livechat-in-embedded-mode/8822/1 "2020-10-07T14:50:32Z")

</div>

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

Image for reference:  
 ![Seleção_999(269)](https://us1.discourse-cdn.com/flex021/uploads/rocketchat/original/2X/9/99a30e685b119deb6e02ee10e2271263c090c6d3.jpeg)

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

```auto
<!-- 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:

```auto
<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?