Popover Tutorial


It's your business & website - It's my business to help you make it the best website!

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.

First Day Of The Rest Of Your Life

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.

Popover Files

Step 3: You will need to amend the colorbox.css file to replace ALL of the \images references to the correct URL reference for your domain.

For example, url(images/controls.png) would change to url(‘https://www.the-best-websites.co.uk/images/controls.png’) if I uploaded the images via the Image library OR url(‘https://www.the-best-websites.co.uk/image-files/controls.png’) if I uploaded the images via Quick Upload it.

Note: the new url has single quotes plus the full path of the image file

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.

SBI Functions
Get Mail Out Code

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"});




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">





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 ...

"That was fast! That is exactly what I need it to do. You are amazing! You just might be the secret weapon that makes a website less  about being BUSY on the Internet and more about being a BUSINESS on  the Internet." - Stan L., advice-for-lifetime-relationships.com

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

New! Comments

Have your say about what you just read! Leave me a comment in the box below.