Embedded chat window for mobile devices

Please note that the following approach is a workaround solution and it is not guaranteed to work with every browser/device combination that is available.
In case you do not want chat to open in a new browser window on mobile devices when a LiveAgent chat button is clicked, you can use this trick to set up embedded chat window for mobile device. To achieve this you have to:

 

1. Create or edit existing chat button

2. Modify "Button design"
- select "Chat window" and scroll down to the bottom, where you can find "Custom CSS". Please paste following code into "set custom CSS" and save your work.

@media (max-device-width: 600px) {
  #mainElement {width:100% !important; height:100% !important; }
   .ChatFrame {left:0; top:0; right:0; border-radius:0;}
}

3. Save the button and get the integration code which will look like this:

<script type="text/javascript">
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://URL_TO_LIVEAGENT/scripts/track.js',
function(e){ LiveAgent.createButton('buttonID', e); });
</script>

4. Change the code so it looks like this (remember to use correct URLs and button id):

<script type="text/javascript">
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://URL_TO_LIVEAGENT/scripts/track.js',
function(e){
  LiveAgent.instance.isMobileBrowser = false;
  LiveAgent.createButton('buttonID', e); 
});
</script>

5. Once you will be done you need to update your website CSS as well:

@media (max-width: 600px) {
  .i-embedded-chat {
    width:100% !important;
    height:100% !important;
  }
}

You are done. Now your chat window will be embedded in page even for mobile devices.

Ready to try LiveAgent?

It's free for the first 14 days! No credit card required.

Get Started
We work well with others...
Magento Joomla Wordpress Mailchimp
Contact us

support@ladesk.com

+1-800-811-6590 (Toll Free in USA & Canada)

+421 2 33 456 826 (European Union & Worldwide)

Quality Unit, LLC 616 Corporate Way, Suite 2-3278 Valley Cottage, NY 10989

Stay in touch
Blog Google+
© 2004-2015 QualityUnit.com, All rights reserved