How to install the U.B.B. Ultimate Belcher Button

NOTE use the new  EZUBB Wizard for the latest button (click here)

this video is for the original UBB Version 1.0! which is has been replaced by the UBB 3.0


This 3 minute video how to install the UBB, that you immediately get by optin-in.

[flash http://www.troynotes.com/wp-content/uploads/2009/10/ultimate_perry_belcher_button_ubb_installation_guide.swf w=850 h=500]

FYI you can resize the button just by changing the height and width in the javascript.

Here are the current values you can pass in via javascript + flash variables to customize the UBB

  • useSound “true” or “false” , defaults to true, enabled mp3 sounds for the rollover, rollout, press, etc.
  • fullprice the up to 4 digit number on the left crossed out WITHOUT dollar sign (in that example. fullprice=297 shows up as <del datetime=”2009-12-14T05:07:25+00:00″>$297</del>)
  • todayprice the up to 4 digit number on the right for the actual purchase price WITHOUT dollar sign (in that example. todayprice=87 shows up as $87)
  • paypal = (true or false)  is whether a blue border appears around the credit cards or not (to indicate that all the credit cards are processed through paypal.
  • ubbID – an optional unique id so that if you have more than one UBB on a page they can be differentiated when they call the javascript back.

ok inside the  for this.

EXAMPLE:  fullprice=297&amp;todayprice=87&amp;paypal=false

you should see it in 2 places, both are necessary for proper operation.  those values are put 2 times, once for IE, the other for Firefox. e.g.

<code><param name=”FlashVars” value=”fullprice=297&todayprice=87&paypal=false” /></code>

the other in the embed tag.

<code><embed FlashVars=”fullprice=297&todayprice=87&paypal=false”/></code>

Both sets have to have the values, else people in different browsers will get different prices!

HOW TO INTEGRATE YOUR FORM/ACTION

First note that the button will only work if it’s uploaded to your webserver. This is due to flash security restrictions.

The button is built in flash and calls a javascript function named onBelcherButtonClick with the following arguments.

onBelcherButtonClick(ubbID, clicksource)

Where ubbID is the unique id of the UBB you pass in via javascript so that you can have more than one button on a page (e.g. for single pay or multiple payments)

clicksource will be either “hyperlink” or “buttonclick” depending if the blue hyperlink inside or the buttonclick of the UBB is where the user clicked, optional primarily for analytics.

you need to determine if you need the form or a hyperlink method.

If you have a single url to call (e.g. clickbank affiliate ID) they you use the hyperlink method.

Use the troynotes_ultimate_belcher_button_using_hyperlink.html in the zip for reference.

EXAMPLE: Hyperlink redirect Method

<script language=”JavaScript” type=”text/javascript”>

function onBelcherButtonClick(ubbID, clicksource){

//this would take the user to that clickbank Id

document.location = “http://1.youraffiliateID.theproductclickbankID.clickbank.net”;

}

</script>

EXAMPLE: Form Submit Method

If you have a form to post (e.g. on a Aweber optin) you would use the form submit method

Use the troynotes_ultimate_belcher_button_using_hyperlink.html in the zip for reference.

<script language="JavaScript" type="text/javascript">
function onBelcherButtonClick(ubbID, clicksource){

//the form named MYFORM submit it as if the user had clicked on it.

document.MYFORM.submit();

}
</script>

EXAMPLE: Multiple Offers Per Page

If you had say more than one offer per page you would separate by

<script language="JavaScript" type="text/javascript">
function onBelcherButtonClick(ubbID, clicksource){
if(ubbID =="1"){
 document.location = "http://1.youraffiliateID.theproductclickbankID.clickbank.net";
}else if(ubbID =="2"){
 document.location = "http://1.youraffiliateID.theproductclickbankID#2.clickbank.net";

}

}
</script>

Sounds For The UBB

The UBB supports customizeable dynamic sounds for the various user events.

ThemeName/ubb_rover.mp3  – mouse rollover (which accompanies a animated effect)

ThemeName/ubb_rout.mp3 – mouse rollout (which accompanies an animated effect)

ThemeName/ubb_tick.mp3 – mouse press (which accompanies an animated effect)

ThemeName/ubb_tock.mp3 – mouse release the button (but not a click-through)

ThemeName/ubb_thanks.mp3 – mouse release the button (successful click).

Default sounds are approximately:

rollover –shhooSSHH!

rollout –SSHHOOoossh!

press – tock!

release – tick!

click – crowd cheer

NEW in Version 2.3

Sounds are turned on by default, prior they were turned off.

Note there are now 5 sounds, ubb_thanks.mp3 is a cheer after the button is clicked. You can replace this with your own voice e.g. (“thanks! taking you to the secure order page”)

Added  “going to secure page” overlay post click. This assures the user that their click has been handled (as well as avoid messing up analytics).  It covers up the button for 30 seconds, then hides, in case the request doesn’t go through then they can try again.

NEW in VERSION 2.0

Has customizeable sound!. Replace the ubb_rollover.mp3, etc with the sound you want for the button rollover, rollout, clickdown and clickup.  Just delete the mp3’s if you dont’ want sound.

Paypal border is activated, look inside the sample html for the paypal flag, that turns on the border around the credit cards of what paypal is shown.

The credit card section is now clickable on IE. (thanks to Clint)

It uses vector images for the credit cards too, so scalable without pixelization and svelte at 20kb (minus the sound)

COMING UP IN Version 3.0

  • audio event for rollover the area (like your voice instructing them)
  • a thank you follow up voice after they click.
  • echeck, and other options
  • a wizard to let you configure which payments show up,

    FYI the wizard we are working on will 1) take a snapshot of the pricing + configuration 2) bundle it with SWFObject.  So that people without flash can view it and still click on it.

  • some sound packs themes to make the button fit into different niches
  • we will be adding a OSX like dock effect to the payment options

Comment below on any questions you have and I’ll answer them here.

FAQs:

What is the password to the zip?

troynotes

#1 Where does the code go in the HTML page

The Javascript goes in the <head></head>  section. the object embed code in the <body></body>. See the zip.

#2 How do I use the REPLACE, I’m confused

>I think my problem is the section where we are supposed to REPLACE the line of code.  Watching your video, I don’t fully understand what you meant.  Is that where you would put your PayPal code, for >example??

not quite.  The right approach depending on what you are using for your payment provider, but is usually one of these two ways:

If you have a submit form say from paypal, that block of javascript would call your  paypal_form.submit().  But the path to that form would vary on the page it’s integrated with.

if you had a normal html link it should simulate clicking on it, e.g. yourlink.click();

These both require basic HTML+Javascript skills. If you need help try searching google for javascript link click, or javascript form post to get a better understanding, or get help on an outsourcing site, such a request would cost you $10 or less to have them do it for you.

#3:  I’m using e-junkie (or other provider)  instead of PayPal.  Is that a problem?

Nope!  the flash is just a better presentation, the rest of the functionality is the same as you would normally do it.

Examples of people using it

http://www.nuclearniches.com/

24 thoughts on “How to install the U.B.B. Ultimate Belcher Button”

    1. Hi Robert if you optin on the main page you’ll get a copy of the UBB in the thank you email, that’s accessible on the homepage.

      That will also get you updates on when the version with the sound comes out.

      Big Thanks!

      Troy

  1. Awesome job!

    I’ll be putting the ubb under test against the Graham button and the standard Belcher button starting tomorrow. I am pretty sure the UBB is going to win for order buttons and may even win for subscribe buttons.

    1. Hi Kristi

      Thanks for the kind words!

      I’m not sure I’ve ever seen the Graham Button before. Got a link?

      If you need a subscribe version let me know what you want on it.

      Troy.

    1. Thanks Justin!

      FYI You can replace them with your own sounds too, just name your mp3 the same as the UBB_rout, UBB_rover etc.

      An upcoming feature is a optional instruction.mp3 and a thank you.mp3 so they could hear your voice.

    1. It depends.

      First I would recommend that you put them on a content delivery network (e.g. AmazonS3) if you have the option.

      Second if you are using WordPress, what you want to avoid is having them erased when the inevitable upgrades happen.

      I’d recommend putting them in a folder outside of the wordpress e..g

      yoursite root:
      /
      /wordpress/ <– all the wordpress files in here.
      /ubb/ <– all the UBB files go in here

      OR

      in a place that wordpress protects

      e.g.
      /wordpress/wp-content/uploads/ubb/ <-create a folder here in your FTP client and upload them their then your html embed would need to reference them

      http://yourblogurlsite.com/wp-content/uploads/ubb/troynotes_ultimate_belcher_button.swf

    1. look inside the for this.
      EXAMPLE: fullprice=297&todayprice=87&paypal=false

      you should see it in 2 places, both are necessary for proper operation.

      That line contains 3 values for the price
      fullprice, the up to 4 digit number on the left crossed out WITHOUT dollar sign (in that example. fullprice=297 shows up as $297)
      todayprice the up to 4 digit number on the right for the actual purchase price WITHOUT dollar sign (in that example. todayprice=87 shows up as $87)
      paypal = (true or false) is whether a blue border appears around the credit cards or not (to indicate that all the credit cards are processed through paypal.

      those values are put 2 times, once for IE, the other for Firefox. e.g.

      the other in the embed tag.

      Both sets have to have the values, else people in different browsers will get different prices!

    1. you put the 4-5 mp3 files in the same folder as the swf

      eg. Say we have created a folder named “ubb” at the root of our website.

      http://www.yoursite.com/ubb/troynotes_ultimate_belcher_button.swf <- the UBB button
      http://www.yoursite.com/ubb/ubb_rout.mp3 <-roll over sound
      http://www.yoursite.com/ubb/ubb_rover.mp3 <- roll out of button sound
      http://www.yoursite.com/ubb/ubb_tock.mp3 <- button release sound
      http://www.yoursite.com/ubb/ubb_tick.mp3 <- button press sound

  2. There are 2 html files in the zip: troynotes_ultimate_belcher_button_using_form.html and troynotes_ultimate_belcher_button_using_hyperlink.html. What is the difference? Your video only mentions 1 html file and it has a different name than either of these.

    1. Hi Cindy,

      Sorry I haven’t had time to get the video up to synch with the zip. Those two html files are working examples as others needed more concrete examples on how to integrate with a form submission (as needed by most opt-in forms or paypal), the hyperlink is an example of how to have the form activate a hyperlink as is needed for clickbank purchases.

    1. Unfortunately , the current version is only good for one per page. I’ll have the feature to allow different ones per page added soon. If you want to be the first to you use it, please send me the info you want at my email troy @ troynotes dot com.

  3. Hi Troy,

    In version 3.0 and you make it so numerics only need to be changed? I would like to see it so alpha-numerics can be changed as well. In other words I would like it so “Today’s Price” & “Regular Price” can be omitted or changed.

    Also when is your expected release date?

    Thanks,

    Justin

    1. Hey Justin,

      Version 3.0 (with the super helpful wizard) will be out later this week, it will have the freely editable text box you requested.

      If you’re opted in you should get notifed as I’ll let everyone know.

      Troy.

  4. Hi Troy,

    I found it interesting that you need to change the price in two places, otherwise IE users would get a different price to Firefox users.

    It got me thinking, what if you did it intentionally, either to test different price points (i.e. split testing, guess you’d have to do it in conjunction with the stats on browser usage), or as a kind of special promotion “gimmick”, or a price just available to certain users (e.g.” just for my subscribers – if you view the page with Firefox you’ll get a special price”).

    But I guess that would get too complicated, and the payment page would just have the one price anyway?

    Though again I suppose if you made the lower price the “real” price, buyers at the higher price would get a positive feeling of having inadvertently received a discount… generating either warm fuzzy feelings or satisfaction at having apparently beaten the system! (Also be interesting to see how many tell you there’s a “glitch” on the payment page…)

    Just some random thoughts late on a Sunday evening 🙂

    Paul
    Kiwi in South West Scotland

    1. Hey Paul,

      The price change is due to the different in plugin architecutres in IE vs Firefox/Mozilla/Netscape.

      The best way to split test prices would be to use PHP with some tracking to use different pages, makes more sense to me to split test based on traffic than by browser. Also that’s kinda how google analytics is setup to split test. You’re right on the product page will have to have the right price setup too.

      It could be warm fuzzies! if they win a discount price. But I’d rather give them a reason why so they know it’s for real and not a problem (e.g. they arnen’t missing something by the discounted price).

    1. Hey Andrew, we’re adding that in the next release (not sure on ETA yet), the animated effect make changing it more difficult than the price line. If you’re opted in you’ll get notified when it’s out.

Leave a Reply

Exposing the seedy underbelly of the internet marketing world + Studying hard, and taking notes so you don’t have to.