Support Center > Knowledge Base> Article: Changing the live chat button on a mobile device

Changing the live chat button on a mobile device

Article ID: 74710 Email Print
Question
I have a responsive site. How do I change the live chat button when visitors are viewing my site on a mobile device?

Answer

With the standard live chat button code on your website, please add the following to your website.

 

Place this in your css. One is an online button the other is an offline button with the other as a common class. If the width and/or heights are different between the offline and online image, you will have to move the css to both the online and offline classes is below.

 

.media_chat_btn {            
	display: block;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: PIXEL_WIDTH; /* Width of new image */
        height: PIXEL_HEIGHT; /* Height of new image */
        padding-left: SAME_AS_PIXEL_WIDTH; /* Equal to width of new image */
}

.media_chat_btn_offline {           
        background: url(‘URL_OF_OFFLINE_IMAGE') no-repeat;
}

.media_chat_btn_online {           
        background: url(‘URL_OF_ONLINE_IMAGE') no-repeat;
}

 

This can be placed anywhere on the site. You can place it near your lhn button code, so it is more organized.
Please change MAX_MEDIA_SIZE to the max size for the mobile button. Please do not place "px" just the number.

 

<script type="text/javascript">

	function LHN_button_onLoad(){

		if (document.documentElement.clientWidth <= MAX_MEDIA_SIZE) {

			$('#lhnchatimg').addClass('media_chat_btn');

   			if (bLHNOnline == 0)
    			{
     				//All operators are offline
				$('#lhnchatimg').addClass('media_chat_btn_offline');
    			}
    			else 
    			{
			       //There are operators online
				$('#lhnchatimg').addClass('media_chat_btn_online');
			}
		}

	}
	

<script>

 


Related articles

Article Details
Views: 7798 Created on: Apr 14, 2016
Date updated: Apr 14, 2016

Poor Outstanding