How to create a Splash Popup "Widget" for $0

Follow

Definition

A splash popup is a modal window that contains an image and a link. That's it. As for a modal window - well that's a fancy phrase for a small window that opens up and doesn't let the website visitor take action until it is closed or clicked on.

This "widget" doesn't really have any interaction with MINDBODY, but it's a neat thing to have on your site to draw attention to an offer or a specific feature. We've seen companies charge for this, but it's such a simple concept and so easy to create that we want to show you how to create it for $0.

In the end, it looks something like this (except with your image, of course):

Screen_shot_2010-12-02_at_10.07.33_PM_normal.png

What you need

An image. You will need an image to use for your splash. This image will be something you create. For the example above, I will use the following image:

healcode_splash.png

The image needs to be uploaded to the web and you need to know it's location, like this:

[IMAGE] = http://healcode.com/extras/colorbox/images/healcode_splash.png

You can upload it to your own website if you are able or you can use one of these free image hosting websites:

http://www.freeimagehosting.net/ http://tinypic.com/ http://www.freecodesource.com/image-hosting/index

A link. We need to link our image to a page for when the user clicks it. For our example we will use this:

[LINK] = http://healcode.com/pricing

Putting the actual Splash Popup on your site

So now that we have those things, we will need to copy and paste the code from the box below. (Notice it scrolls to the right.)

<script type="text/javascript">
var hc_image = "[IMAGE]";
var hc_link = "[LINK]";
</script>
<link href="http://healcode.com/extras/hc_facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://healcode.com/extras/hc_facebox.js" type="text/javascript"></script>
<script type="text/javascript">hc_write_widget();</script>

You will need to replace [IMAGE] and [LINK] in the first couple lines of the code (including the square brackets) with the values from the last step. In our example, the final code looks like this:

<script type="text/javascript">
var hc_image = "http://healcode.com/extras/colorbox/images/healcode_splash.png";
var hc_link = "http://healcode.com/pricing";
</script>
<link href="http://healcode.com/extras/hc_facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://healcode.com/extras/hc_facebox.js" type="text/javascript"></script>
<script type="text/javascript">hc_write_widget();</script>

Lastly you paste this code onto the page where you would like your Splash Popup to show.

The Splash Popup with then open automatically the next time that page is loaded. If you have an "admin screen" for your website, it will probably also load in your admin screen, but no worries, you can just close it.

This widget has a couple nice features. If you click on the image, you will be taken to the URL specified by the [LINK]. Also, if you click the "Do not show this again" checkbox, the popup will not show up again for 1 month.

Well, that's it. You have just created a Splash Popup in just a few minutes and for $0.

Have more questions? Submit a request

Comments

Powered by Zendesk