How to Make Salesletters Interactive

Press the profit buttonRemember 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

About the Author


Share
Category: Copywriting / Selling / Tips
This post was written on Friday, June 1st, 2007. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Confessions Of A Website Copywriter

Confessions Of A Website Copywriter

New! Possibly the Internet's best copywriting ebook on how to write proven sales copy for the Internet, from writing and web design, to testing. Highly recommended! Click for more »

  • Hi Michel,

    This is very interesting. I have saved your article to a word document, will definitely be using this technique!

    Fabian
    http://www.MurderYourJob.com
  • Michel,

    Once again...you prove to be a genius...

    I am definetly not a technical person, I usually outsource it.

    But you formatted this in a way, I can actually do it. Thank you.

    Joseph Ratliff
    http://www.profitpartnersconsulting.com
  • Oh yeah!

    Slick stuff, Michel.

    I love it and have already thought of different ways I can use this in my next sales letter.

    Thanks once again for posting some excellent content to one of the best blogs on the internet.
  • Great post Michel... I love the idea of keeping them on the page while still delivering them the extra content. First time I have seen this used on a salesletter.
  • Wil
    Hi Michel,

    My site has a long sales letter - while it might be okay for some, I did receive feedback from others, saying that it is a tad too long for their liking (though one of which was from the same person who bought the product).

    With the information that you have provided, at least now I know my what my options are.

    Cheers
    .
  • What a neat idea, Michel. It makes a long sales letter look less daunting. In a way, it personalizes the letter by letting the reader click on the parts she finds most interesting. Thank you for the idea.
  • Thanks Michel !

    That landing/sales page is a great example too.

    I'll send a coffee your way. Enjoy !
  • I never thought it was possible to do that. Thanks for posting.
  • Thank you to all of you who bought me a coffee! I just got myself a nice bag of Komodo Dragon coffee from Starbucks.

    :)
  • Michel,

    Thanks! This is great.

    My first test in IE works as advertised, however in FireFox is doesn't hide - so I'm looking into why...


    Ernie
  • Ernie, where's the URL? I can take a look at it...
  • I see the problem...

    You have the script pasted twice in the head tags, and the first time it's within the stylesheet where it doesn't belong. Just delete it.
  • For example, rather than what you have now:

    <style type="text/css">
    <!--
    .style16 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 12pt; }
    .style82 {color: #000000}
    .style83 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
    }
    .style86 {
    font-family: Tahoma;
    font-size: 28pt;
    }
    .style88 {
    font-family: Tahoma;
    font-size: 16pt;
    font-weight: bold;
    color: #330099;
    }
    .style89 {font-size: 16px}
    .style91 {font-size: 14pt}
    .style93 {
    font-size: 18;
    font-family: Tahoma;
    }
    -->
    <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><style>
    <!--
    div#hiddenContent {display: none;}
    -->
    </style>
    <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>


    Replace it with...

    <style type="text/css">
    <!--
    .style16 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 12pt; }
    .style82 {color: #000000}
    .style83 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
    }
    .style86 {
    font-family: Tahoma;
    font-size: 28pt;
    }
    .style88 {
    font-family: Tahoma;
    font-size: 16pt;
    font-weight: bold;
    color: #330099;
    }
    .style89 {font-size: 16px}
    .style91 {font-size: 14pt}
    .style93 {
    font-size: 18;
    font-family: Tahoma;
    }
    div#hiddenContent {display: none;}
    -->
    </style>
    <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>
  • Thank you for the tutorial, I saw that already on some websites like Jack Humphrey ASC, and I was wondering how to do it.
  • Hi Michel

    Yes, this is the way I envisage sales letters will go - more interactivity. After all, this is the Internet! (I've just completed a script which personalizes streams of traffic, so I'm all for interactive sales letters) .

    Thanks for sharing the code. It doesn't seem to work on Opera, even with Javascript enabled - it just shows the full version of the text.. but I guess most surfers use IE anyway.

    Post duly bookmarked!

    Paul Hancox
    http://www.trafficpersonalizer.com
  • Paul,

    Nice to see you here!

    (I highly recommend ANY of Paul's products. His SalesPageMaster was one of the first split-testing tools I've ever used.)

    Not sure about Opera, since it has the code for W3C-compliant browsers -- I'll do a bit of snooping to see what I can come up with...
  • Thanks for the kind comments, Michel. Do you think I'd be able to use the bracketed comment as a mini-testimonial?

    I'll be testing the code on my site soon... I like the idea of using it to personalize a site. It could also be useful for those feature bullet points - maybe a "Tell Me More..." at the end of each bullet, which opens up an extra couple of paragraphs going into more detail about that feature.

    I can see the possibilities...!

    Paul Hancox
    http://www.trafficpersonalizer.com
  • Absolutely! Please do.
  • Hello Michel

    Great article! I think it will improve readability a lot.

    I'm curious for which purpose other readers will use it for? I see you can use it to hide testimonials or bullets for example, but can it be used for the following: when people come to your 30-page salesletter, it's very demotivating to see such a long text. Is it possible to use the technique to reveal more text when visitors scroll down? So it automatically shows a couple of paragraphs further down?

    Thanks, I'll certainly use the technique! Keep up the great work

    Regards

    Christof
  • Nice tutorial Michel.

    I've been using similar code to lighten my sales letter for about a month and it seems to work well. Scroll down at the bottom and check the links under "Still have questions?":

    http://www.sleeptracks.com

    I'll probably use it more extensively (and subtly) in the future.
  • @Christof:

    Yes, precisely. That's another way of doing it. I mentioned this in my article, above. There's a javascript call called "OnScroll" and placing it in specific locations. Once people reach those locations, the content opens up.

    Don't ask me the code, because I'm no geek. But I know it can be done. Here's a very simple example of how it works in general:

    http://www.java2s.com/Code/JavaScript/Event-onM...
  • Frank
    Michel,

    In reviewing my link that you mentioned in your post (http://www.websitecrashcourse.com used in Mary Mazzullo's testimonial)

    And seeing Paul's comment on Opera I HAD to check my code it seems the version of the code that I have on that page works in opera ver 9.10 your readers are welcome to visit that site and use the code if they need or want to be Opera compliant as well.

    When do you think all browsers will use the same standards?

    Thanks for your awesome articles!
  • Hi Michel,

    This is my first post at your blog, but I have been reading your great content for several months now.

    Just like to thank you for all the GREAT copywriting techniques you posted here. In fact, I am using your QUEST method which you posted recently about writing a sales letter.

    Now I know how to shorten long sales letters to get them to look more appealing. Really learnt a lot from you!

    Thanks Michel!
  • Deborah Mitchell
    This is really great article. The usability of the website is a helpful strategy on making your visitor stay. If your website have a understandable killer content and is easy to use or navigate the possibility for the visitor to stay and later purchase your product. Also your copy should have the right tone for you to persuade the costumers to buy and try your product or services.
  • Loren Woirhaye
    I guess it's a fair guess that the scripting has been removed from here because it does not work.
  • @Loren Woirhaye - Nope, it's a switch to a new blog theme, which seems to be parsing the code rather than simply writing it to the post.

    I'll try to fix it...
blog comments powered by Disqus
Start Making $10K+ Per Copywriting Project!

Start Making $10K+ Per Copywriting Project!

New! Brian McElroy's video lessons show you how to find highly qualified prospects for your services, sell them for instant cash and easily get top dollar. Perfect for copywriters! Click for more »