How to Make Salesletters Interactive
In The Death of The Salesletter, I talked about hiding content so it could open up based on a user’s actions and thereby personalizing the salesletter, dynamically, on the fly.
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.
What does using this tactic help to do?
In some cases, people break salesletters down into various pages, and add links to them in the letter. I don’t recommend this with long-copy salesletters. Traditionally, I recommend that the extra content opens up in a pop-up window instead, as to not distract.
But with this tactic, and other than the potential for personalization, which is its biggest benefit, it means that people reading a salesletter don’t have to be bothered by…
- Opening up annoying pop-ups;
- 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;
- 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, which may lose readers before they even begin reading.
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. I call them “smart salesletters.” But this tactic 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 and 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 readers interact with salesletters.
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 available online. There are tons of these out there.)
If you have a basic understanding of HTML, this will be relatively easy. First, add a bit of javascript code in the page’s HTML <head> tags (just before the closing </head> tag):
<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 inside the page’s head tags or in your CSS stylesheet, if you’re using an external CSS file to manage all your styles, which hides the content:
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. 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. A name is labeled “ID.” In this case, I called it “hiddenContent” so that 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, the link should look like this:
<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 (that is, unhide some content while hiding others), appear on other pages (usually 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. When you do, it opens up on the same page.
Neat, huh?
Now, what if you have multiple areas you wish to hide/unhide, individually, on the same page? You don’t want all the hidden pieces of content to unhide simultaneously.
There is a way to do this.
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), and its own corresponding link, so that the scripts can do its magic to that specific block of content and not the others.
In the link that will expand or contract the specific content, simply pass each ID individually. That way, by clicking on a specific link, it opens its related content. 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? In other words, you click on one link, and it opens up several if not all the pieces of content simultaneously?
Simply, name your “div” sections as above. Then add this Javascript function in the “head” tags, which loops through all of the “div” tags on the same page, 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. For example, you can do it with videos. If the video starts playing automatically, then the video will only start playing as the video opens up.
You will likely see more and more of this as time goes by. So keep your eyes peeled!
.
Other Related Posts
