How To Create Randomized SlideSense On Every Page Load

I hope you have had a chance to try out our latest advertising tool – SlideSense. If not, check out this free tool here and then come back here to learn how to add more stunts to it.

So far, you can only use SlideSense to promote 1 offer at a time. If you want to promote another offer, you’ll have to create another SlideSense and replace it with the first one.

What if you have a few promotions to make? Or you want to create different version of SlideSense to see which one is more effective?

This is possible IF there is a way to create different SlideSense animations and randomly show them to your visitors, meaning to say, your regular visitors will see a different promotion whenever they visit your website.

(Special thanks to our member, Miriam, for suggesting this idea.)

I thought this is a great idea. After doing some research, I found a way to do it.

You’ll need to manually do some changes to the SlideSense code generated, but as I always say, it’s not rocket science.

Ok, here’s how to do it:

1) Generate your SlideSense code

First, you have to generate different versions of SlideSense for testing or different offers, using the standard SlideSense generator. It can be a mixture of text-ad and opt-in SlideSense.

Save the codes in a text file for later reference. Each code should look similar to this one:

<!– Start of LeadsLeap SlideSense Code –>
<div style=”position:absolute;top:-2000px”><img src=”http://www.leadsleap.com/slidesense/01left.png” /><img src=”http://www.leadsleap.com/slidesense/01filler.png” /></div>
<script language=”javascript”>
ss_options=
{
ss_speed: 1000,
ss_remove_click: true,
ss_direction: “bottom”,
ss_url: “http://www.leadsleap.com”,
ss_target: “_blank”,
ss_delay_start: 0,
ss_display: “every_visit”,
ss_color: “#EBEBEB”,
ss_html: “<span style=\”font-family:Arial;font-size:17px;color:#FFFFFF\”><b>Sample 1</b></span><br /><span style=\”font-family:Arial;font-size:14px;color:#FFFF00\”><b>This is another demo.</b></span>”,
ss_left_pic: “http://www.leadsleap.com/slidesense/01left.png”,
ss_background_url: “http://www.leadsleap.com/slidesense/01filler.png”,
username: “”
};
<script src=”http://www.leadsleap.com/slidesense/js/slidesense.js” type=”text/javascript”></script>
<!– End of LeadsLeap SlideSense Code –>

2) Combine the codes into one code

Next, you have to combine all the codes into one code using the template below:

<!– Start of LeadsLeap SlideSense Code –>
<div ….. >…..</div> // Refer to Step 2
<script language=”javascript”>
var howMany = 3;
var ss_rotate=new Array();
ss_rotate[0]=
{
  ss_….. // Refer to Step 3
};
ss_rotate[1]=
{
  ss_….. // Refer to Step 3
};
ss_rotate[2]=
{
  ss_….. // Refer to Step 3
};
var ss_options = ss_rotate[Math.round(Math.random()*howMany)];
</script>
<script src=”http://www.leadsleap.com/slidesense/js/slidesense.js” type=”text/javascript”></script>
<!– End of LeadsLeap SlideSense Code –>

Follow the following steps to combine the codes into one……

Step 1 – Customize the template

The template above is for rotating 3 SlideSense animations.

If you have 4 SlideSense animations, you’ll define howMany as 4 and you’ll have ss_rotate[0], ss_rotate[1], ss_rotate[2] and ss_rotate[3].

The rest of the code are unchanged. You can rotate any number of SlideSense animations.

Step 2 – Combine the <div ……> …. </div> line from all the codes, omitting repeated images.

The line <div ……> …. </div> is used to preload the images required to ensure smooth animation. If all your SlideSense animations use the same set of images, you’ll only have one line of <div ……> …. </div>. If all the animations use different set of images, you’ll need to include all the <div ……> …. </div>.

(Don’t understand? Don’t worry. When you see the example below, you should know what I mean.)

Step 3 – Copy and paste the parameters in the ss_options in EACH of the SlideSense code into ss_rotate[ ]

ss_rotate[ ] can be ss_rotate[0], ss_rotate[1] etc, depending on how many SlideSense animations you’re going to rotate. Take note that you always start with [0]. So if you have 3 animations, the first ss_options from the first animation will go into ss_rotate[0].

(Don’t understand again? Don’t worry. See the example of the final combined code below.)

After combining all the codes, the final code will look like this:

<!– Start of LeadsLeap SlideSense Code –>
<div style=”position:absolute;top:-2000px”><img src=”http://www.leadsleap.com/slidesense/01left.png” /><img src=”http://www.leadsleap.com/slidesense/01filler.png” /></div>
<div style=”position:absolute;top:-2000px”><img src=”http://www.leadsleap.com/slidesense/03left.png” /><img src=”http://www.leadsleap.com/slidesense/03filler.png” /></div>
<script language=”javascript”>
var howMany = 3;
var ss_rotate=new Array();
ss_rotate[0]=
{
ss_speed: 1000,
ss_remove_click: true,
ss_direction: “bottom”,
ss_url: “http://www.leadsleap.com”,
ss_target: “_blank”,
ss_delay_start: 0,
ss_display: “every_visit”,
ss_color: “#EBEBEB”,
ss_html: “<span style=\”font-family:Arial;font-size:17px;color:#FFFFFF\”><b>Sample 1</b></span><br /><span style=\”font-family:Arial;font-size:14px;color:#FFFF00\”><b>This is another demo.</b></span>”,
ss_left_pic: “http://www.leadsleap.com/slidesense/01left.png”,
ss_background_url: “http://www.leadsleap.com/slidesense/01filler.png”,
username: “”
};
ss_rotate[1]=
{
ss_speed: 1000,
ss_remove_click: true,
ss_direction: “bottom”,
ss_url: “http://www.leadsleap.com”,
ss_target: “_blank”,
ss_delay_start: 0,
ss_display: “every_visit”,
ss_color: “#EBEBEB”,
ss_html: “<span style=\”font-family:Arial;font-size:17px;color:#FFFFFF\”><b>Sample 2</b></span><br /><span style=\”font-family:Arial;font-size:14px;color:#FFFF00\”><b>This is another demo.</b></span>”,
ss_left_pic: “http://www.leadsleap.com/slidesense/03left.png”,
ss_background_url: “http://www.leadsleap.com/slidesense/03filler.png”,
username: “”
};
ss_rotate[2]=
{
ss_speed: 1000,
ss_remove_click: true,
ss_direction: “bottom”,
ss_url: “http://www.leadsleap.com”,
ss_target: “_blank”,
ss_delay_start: 0,
ss_display: “every_visit”,
ss_color: “#EBEBEB”,
ss_html: “<span style=\”font-family:Arial;font-size:17px;color:#FFFFFF\”><b>Sample 3</b></span><br /><span style=\”font-family:Arial;font-size:14px;color:#FFFF00\”><b>This is another demo.</b></span>”,
ss_left_pic: “http://www.leadsleap.com/slidesense/01left.png”,
ss_background_url: “http://www.leadsleap.com/slidesense/01filler.png”,
username: “”
};
var ss_options = ss_rotate[Math.round(Math.random()*howMany)];
</script>
<script src=”http://www.leadsleap.com/slidesense/js/slidesense.js” type=”text/javascript”></script>
<!– End of LeadsLeap SlideSense Code –>

That’s all. Just copy and paste the combined code to your webpage as usual and you will see different version of SlideSense being randomly loaded whenever you load that webpage.

Special note: If this is your first time using SlideSense, you should start with single SlideSense. You can try creating randomize SlideSense only when you are sure that single SlideSense works on your site.