LiveHelpNow Help Desk

Support Center

BASIC

ADVANCED

Exact Match:

  • Home
  • Categories
  • Home
  • Categories
  1. Home
  2. Categories
  3. Changing the live chat button on a mobile device

Changing the live chat button on a mobile device

  • Date updated 2016-04-14
  • Author LiveHelpNow
  • Comments 0
  • Rating
  • Categories
  • Customization
  • Live Chat System
  • Advanced Customization
  • Adv Installation
  • Adv Customization
  • Chat Buttons
  • Tags
  • Live Chat System
  • chat
  • Chat buttons
  • install chat
  • responsive site

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>

 

Rate this article


Your email is now subscribed to alerts for this article

Your email is not subscribed to alerts for this article

Subscribe to alerts for this article below

Unsubscribe to alerts for this article below


Leave a comment?

Related articles

  • What are the Software Requirements for running the LiveHelpNow Alerter?
    • 28631
    • 64
    • 0
  • Is it possible to block IPs from starting a chat session?
    • 24874
    • 60
    • 0
  • Can I monitor visitor traffic on my eBay auction page?
    • 26767
    • 59
    • 0
  • Multiple chat buttons on multiple web pages
    • 22942
    • 60
    • 0
  • How to Collect Visitor Information with Live Chat
    • 21269
    • 61
    • 0
  • Installation on a Flash based website
    • 24396
    • 61
    • 0
  • Custom information feed
    • 29560
    • 28
    • 0
  • Live chat installation on multiple websites
    • 33001
    • 74
    • 0
  • Mobile Chat - Live Chat for Mobile
    • 27088
    • 31
    • 0
  • Customize invitation to chat
    • 76917
    • 104
    • 0

Popular Knowledge Base Articles

  • Customize with different languages
    • 21781
    • 27
    • 0
  • LiveHelpNow Section 508 Compliance & Accessibility for Visually Impaired Users
    • 16848
    • 60
    • 0
  • Unsecured content warnings
    • 16152
    • 57
    • 0
  • HelpOut Tab - changing Chat, Ticket and Callback button images
    • 23882
    • 27
    • 0

Knowledge Base Authors

  • Michael Conde
    Michael Conde
    Total articles: 10
  • LiveHelpNow
    LiveHelpNow
    Total articles: 257

Company Sites

Home

Blog

Categories

  • General Questions
  • Getting Started
  • Customization
  • Advanced Customization
  • Troubleshooting
  • All Categories

Connect With Us

  • LiveHelpNow, LLC
  • Customer Service Software
  • 515 S West End Blvd
    Suite 202
    Quakertown, PA 18951

  • 8775483001
  • help@livehelpnow.com
  • https://www.livehelpnow.net
    Powered by Global Knowledge Base a LiveHelpNow product