Video

A video does not yet exist for this guide.

Request Video

Contents

First download the Promo Bar ZIP file from inside your Zomex account. Extract the files and move the extracted folder to your desktop.

Next check to see if your website loads jQuery, you can do this by viewing your website and then right click somewhere blank on the page > click on view source or view page source. Then search for jquery between <head> & </head>. If you see it skip this step, if not add the following just below <head>:

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

Next select the type of website you're installing the script on:

HTML

1) Open the Promo Bar folder and then files, upload the images, javascript & css directories to the public_html/ directory of your web hosting account.

2) Open each of your pages and add the following code just before </head>:

<link href="css/promobar.css" type="text/css" rel="stylesheet" />
	<script src="javascript/promobar.js"></script>
	
	<script>
	$(document).ready( function() {
		$('#promobar-notice').promotionbar({
	
		});
	});	
	</script>

3) Next add the following code where you'd like to display the notice and edit the contents as desired:

<div id="promobar-notice" class="promotionbar-hide">
		
		<div class="promotionbar">
			
			<div class="promotionbar-inner">
				
				Use this bar to promote your latest discount or announcement.<a href="http://www.Zomex.com/templates/scripts/promo-bar/" target="_blank" class="promobutton1 promobutton-color">Order</a>
				
			</div>
			
		</div><!-- .promotionbar -->
			
	</div><!-- #promobar-notice -->

WHMCS

1) Open the Promo Bar folder and then files, upload the images, javascript & css directories to your active WHMCS template directory. e.g public_html/templates/glaze/

2) Open header.tpl of your activate template directory and add the following just before </head>:

<link href="{$WEB_ROOT}/templates/{$template}/css/promobar.css" type="text/css" rel="stylesheet" />
	<script src="{$WEB_ROOT}/templates/{$template}/javascript/promobar.js"></script>
	
	{literal}
	<script>
	$(document).ready( function() {
		$('#promobar-notice').promotionbar({
	
		});
	});	
	</script>			
	{/literal}

3) Next add the following code where you'd like to display the notice and edit the contents as desired. For example you could add to header.tpl just below <body>:

<div id="promobar-notice" class="promotionbar-hide">
		
	<div class="promotionbar">
		
		<div class="promotionbar-inner">
			
			Use this bar to promote your latest discount or announcement.<a href="http://www.zomex.com/templates/scripts/promo-bar/" target="_blank" class="promobutton1 promobutton-color">Order</a>
			
		</div>
		
	</div><!-- .promotionbar -->
			
	</div><!-- #promobar-notice -->

WordPress

1) Open the Promo Bar folder and then files, upload the images, javascript & css directories to to your active WordPress theme directory. e.g public_html/wp-content/themes/prosper/

2) Open header.php of your activate theme and add the following just before </head>:

<link href="<?php bloginfo('template_directory'); ?>/css/promobar.css" type="text/css" rel="stylesheet" />
<script src="<?php bloginfo('template_directory'); ?>/javascript/promobar.js"></script>
			
<script>
$(document).ready( function() {
	$('#promobar-notice').promotionbar({

	});
});	
</script>
			
				

3) Next add the following code where you'd like to display the notice and edit the contents as desired. For example you could add to header.php just below <body>:

<div id="promobar-notice" class="promotionbar-hide">
		
	<div class="promotionbar">
		
		<div class="promotionbar-inner">
			
			Use this bar to promote your latest discount or announcement.<a href="http://www.zomex.com/templates/scripts/promo-bar/" target="_blank" class="promobutton1 promobutton-color">Order</a>
			
		</div>
		
	</div><!-- .promotionbar -->
			
	</div><!-- #promobar-notice -->

Settings

The promo bar script supports a number of settings:

<script>
	$(document).ready( function() {
		$('#promobar-notice').promotionbar({
	
			promoenable: true,
			promoshowafter: 0,
			promocookiedays: 365,
			promodisplay: "default"
	
		});
	});	
</script>

promoenable - turn on/off the script

promoshowafter - set the amount of page views before the promo is displayed

promocookiedays - set the amount of days the closed cookie lasts for (amount of days before the cookie is deleted thus re-displayed)

promodisplay - change the display, supports "default" and "toggle"

Integration examples

Below you can see a few examples of contents you can use out of the box:

Social

<div id="promobar-notice" class="promotionbar-hide">
		
		<div class="promotionbar">
			
			<div class="promotionbar-inner">
				
				<div class="socialbuttons">
					<div id="fb-root"></div>
					<div class="fb-like" data-href="https://www.facebook.com/Zomex" data-send="false" data-layout="button_count" data-show-faces="false"></div>
					<div class="twitter-like"><a href="https://twitter.com/Zomex" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow</a></div>
					<div class="google-like"><g:plusone size="medium"></g:plusone></div>
					<div class="g-ytsubscribe" data-channel="Zomex" data-layout="default" data-count="default"></div>
				</div>
			</div>
			
			<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>	
						
			<div id="fb-root"></div>
			<script>(function(d, s, id) {
			  var js, fjs = d.getElementsByTagName(s)[0];
			  if (d.getElementById(id)) return;
			  js = d.createElement(s); js.id = id;
			  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5";
			  fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));</script>	
			
			<script src="https://apis.google.com/js/platform.js"></script>			
			
		</div><!-- .promotionbar -->
			
	</div><!-- #promobar-notice -->

Newsletter

<div id="promobar-notice" class="promotionbar-hide">
		
		<div class="promotionbar">
			
			<div class="promotionbar-inner">
				
				<div class="newsletter">
					<form id="mc-embedded-subscribe-form" action="//zomex.us1.list-manage.com/subscribe/post?u=6406660e86c5136ec58ee173f&amp;id=4e50a432a5" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
						<input id="mce-EMAIL" name="EMAIL" required="required" type="email" placeholder="Enter your email here - be the first to hear about our latest news &amp; promotions!" />
						<input id="mc-embedded-subscribe" class="promobutton-color" name="subscribe" type="submit" value="Subscribe" />
					</form>
					<div class="promotionbar-clear"></div>
				</div>
							
			</div><!-- .promotionbar-inner -->
			
		</div><!-- .promotionbar -->
			
	</div><!-- #promobar-notice -->

Sticky

<div id="promobar-notice" class="promotionbar-hide promotionbar-sticky">
		
		<div class="promotionbar">
			
			<div class="promotionbar-inner">
				
				Use this bar to promote your latest discount or announcement.<a href="http://www.Zomex.com/templates/scripts/promo-bar/" target="_blank" class="promobutton1 promobutton-color">Order</a>
				
				<style>
				<!--
					body { margin-top: 70px; /* Adds space on top of page to allow for fixed notice */ }
				-->
				</style>
				
			</div>
			
		</div><!-- .promotionbar -->
			
	</div><!-- #promobar-notice -->	

Request Support

We hope you found this documentation useful. If you run into any issues we will be happy to assist you.