Part A: Evaluating your options, and setting up
an action plan.
The first thing you need to do is decide what you want to use pop-ups for
and where you want them.
Remember, don't overuse this medium. One well-designed, respectfully
implemented pop-up will explode your business and as much as double the
money you make. But two can offend people. And three may even generate
complaints!
Show respect to your users and they'll reward you for it. Start with
something simple. Here are three easy options:
Generate opt-in names for a mailing list or newsletter.
We aren't going to get into why you should maintain an opt-in list of
prospects. If you are a subscriber to our newsletter, you already know if
you build up a list of prospects you can solicit over and over again, you
could potentially retire! For specifics about what to do with the names
once you have collected them, check out The Online Marketing Letter and
Planet Ocean's New E-Mail Marketing Course.
Make a "second chance" offer with an exit pop-up.
If you have a newsletter and the prospect doesn't buy, offer a few free
issues. If you sell an e-book, give away a few chapters. An exit pop-up
gives you the opportunity to see if a prospect is legitimate, as well as
collect their name and e-mail address. (Trust us, if someone won't
download a sample or give you contact information, they aren't a real
prospect).
Drive traffic to an alternative site or affiliate page.
If you have a second site, you can pop-it up on exit like Marlon
Sanders does. Or you can pop-it behind the viewer's window so they see it
only after they are done on your site! Use this technique to send visitors
to affiliate pages. You could even make a deal with a friendly competitor.
(If your visitors aren't going to buy from you, at least you can still
make money!)
Part B: Basic pop-up templates you can implement
quickly.
Note: For the do-it-yourselfer, all code in this tutorial is placed in
text boxes because it enables you to copy the code and place it directly
into the HTML tab in FrontPage. Traditional Web page text cut and
pasted into the FrontPage interface would include the markup tags for the
Web page and be a plane mess. Make sure to copy all of the code for
each of these examples if you are going to go that route. More
information on working with the code in this tutorial using FrontPage can be
found
here.
And, obviously, if you are going to use
SCRIPTOR to make your popups for you, you'll want to click
here.
Below you'll find the actual code you put in your Web page to activate a
pop-up window. Remember, you'll also need to create your pop-up page, which
we'll cover in the next section. Because this is essentially an information
product, we are not able to provide tech support for the installation of
these examples into your Web page.
New Window Pop-up
This code is so simple you don't even need to know Java! It's a basic
html command that opens a new window when a link is clicked! An example of
what this looks like in action can be found by
clicking here.
To implement this, all you need to do is modify your link URL.
Instead of www.yourpopup.com, you'll need to enter in the URL of your popup.
Entrance Pop-up
This is the most basic type of pop-up code. Put it on any Web page, and
it will open a window instantly when someone visits. It should be copied and
pasted between the <head> and </head> tags on the top of page you want the
pop-up to appear on.
It looks like this:
www.yourpopup.com should be replaced with the address of
your pop-up window. For example, if you want to make a pop-up that displays
Microsoft's home page, you would change the part in red to
"www.microsoft.com".
Entrance Pop-up with Scroll Bars
This is just like a standard Entrance Pop, but we'll be turning off all
the features of a "normal" browser window except Scroll Bars. We will also
set the size to 350x350.
It looks like this:
The address in the script is the address of your pop-up window. For
example, if you want to make a pop-up that displays Microsoft's home page,
you would change the part in red to "www.microsoft.com".
Exit Pop-up
This code should be copied and pasted between your head tags just like in
the Entrance Pop example, and then you'll need to read below for one more
minor addition to complete your installation.
Again, the Web address is the address of your pop-up window. For example,
if you want to make an exit pop-up that displays Microsoft's home page, you
would change the part in red to "www.microsoft.com".
In order to make this popup run when a user leaves your page, you need to
add something to your body tag. It is an event called "OnUnload." Let's say
your <body> tag looks like this:
In order to make the exit pop work, just add the OnUnload="event" to the
end of the body tag like this:
So to make your exit pop-up work, you just need to make these two simple
changes to your page. Add the code above between your
<head> tags, then add the OnUnload command inside your
<body> tags. That's it! Now whenever a person
leaves your Web site, you have a second chance to generate a lead or sale.
Cookie Enabled Pop
This is the most sophisticated pop-up offered in this course, and you'll
probably want to spend a couple of dollars to have a programmer help you
install this, but when used properly, this is a very effective solution.
Basically, this pop-up offers your visitor the courtesy of only giving
them your pop-up once in any time span you choose. Let's say you have an
information site, and your customers come there a couple of times a day.
Well, instead of always bombarding them with the same pop-up, you can use
this pop-up to only display once a day, or once a week for that matter.
To view the code and notes for the Cookie Enabled Pop,
click here now.
Part C: Designing your pop-up page.
This step is the most important part of the process. It's time to create
the pop-up page that appears when someone goes to your site.
Obviously, create your pop-up page in FrontPage. You know how to do
that, save it to your Web site.
If you use graphics, make sure to keep your pop-up file size as low as
possible so it loads quickly. Nothing is more frustrating than a big pop-up
that covers the screen, and then takes 45 seconds to load!
Here is our step-by-step plan for implementing your pop-up page.
- Choose the JAVA code you want to use from the above examples. Insert
it on the page you want the pop-up to appear on. Make up a name like
popup01.html for your pop-up window and include it in the JAVA code
where applicable.
- Create a blank html document for your pop-up window, and name it
popup01.html. (It must match the name you used in the JAVA code).
- Size the document within a single centered html table, about 30
- 40 pixels less in width than the size you specified in your JAVA
code. Set your height accordingly.
- Create your pop-up using html and/or graphics.
- Test it before you load it to your site, and tweak as necessary.
You'll probably have to go back several times to reset the width and
height, as well as change the spacing and layout to make it fit and look
good. However, when you get it right, you end up with
something like this.
Remember, your surfers will be navigating directly from the pop-up. Use
New Window commands on links so new browser windows open up independent of
your pop-up.
If you use an opt-in form, make sure your thank you page (also called a
confirmation page) is the same size as your pop-up since it will load inside
the pop-up after the form is submitted and you don't want it to look funny.
Also, consider making the pop-up easy to close by including a close button.
Need a hand? Here are three pop-up page examples for you to cut and
paste. Just click on the links below for the full code.
Section 6: Bonus
Pop-up modification cheat sheet
