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!
About The Author
Last 5 Posts By Michel Fortin
- A Disturbing Trend in Internet Marketing
- Declaring My Independence From Smoke
- 12 Awesome Resources For Design and Copy
- The Need For Long Copy and Other Stupid Myths
- Earn While You Learn... With Us!
About This Post
You can follow any responses through the RSS 2.0 feed. You can respond to this post by sharing it, or trackback from your own site. You may reprint this article provided you leave the content, links, author, and "about the author" section at the end intact.
Category: Articles code, content, copywriter, copywriting, css, faq, html, interactivity, javascript, personalization, salesletter, selling, stylesheet, tips, toggle, window
Other Related Posts
Start Making $10K+ Per Copywriting Project!
Brian McElroy's video lessons show you how to find highly qualified prospects for your services, sell them for instant cash, and get top dollar. Perfect for copywriters and freelancers of all types! Click for more »
16 Reactions
Terry,
I guess the good news is that if you’re interested in actually building a real internet business, with Robust front end, conversion machine and diversified (and stable) back end monetization, the internet is still the most powerful communications and marketing platform ever invented.
My question on the sequential upsells though is:
How long do you think it’ll be before the market gets sick of the upsell scripts with a chain of 3 to 5 or more up-sell attempts?
Thanks for the post.
This comment was originally posted on Internet Business Coaching by Terry Dean
Hi Terry … great post (as always).
I wanted to jump in with my two cents here given our experience at the agency, my own personal projects, and the students I coach.
My very strong opinion at this juncture is that Google (and the other engines will and must follow suit) is interested in SUBSTANTIAL business models, as compared to what they deem “UNSUSTAINABLE” business models.
Think of the “electronic dream”… the hundreds of thousands of vendors who caught the internet marketing bug thinking all they’d need to do is move electrons around the internet and money would appear in their bank account. When this dream is accompanied by the addition of real VALUE to the transaction it makes markets more efficient, reduces complaints, and makes for happy vendors, customers, and media providers.
Unfortunately, what Google’s found is that all too often the electronic dream is accompanied by electronic dishonesty and electronic laziness. And since, given the scale of their operation they need to address this algorithmically (e.g. using robots and software, not human editors), they’re not really capable of making case by case judgments about whether a given site is honestly attempting to provide substance and value.
So with just a few lines of code, out go affiliate review sites, arbitrage sites, PPC traffic brokers… and unfortunately a goodly number of genuinely valuable sites along with them.
Now here’s a problem we all need to be aware of. (And please note this is my well considered opinion only, not hearsay directly from Google, etc)
If you had millions of advertisers promoting millions of sites and you had to make a simple rule of thumb to separate the wheat from the chaff, what would be the absolute easiest way to do so?
Think hard for a second.
It would be to eliminate people who were strictly pursuing the electronic dream. People who “sold air” (yes, I know it’s really valuable air, you’re preaching to the choir)… which unfortunately means you and I as information marketers, at least in the form we currently use to pursue the trade.
What’s substantial and sustainable, in Google’s mind (my opinion only)
are physical products promoted via an e-commerce interface (a shopping cart catalog with multiple categories, items, and the ability to order a multitude of products in one visit via the cart interface).
Now, here’s the thing. I’m of the conviction that we information marketers can rise to the occasion and use our skills to provide such sites BETTER than they’re presently being implemented. And I don’t believe any of this means we have to stop selling digital products, using long copy salesletters, etc.
What it does mean is we all need to be attending to evolving our sites to include some element of more traditional ecommerce with shipment of physcial product IN ADDITION if we want to survive and thrive.
And although the “greased chute” model is so effective for us as direct response marketers, we need to acknowledge and accept that Google is training searchers to prefer the “browse and buy” modality with navigation above the fold. (One of your tabs can still be a long scrolling salesletter)
Anyway – you got me on a soap box.
I hope this was helpful.
Dr. G
This comment was originally posted on Internet Business Coaching by Terry Dean
Hi Terry,
This article you’ve done is really good.
Thank you for sharing your vision!
Regards,
Frederico Vila Verde
This comment was originally posted on Internet Business Coaching by Terry Dean
Hi Joseph:
I definitely agree. And it will be interesting to see what comes down the stream to help us participate in the conversation on our own sites as well.
Hi Gogo:
You will notice if you’ve purchased from me that I don’t have an “upsell scripts with a chain of 3 to 5 or more up-sell attempts.” I do offer upsells though. Those annoy me to no end personally. I’ve had one recently (no names) where after being put through that I committed not to buy from that person again.
I think the best long-term model here could be compared to what Amazon already does. You put stuff in your cart…they recommend other items. You purchase…they recommend items when finished. You then get emails recommending similar items. They have a series of upsells but it is by no means annoying because of how they do it.
Hi Glenn:
Looks like I hit a subject Glenn wanted to talk about! Can I smell a post of your own coming on?
This comment was originally posted on Internet Business Coaching by Terry Dean
Note: Website coming up in next 10 days or so.
Hey, GoGo
RE: too many upsales.
One is OK but more is tedious and I just blast through them.
Terry – Thanks for the post. Very insightful.
This comment was originally posted on Internet Business Coaching by Terry Dean
What surprises me, is that someone else is seeing these things. I was on the I=sales list in the early years (pre 2000), and we all saw most of this then. The Internet has changed the wold as we know it. People have been exposed to so much dishonesty, spam, etc. that even a hint of it turns them off. The “upsell funnel” practice is so close to dishonest that I personally won’t use, or recommend it.
As far as Google is concerned, there has to be a recognition of who *their* “buyer” really is. They exist to supply quality search information, to the searching person. They cannot be 100% no matter how hard they try. Perfection is impossible, but they will try. _I_ believe that info sellers can compete, by following basic rules. Provide products that your customers want; be _Honest_ at all times; carry on a conversation, do not preach at, or talk at, the potential customers.
Finally, use the three basic laws of advertising© to advertise effectively. I’m close to releasing a book on that subject, for small businesses (the ones that most need it).
None of this is really rocket science, all it takes time and willingness to study what’s happening. Looking at things with an open mind, and listening to the real experts. There are maybe 40–50 in actual fact, but 100’s that claim to be. Most are too busy making a living, to make themselves known. They can be found on lists, and only very rarely in the “get rich quick” ad’s. They are known for producing actual material, of real value. They share their knowledge if you really want it. Mostly, work hard, sell useful material, and be honest and ethical in your dealings. The same rules that have always worked.
This comment was originally posted on Internet Business Coaching by Terry Dean
I’ll make this disclosure up front – I’m an attorney, and I spend a lot of time with clients getting their websites “legal”. I’ve even automated the process to make it very cost effective, and easy.
If you haven’t noticed, one of the other trends that began this year, is now picking up steam, and surely will continue in 2010 is increased regulation of website businesses.
You’re probably aware of how aggressive the FTC has been lately with privacy and data security issues, and this month their “FTC Guides” went into effect. The FTC Guides regulate advertisers, endorsers, and bloggers regarding the obligations for (i) advertisers to monitor affiliates and bloggers, and (ii) for bloggers to disclose relationships with advertisers.
It’s true that the days of the “wild, wild west” are gone, and that goes for legal issues in operating a website business. And in this new environment, it’ll be a smart move to get your site “legal” for the new year.
Chip Cooper
PS – I’ve written several larticles on the subject of the FTC Guides and they’re on my site if you’re interested.
This comment was originally posted on Internet Business Coaching by Terry Dean
Yes I have to agree with one of the comments that it is very had to split the honest websites from dishonest websites. That sometimes the honest ones get in the dishonest list. I am going to read more of the comments and blogs because these tips and ideas are very helpful.
This comment was originally posted on Internet Business Coaching by Terry Dean
Each year there are predictions about what the next year will bring. However radical changes seldom occur. Its a gradual shift in all these points that we tend to magnify when we look at them individually. Let the next year be better than this one.
Merry Christmas and a Happy New year!
This comment was originally posted on Internet Business Coaching by Terry Dean
Hi Terry, I listened to you on the Fred Gleek radio show and thought you were great. Thanks, Ed
This comment was originally posted on Internet Business Coaching by Terry Dean
No predictions about Google or Bing? In regards to more useful content, I’m wondering what the future of paid subscriptions are for this content. With all the spammer scrapping stuff going on, I could see real sites getting people to pay for their content.
This comment was originally posted on Internet Business Coaching by Terry Dean
Terry,
I think you’re right on “Amazon’s upsell model”.
For years I’ve been a customer at Vistaprint.com and I find it amusing how much more stuff I end up buying from them because the suggested items are always so closely related to what I’ve already bought.
Thanks for the post and the reply.
Gogo
This comment was originally posted on Internet Business Coaching by Terry Dean
Thanks for the predictions Terry.
Yes, seo is a links game, and links don’t necessarily equal quality. I don’t know how the engines will address this, but it does seem clear they will try.
The long copy sales page being replaced by interactive pages (ie. good web design) that puts the reader in control of the experience? Wow!
I got a smile when reading that Mike Fortin is offering this new feature now, given that it could have been ten years ago that I argued for interactivity in sales page on his forum and others, only to be told again and again by the marketing “experts” that interactive was all wrong, Wrong, WRONG!
Links. They’ve been here since the invention of the Net. It’s great to see the marketing pros finally catching on to them.
This comment was originally posted on Internet Business Coaching by Terry Dean
I’m a huge fan of point #1.
Google is known to favor informational sites in the rankings, and I’d love to see this increase.
The importance of incoming links is unnaturally high, in my opinion – no pun intended.
This comment was originally posted on Internet Business Coaching by Terry Dean
Great article Terry. Thanks for sharing it. And the most important thing that i feel in this whole article is about having real useful content cause it all about how you portray yourself and also Google love new and fresh content in the world of SEO
This comment was originally posted on Internet Business Coaching by Terry Dean
How To Tap The Hidden Gold In Your List
The gold is not in your list, it's in the relationships with your list. Streaming video lessons show you how to unearth the hidden gold with proven strategies to build, nurture, and monetize your list -- the right way! Click for more »
Additional comments powered by BackType
Terry,
Right on man…great post.
Adding one more IMHO…
6. Joining your own conversation will become more important (transparency).
The Internet has always made it possible for people to provide feedback on a product, service, person, or company. It will become more and more important for Internet Marketers to participate in their “own conversation”…either by starting that conversation themselves or participating in one that has already started (good or bad).
Transparency will become a very important currency in 2010 (not that it isn’t now, but it will become increasingly important).
This comment was originally posted on Internet Business Coaching by Terry Dean