Knowledge • Resources • Research
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.
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 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:
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.
I hope you enjoyed this popover tutorial. If you have any issues implementing this on your site, don't be shy. Go ahead and contact me - I like to help.
If this isn't what you wanted to implement, have you seen my other popover tutorial "Exit Intent Popup"?
If you'd like to join my community and have your say in what I write about next ... feel free to enter your email below. I never spam.
Return to the Best Websites home page from Popover Tutorial.
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.