eBay Hacks, 2nd Edition

Put a Floating Contact Link in Your Listings

Make it easier for your customers to contact you by using JavaScript to ensure that a Contact Seller link is always visible.

The easier it is for your customers to contact you, the more likely they’ll do it. Of course, the thought of getting deluged by more stupid questions [Hack #67] probably makes you want to run screaming for the hills, but stop and consider the benefits first. When customers ask questions, there are fewer misunderstandings [Hack #54] and fewer deadbeat bidders [Hack #68] ; if nothing else, the ever-visible link helps inspire trust [Hack #8] in your customers that you are a seller who cares about customer service.

To put a floating Contact Seller link in your listings, place this code in the beginning of your listing description:

<script language="JavaScript"><!-
function MoveBox() {

  if (document.getElementById&&!document.all) {
    BoxLayer = document.getElementById('ContactSeller');
    if (BoxLayer.style.top != pageYOffset) {
   
    BoxLayer.style.top = pageYOffset;
    }
  }
  else if (navigator.appName == "Microsoft Internet Explorer"
           && navigator.appVersion.substring(0, 1) >= "4") {
      if (ContactSeller.style.top != document.body.scrollTop) {
        ContactSeller.style.top = document.body.scrollTop;
      }
    }
    setTimeout ('MoveBox()', 50);
   }
   setTimeout ('MoveBox()', 50);
   function contactSeller() { 
     for (var i=0; i < document.links.length; i++) { 
     if (document.links[i].href.indexOf('ShowCoreAskSellerQuestion') > 0) { 
     window.open(document.links[i].href); 
     } 
   } 
 }
 //--></script>
 <div id="ContactSeller" align=right
          style="position: absolute; width: 99%; z-index: 0; clip:auto;">
  <a href="javascript:contactSeller();">Ask seller a question</a>
  </div>

When you load the page, a small link appears in the upper right of your description. As soon as you scroll the page, the link jumps to the upper-right corner of the window, and stays there.

One of the nice things about this script is that you don’t need to modify it with your eBay member ID or the current listing number. Instead, the link uses the URL of the existing “Ask seller a question” link, thus preserving all the information contained therein.

The “Ask seller a question” link is an ordinary HTML hyperlink [Hack #52] placed on a transparent, floating <div> layer. Because it’s transparent, your bidders will always be able to see what’s behind it. To take full advantage of this transparency, you may want to replace the “Ask seller a question” text with a semitransparent image like the one shown in Figure 4-21.

The transparent image you use can be any GIF or PNG file, but JPG files are not suitable because they don’t support transparency. (Just about any image editor [Hack #74] supports transparent images.) Once you’ve prepared the image, reference it in your listings by replacing the text link with this line:

<a href="javascript:contactSeller();"><img 
        src="http://www.ebayhacks.com/pictures/contactseller.gif"></a>

Figure 4-21. This floating “Ask seller a question” link is always visible, encouraging customers to contact you

where http://www.ebayhacks.com/pictures/contactseller.gif is the full URL of the image hosted on your web server [Hack #76] .

Some bidders may find the floating link annoying, so it might be helpful to provide a way for them to turn it off. To do this, add the following link immediately after the “Ask seller a question” link:

[<a href="javascript:hideBox();">X</a>]

and then place the following code inside the <script></script> structure:

    function hideBox() {
      if (document.getElementById&&!document.all) {
         BoxLayer.style.visibility = 'hidden';
      } else {
          ContactSeller.style.visibility='hidden';
      }
    }

If you’d rather use an image than a text link, you can incorporate the close button with your image, like the one shown in Figure 4-22. To do this, either use two different images, like this:

    <nobr><a href="javascript:contactSeller();"><img
    src="http://www.ebayhacks.com/pictures/contactseller.gif"></a>
    <a href="href="javascript:hideBox();"><img
    src="http://www.ebayhacks.com/pictures/close.gif"></a></nobr>

or, use a single image with an image map, like this:

    <map name="contactseller">
    <area shape=rect coords="1, 1, 143, 23"
                href="javascript:contactSeller();">
    <area shape=rect coords="145, 1, 166, 23"

                href="href="javascript:hideBox();">
    </map><img usemap="#contactseller">
    src="http://www.ebayhacks.com/pictures/contactseller.gif">

All the bidder has to do is click X, and the “Ask seller a question” link will disappear completely until the page is reloaded.