Changing the live chat button on a mobile device

I have a responsive site. How do I change the live chat button when visitors are viewing my site on a mobile device?

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>