Recent Customers Script (VeriPurchase Alternative) - DevSeries

CCarter · Jan 25, 2016

I guess I'm just in developer mood today... So in my digital product days I came across VeriPurchase as a tool to utilize to enhance purchases. Basically what it did was get the names of buyers and scroll them through the screen on the call to action page right next to the checkout button. That way more people are likely to buy the product when they see the "social proof" that others are buying the product.

Well I didn't want to waste time doing all that integration into my real buyers, so I decided to go to the Social Security Administration and get the top list of baby name from babies born in 1971, I was targeting people 40-45 years old at the time, and scroll those names through this simple div layer to create "social proof". Here is a hint at how my mind works, if I'm going to fake some names I want people of that age group to think those names makes sense for their age group. For example there wouldn't be a lot of babies named Khaleesi in 1971 since Game of Thrones first aired in 2011, but guess what there are a actually babies named Khaleesi since the GoT series started. This is the macro level of thinking you have to start developing as you become a better and better developer and marketer. :wink:

Here is a live example, and what it looks like:

Here is the code:

--

CSS inside the <head><head> tag:

Code:

<!-- Style this nonsense - @MercenaryCarter -->
<style type="text/css">
#marqueecontainer{
position: relative;
width: 420px; /*marquee width */
height: 150px; /*marquee height */
background-color: #ffffff;

  background: -webkit-radial-gradient(circle, #ffffff, #f2f2f2);
  background: -moz-radial-gradient(circle, #ffffff, #f2f2f2);
  background: -ms-radial-gradient(circle, #ffffff, #f2f2f2);

overflow: hidden;
padding: 10px;
color: #454545;
}

#marqueecontainer div div {
  z-index: 50;
  float:left;
  width: 200px;
  text-align: left;
}

#vmarquee {
  width: 100%;
}

#main_widget {
  width: 440px;
  margin: 4px;
  padding: 4px;
  border: 4px solid #aa0011;
  background-color: #ffffff;

   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;

 text-align: center;
 clear:both;
}

#main_widget h4 {
  width: 436px;
 background-color: #cc0033;
 padding: 2px;
 margin: 0px;
 z-index: 100;
 color: #FFF;
 font-weight: normal;
 font-size: 1.2em;
  text-align: center;

}
</style>
<!-- End of style this nonsense - @MercenaryCarter -->

--

HTML code AFTER the opening <body> tag, place it exactly where you want it to appear. I prefer to place it right around the "Buy Now" button:

Code:

<!-- This is require mated - @MercenaryCarter -->
<div id="main_widget">
  <h4>Our Recent Customers</h4>
  <div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
  <div id="vmarquee" style="position: absolute;"></div>
  </div>
<img src="vp/logo.png" width="200">
</div>
<!-- End of require mated - @MercenaryCarter -->

--

javascripts/jQuery right BEFORE the closing </body> tag:

Code:

<!-- This is require mated - @MercenaryCarter -->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
  var data_file = "vp/1971-usa.xml";
</script>

   <script type="text/javascript" src="vp/verify-min.js"></script>
<!-- End - @MercenaryCarter -->

--

Here is the zip version:

recent-customer.zip

Till next time,

- CC

(There are almost literally no more Taylor Swift images of her baking cookies... this is a problem if this series is to continue...)

Recent Customers Script (VeriPurchase Alternative) - DevSeries

CCarter

Final Boss ®