How to Make Salesletters Interactive

Remember when I talked about hiding content, in my free report The Death of The Salesletter, so it could open up based on a user’s actions and thereby personalizing the salesletter (and also making it short)?

You can hide content on the same sales page, making the page look shorter and less intimidating. And only desired content appears depending on a user’s choices.

In some cases, people break salesletters down into various pages, and add links to them in the letter. Traditionally, I recommend to my clients that they have the extra content open up in a pop-up window, as to not be distracted.

What does using this tactic help to do? Other than the potential for personalization, it means that people don’t have to be bothered by…

1. Opening up annoying pop-ups;
2. Being distracted such as opening another page (where you run the risk of them never coming back to the salesletter or, worse yet, come back but having lost the momentum they’ve gained by reading to that point);
3. Or being intimidated by the appearance of a v-e-e-e-r-r-r-r-y long letter when they really don’t need all of it.

This process, called "toggling", is done with a simple bit of javascript code and CSS.

Essentially, you insert the content you wish to hide between two <div></div> tags in the HTML code, and make it hidden using CSS (i.e., “cascading style sheet”).

When people click on a link, the content “unhides” and opens up on the same page. The link doesn’t have to be near the content. It can be anywhere on the same page.

Links are not the only triggers, either. If the user performs any kind of action, whether it’s clicking a link or an image, scrolling to a specific area of the page, watching a video or audio, or pressing a form button (like a submit, checkbox or radio button, for example), it can still work the same.

Admittedly, I’ve seen some truly creative, out-of-this-world ways of applying this. But this is just a very basic way of doing it.

And it won’t work on javascript-disabled browsers (I’ve seen slick Flash salesletters accomplish this better). But it will work on 98% of browsers out there, if not more.

(Keep in mind, more browsers have pop-up blockers than they do have their javascript disabled. So this technique is the lesser of two evils.)

Bottom line, toggling content as a basic way of interaction is really simple and possibly the easiest way to make salesletters interact with the reader. But granted, not everyone is a techie. (I’m certainly not.)

So to help you, here’s some coding and a bit of a tutorial to help you. (And what follows is just a basic example I copied from some tutorials out there.)

The first thing you do is add a bit of javascript code in the page’s HTML head tags (just before the closing </head> tag is fine):

<script language="javascript">
function showHide(element) {
if (document.getElementById) {
// W3C standard
var style2 = document.getElementById(element).style;
style2.display = style2.display ? "" : "block";
}
else if (document.all) {
// old MSIE versions
var style2 = document.all[element].style;
style2.display = style2.display ? "" : "block";
}
else if (document.layers) {
// Netscape 4
var style2 = document.layers[element].style;
style2.display = style2.display ? "" : "block";
}
}
 </script>

Then, you add the style to the head tag, too (or in your CSS stylesheet, if you’re using an external CSS file to manage all your styles):

div#hiddenContent {display: none;}

If you’re adding it directly to the web page, place this in between your <style> tags, inside the head tags as well (before </head>). So the whole thing would look something like this:

<script language="javascript">
function showHide(element) {
if (document.getElementById) {
// W3C standard
var style2 = document.getElementById(element).style;
style2.display = style2.display ? "" : "block";
}
else if (document.all) {
// old MSIE versions
var style2 = document.all[element].style;
style2.display = style2.display ? "" : "block";
}
else if (document.layers) {
// Netscape 4
var style2 = document.layers[element].style;
style2.display = style2.display ? "" : "block";
}
}
</script>
<style>
<!--
div#hiddenContent {display: none;}
-->
 </style>

That’s the hardest part.

Next, what you simply do is wrap the content you want to hide around “div” tags, and call it a name. In this case, I called it “hiddenContent” (so it matches the style in your stylesheet, above). For example:

<div id="hiddenContent">
Blah, blah, blah.
 </div>

Next, you need to determine which link will toggle the content. You can add this to any link on the page (like a question, for instance), or to a link that specifically asks for the content, such as “click here to view the testimonials.”

All you do is add a javascript call to the link that tells the page to “unhide” the content placed between the “div” tags earlier. For instance:

<a href="javascript:showHide('hiddenContent');">
Click here
 </a>

And that’s it! You’re done.

Now, what if the content is not directly requested in the link, and the content simply “opens up” when another link, for anything else, is clicked? Simple. All you need to do is add the “onClick” string to the link of your choice.

Let’s say there’s a link to a section of the same page called “whatever” (these care called “bookmarks”). When someone clicks on that link and jumps to that bookmark, the hidden content also opens up. Here’s an example:

<a onclick="javascript:showHide('hiddenContent');" href="#whatever">
Whatever
 </a>

You can add this to any link, including graphics, pages, or sections.

Again, this is not limited to links. You can use it with different mouse actions, such as “onSubmit,” “onMouseOver,” “OnScroll,” and others. There’s a javascript call for pretty much every mouse action a reader takes.

Plus, hiding and unhiding content are not the only things you can do — you can make content fly in, change (unhide some content while hiding others), appear on other pages (using cookies), and much, much more.

Nevertheless, here’s a great example of it in action.

An opt-in landing page I worked on for Brian Keith Voiles offers a free report. The landing page was already quite wordy, and initially we had a link to the table of contents, which opened up in a separate window.

So rather than push people away, we decided to toggle the content on the same page. Simply scoll down about halfway, below where the testimonials are, and click on the link to the table of contents.

Neat, huh?

Now, what if you have multiple areas you wish to hide/unhide, individually and each with its own link, on the same page?

If you are adding more than one area, then each section you wish to hide must have its own “div” with its own unique name (or ID), so that the scripts can do its magic to that specific block of content.

Then, in the link that will expand or contract the content, simply pass each ID individually. For example:

<a href="javascript:showHide('hiddenContent_1')">
Click here
</a>
<div id="hiddenContent_1">
Piece of content #1
 </div>

And then for the other…

<a href="javascript:showHide('hiddenContent_2')">
Click here
</a>
<div id="hiddenContent_2">
Piece of content #2
 </div>

And don’t forget to add the “div” style and its appropriate ID in the stylesheet for each section (you can have as many as you wish). For example:

<style>
<!--
div#hiddenContent_1 {display: none;}
div#hiddenContent_2 {display: none;}
-->
 </style>

That’s all there is to it. But, what if you want all the toggled content to hide or unhide with a single gesture (such as clicking a single link)?

Simply, name your “div” sections as above. Then add this Javascript function in the “head” tags which loops through all of the “div” tags, and calls the existing “showHide” function on each one that it finds:

function showHideAll() {
var cCommonDivName = "hiddenContent_";
var arrDivs = document.getElementsByTagName('div');
for(i = 0 ; i < arrDivs.length ; i++) {
if (arrDivs[ i ].id.match(cCommonDivName)) {
showHide(arrDivs[ i ].id);
}
}
 }

So your HTML, in the “head” tags, would look something like this:

<script language="javascript">
function showHide(element) {
if (document.getElementById) {
// W3C standard
var style2 = document.getElementById(element).style;
style2.display = style2.display ? "" : "block";
}
else if (document.all) {
// old MSIE versions
var style2 = document.all[element].style;
style2.display = style2.display ? "" : "block";
}
else if (document.layers) {
// Netscape 4
var style2 = document.layers[element].style;
style2.display = style2.display ? "" : "block";
}
}
function showHideAll() {
var cCommonDivName = "hiddenContent_";
var arrDivs = document.getElementsByTagName('div');
for(i = 0 ; i < arrDivs.length ; i++) {
if (arrDivs[ i ].id.match(cCommonDivName)) {
showHide(arrDivs[ i ].id);
}
}
}
</script>
<style>
<!--
div#hiddenContent_1 {display: none;}
div#hiddenContent_2 {display: none;}
div#hiddenContent_3 {display: none;}
-->
</style>
 </script>

And you can call the function like so:

<a href="javascript:showHideAll()">
Toggle everything
 </a>

And don’t forget, you can also switch them, such as having the content visible and hide it once a user clicks on the link. Simply change the word “block” to “none” in the javascript, and “none” to “block” in the CSS’ “div” style.

Want to see multiple links in action?

My friend Frank Deardruff, the creator of the AskDatabase.com software (a service I highly recommend, too), uses this script for his “frequently asked questions“ page.

Frank also uses it for lengthy testimonials on his Webmaster Crash Course letter. Scroll about halfway down to the testimonials section, and go to the last one in the bunch.

It’s from another friend of mine, professional photographer Mary Mazzullo, the lady with the camera in her hands. Click the “read more” link at the end of her testimonial.

(Mary, by the way, is not only the photographer we chose for our wedding, but also the one who took those new pictures of me. One of them is at the top of this website!)

Another great copywriter and friend of mine, Ray Edwards, uses it on a letter he wrote for Jack Canfield. He was able to fit the FAQs into the sales letter but still keep the letter feeling “lighter” on copy. (Just click in the “FAQs” link at the top.)

Aside from toggling testimonials, FAQs, and wordy blocks of content, you can use this technique in various ways — and you will likely see more and more of this as time goes by. So keep your eyes peeled!

Last 5 Posts by Michel Fortin

• Social Media Isn’t Dead, But It Can Be Deadly
• How to Extract Doubt From Your Sales Copy
• It’s Not About Facebook, It’s About Integrity
• Did Larry Winget Go Overboard?
• The Oft-Confused Features And Benefits

About the Author