Popover Tutorial

This "Popover Tutorial for SBI Owners" is written for people who own an SBI Site.

If you would like an Opt-in Form to Popover one or all of your webpages to encourage visitors to Sign Up to your Newsletter, then follow the instructions below.

Please note: this version of the tutorial is written for Blockbuilder 2 sites. Please contact me if you would like help to set this up on your uploaded or Blockbuilder 1 site.

PopOver Tutorial Instructions

Step1: Download the required files directly from my website here:

Step 2: After you've downloaded the zip file and extracted the contents, go to the folder on your computer where you saved the extracted files.

Step 4: Use Quick Upload it to upload the following files:

• Pop.css
• colorbox.css
• \images\loading.gif
• \images\loading-background.png
• \images\border.png
• \images\controls.png
• \js\* (all the files)

Step 5: In Site Central, go to Upload your own HTML and select Integrate SBI Functions and get your code for MailOut!'s E-zine Opt-in Form.

Step 6: Copy the opt in form code to a notepad or wordpad text file. Make sure you amend  the <table> styling to include a “center” alignment.  This will ensure your opt-in form is centered on the popup.  

This table code is located near the <input type> statements.  For example, my table setting looks like this:

<table cellpadding="5" cellspacing="0" border="1" align="center" bgcolor="#ffffff">

Step 7: Go to the page where you want the popover to occur and put the following code in HEAD for THIS PAGE ONLY to add the popover to a single page OR you can make it sitewide if you want the form to appear on every page of your site.

<link href="/support-files/pop.css" rel="stylesheet" type="text/css">

<link href="/support-files/colorbox.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<script src="/support-files/jquery.colorbox-min.js"></script>

<script> jQuery(document).ready(function(){

   if (document.cookie.indexOf('visited=true') == -1) {

       var fifteenDays = 1000*60*60*24*15;

       var expires = new Date((new Date()).valueOf() +  fifteenDays);

       document.cookie = "visited=true;expires=" +  expires.toUTCString();

   $.colorbox({width:"480px", inline:true, href:"#subscribe"});

       }

});

</script>

Step 8: On the same page, just above the bottom of the header sitewide dot, add an HTML block, copy the div code below.

       <div style='display:none'>

               <div id='subscribe' style='padding: 5px; background:#fff;'>

                  <h2 class="box-title">Never Miss Any Updates or News!</h2>

                  <div id="subs-container" class="clearfix">

 INSERT EZINE FORM HERE

                   </div>

               </div>

        </div>

Step 9: Finally paste the mailout e-zine opt in Form code to replace the INSERT EZINE FORM HERE. Feel free to change the H2 text (box title) as well.

Step 10: Build the page.  New visitors will be presented with a popover dialog box to subscribe to your Newsletter

Step 11: Test the page.  To test this popover, simply change the visited=true statement in the HEAD script i.e. if (document.cookie.indexOf('visited=true') == -1) to read visited=false.   Once you're satisfied that your form is working, reset this back to visited=true.

Return to the Best Websites home page from Popover Tutorial.

How can I help you right now?

I'm happy to share my 12 Tips for Creating the Best Business Website as a free gift. And I do mean 'free' - there's no strings attached - not even a request for your name and email address!

If you need help, advice, a friendly push in the right direction, to rant or rave about a product or service ... please don't be shy about contacting me. Perhaps I can help you achieve your business goals.

You can do it ...

Feedback is important: If you think this content was useful to you, feel free to LIKE and Share with friends, colleagues and family members.

Tag Cloud

click on a word in the cloud to search this site.