Blossom Opt-in feature box script v1.1
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:
- demo.htm
- assets/blossomfeaturebox.js <- No need to edit
- assets/blossomfeaturebox.css <- No need to edit
- assets/optincontent.txt <- Edit this file to change feature box markup
- assets/optincontent.css <- Edit this file to change feature box style
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:
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:
|
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:
Here are a few examples of possible
|
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
with
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>