FF1+ IE7+ Opr8+

Blossom Opt-in feature box script v1.1

Author: Dynamic Drive

Note:  Feb 11th, 2016 (v1.1):  Updated "displaytype" option to show box after x seconds.

Wordpress user? See how to add Blossom Opt-in box to your Wordpress blog

Description: Blossom is an attention grabbing feature box that conditionally pops up at the center of the user's screen for maximum visibility and user engagement. It can be used as the classic opt-in box to capture user's email, or simply to display important content such as an announcement or even an advertisement. Here's a list of Blossom's features:

  • Fully responsive feature box that displays itself in the center of the user's browser screen regardless of screen size.  Box resizes fluidly as browser size changes.
  • Five different effects out of the box to reveal the feature box- "swing", "slidedown", "starwars", "newspaper", and "wiggle".
  • Markup for feature box can either by inline on the page, or defined inside an external txt file and fetched via Ajax.
  • Ability to manually open the Feature Box again after it's been closed by calling a public method of the script.
  • Optional scroll based delivery- feature box can be shown only when the user has scrolled the document by a certain percentage, such as 50% or 100% (when the user is at the end of the page).
  • Robust frequency control- limit the display of the feature box to avoid annoying users- once per session, every 5 minutes, 10 hours, or 30 days etc. It's  up to you.

The script works in IE7+ and all modern browsers, with lower end IE browsers showing a more limited interface without any special effects. See also: DD Opt-in Box script

Demo: The opt-in feature box pops up when you scroll the page 10% or more. Use manual controls below to open box again with a different effect:

slidedown starwars newspaper wiggle swing


Directions:

Simply download the below zip file, and refer to demo.htm for the code to add to your web page. The package consists of the following:

Customization

Initialization code

Inside demo.htm, we see the initialization code in the HEAD section of your page:

<script>

jQuery(function($){ // on DOM load

	blossomfeaturebox.init({
		optinfile: 'assets/optincontent.txt', // #id of feature box markup on page or path to .txt file with markup
		fxeffect: 'swing',
		displaytype: '20%', // 'integer%" OR 'integer PLUS 's' OR "always"
		displayfreq: {duration: 'always', cookiename: 'featurebox'}
	})

})

</script>

This code can be added anywhere on your page, though for tidiness it's best placed in either the HEAD or the bottom of the page. blossomfeaturebox.init() supports the following settings:

blossomfeaturebox.init()
setting Description
optinfile: id_or_path

required

Enter either the ID of the DIV on the same page containing the markup for the feature box, or the path to the .txt file on your server (relative to the current page) where the markup is contained inside. More info below.
fxeffect: 'string'

defaults to "swing"

The CSS3 effect to use when revealing the opt-in feature box. The possible values are "swing", "slidedown", "starwars", "newspaper", and "wiggle".
displaytype: 'string'

defaults to ''immediate"

How the feature box is activated after the page loads. Two possible values:
  • "immediate": The opt-in feature box is shown immediately.
  • "integers": An integer suffixed with "s" to show the feature box after x seconds the page has loaded, such as "2s" or "5s". v1.1 feature
  • "integer%": A percentage string such as "20%" or "100%" to show the feature box when the page has been scrolled by that amount. For a page with no scrollbars, the opt-in box will display immediately.
displayfreq: {duration: 'string', cookiename: 'string'}

defaults to {duration: 'always', cookiename: 'featurebox'}

Controls the display frequency of the feature box. The value should be an object literal containing the following two properties:
  1. duration: Set this value to either "always" for always show the box, "session" for once per browser session, or "xdays", "xhrs", or "xmin" for once every x days, x hours, or x min respectively (replace "x" with an integer).
  2. cookiename: Set this to an arbitrary cookie name string that should be used to store the frequency setting using. If you're showing Blossom Feature Box on multiple pages on your site, assigning each Blossom instance the same cookiename value means they will be treated as the same Feature Box, so if the box is shown on one page, it won't be shown again on another one of those pages given the appropriate duration setting.

Here are a few examples of possible displayfreq setting:

  • {duration: 'always', cookiename: 'featurebox'}
  • {duration: 'session', cookiename: 'featurebox'}
  • {duration: '1days', cookiename: 'featurebox'}
  • {duration: '12hrs', cookiename: 'featurebox'}
  • {duration: '90min', cookiename: 'featurebox'}

Customizing the markup for the feature box

The markup for your opt-in feature box can be defined in two ways:

1) Inside an external file on your server and fetched via Ajax

This is the default way to define your markup, inside the file assets/optincontent.txt. It can consist of anything you want to show up at the center of the user's screen, for example:

<div class="optindescription">
	<div class="optinimage">
	<img src="assets/lab.png" />
	</div>
	
	<h2>Sign up for exclusive content</h2>
	Enter your email address below to receive exclusive scripts not found on the site. Also, get our monthly newsletter packed with tricks and bonus goodies.
</div>


<div class="optinform">
	<form method="post" action="">
	<input type="email" name="youremail" pattern="\S+@\S+\.\S+" placeholder="Enter Email Address" required /> <input type="submit" value="Subscribe!" />
	</form>
</div>

The style for this content is defined and customized inside the corresponding .css file optincontent.css.

Once that's done, for the initialization code in the HEAD section of your page, set the optinfile setting to point to where your .txt file is located relative to the page displaying the Feature Box, for example:

optinfile: 'assets/optincontent.txt',

If you're embedding Blossom Feature Box on multiple pages throughout your site located in different directories, the path to the .txt changes accordingly. In that case, you can specify an absolute URL to this file instead:

optinfile: 'http://' + location.hostname + '/assets/optincontent.txt',

The part in red dynamically gets the root hostname of the current page. Due to Ajax's finicky same-origin restrictions, to define an absolute URL to the .txt file on your server, we should make the hostname portion of the URL dynamic so it reflects exactly what the browser is currently seeing (ie:www.dynamicdrive.com versus dynamicdrive.com). If your site is under SSL, you should also replace http: with https:

2) Directly inline on your page(s)

If the Ajax method of embedding the markup for the Feature Box fails for you, the other failsafe way is to simply directly define the markup inline on your page. To do this, simply take the contents of optincontent.txt, and add it to the end of each page showing the Feature Box. Wrap this content with a DIV element that's hidden so it's not shown to users initially:

<div id="optincontent" style="display:none">
<div class="optindescription">
	<div class="optinimage">
	<img src="assets/lab.png" />
	</div>
	
	<h2>Sign up for exclusive content</h2>
	Enter your email address below to receive exclusive scripts not found on the site. Also, get our monthly newsletter packed with tricks and bonus goodies.
</div>


<div class="optinform">
	<form method="post" action="">
	<input type="email" name="youremail" pattern="\S+@\S+\.\S+" placeholder="Enter Email Address" required /> <input type="submit" value="Subscribe!" />
	</form>
</div>
</div>

Once again, the style for this content should be customized inside the corresponding .css file optincontent.css.

For the optinfile setting when the content is defined inline on the page, you'll want to simply set it to point to the ID of the markup wrapper, such as:

optinfile: '#optincontent',

and that's it!

Customizing the style for the feature box

All style changes to Blossom Feature Box should simply be done inside optincontent.css.  The div.optincontent2wrapper class styles the main wrapper automatically encompassing all custom markup you define for your Feature Box:

div.blossomfeaturebox div.optincontent2wrapper{
	position: relative;
	width: 95%;
	max-width: 600px; /* maximum width of the feature box */
	height: auto;
	color: white;
	max-height: 100%;
	border-radius: 5px;
	background: #54b3cb;
	overflow: auto;
	text-align: left;
	font-family: Georgia;
	z-index: 1000;
	box-shadow: 0 0 15px rgba(0,0,0,.5);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

Inside this class, you'll probably want to at least customize the properties in red above- the first one dictates the width of the Feature Box at its maximum- when the browser screen is below that width, the box becomes fluid.

Manually showing the Feature Box again

Last but not least, you can manually open your Blossom Feature Box after it's been closed, by calling the method in red inside a button, for example:

<button onClick="blossomfeaturebox.showfeaturebox(1)">Open Feature Box</button>