couponBar.js is a JavaScript class that displays a coupon bar at the bottom of a website. Color scheme, timer, cookie, and more.

How to Add a Coupon Bar to Any Website

Using couponBar.js, you can easily add a coupon bar to any website! It relies on pure JavaScript and does not require any external libraries. Additionally, with couponBar.js, you can display a textual advertisement bar instead of coupon if you want to display a different message to your website visitors or include a general note at the top or bottom of your site.

Table of Contents

This article is a documentation and reference for everything related to couponBar.js. Click on the chapter you wish to read from the following menu:

  1. What is couponBar.js?
  2. Live Demos.
  3. How to purchase the couponBar.js?
  4. Installation.
  5. Usage.
  6. couponBar.js Options.
  7. RTL Support.
  8. FAQ.
  9. Contact.

What is couponBar.js?

couponBar.js allows you to easily add a top or bottom bar to your website for coupon marketing. It relies solely on JavaScript, providing you with various options such as customizing colors, adding a visual countdown to encourage urgent purchases, hiding the bar on a specific date, or using it to display a message or textual advertisement on your website instead of coupon marketing. couponBar.js is built with pure JavaScript and does not rely on any libraries. It is user-friendly, customizable, and has been tested on popular modern browsers as well as mobile browsers.

Live Demos

  1. Coupon bar at the top.
  2. Coupon bar at the bottom.
  3. Coupon bar with showAfter option: Visit this link and wait for 5 seconds to understanding the option idea.
  4. Bar as Text Ad (without coupon code and without link).
  5. Bar as Ad (without coupon code, but with a link).
  6. Coupon bar with a timer.
  7. Coupon bar with a timer (and with lastTime option): Visit this link and wait for 1 minute to understanding the option idea.

There is more ideas you can do it with couponBar.js, such as opacity option, hide close button, hide bar by date, and more.

How to purchase the couponBar.js?

You can purchase couponBar.js on CodeCanyon.

Installation

After purchasing couponBar.js and downloading the compressed zip file, extract it. Now, inside the main product folder, you will find 2 folders as follows:

  1. “main” folder: This is the main product folder and it contains 4 files:
    1. “couponBar.js”: This is the main class file.
    2. “couponBar.min.js”: This is the compressed version of the main class file (minified).
    3. “style.css”: This is the product’s design file.
    4. There is also a “style.min.css” file, which is the compressed version of the design file (minified).
  2. “live-demos” folder: This folder contains the same examples used in the live demos here.

Now, choose the version you prefer, whether it’s the main version or the compressed (minified) version. Both versions are the same product and serve the same purpose, but the compressed version has a smaller file size.

If you prefer the main version, you should include both the “couponBar.js” file and the “style.css” file before the closing </head> tag in your website or the page where you intend to run the product. If you prefer the compressed version, you should include both the “couponBar.min.js” file and the “style.min.css” file before the closing </head> tag in your website or the page where you intend to run the product.

Let’s assume you want to use the main version. All you need to do is include the two files before the closing </head> tag in your website or the page where you intend to run the product. Here’s an example of how to do it:

<!DOCTYPE html>
<html>
<head>
  <!-- Include couponBar.js -->
  <script type="text/javascript" src="path/to/couponBar.js"></script>
  
  <!-- Include style.css -->
  <link rel="stylesheet" type="text/css" href="path/to/style.css">
</head>
<body>
  <!-- your site content....... -->
</body>
</html>

Replace “path/to/couponBar.js” and “path/to/style.css” with the actual paths to the files on your server.

Usage

Now that you have finished implementing all the steps mentioned in the “Installation” chapter, the next step is to configure and adjust the options for displaying the bar on your website.

Put this code inside the <body> tag:

	<div id="couponBarSelector" class="couponBar">
		<div id="couponBar_timerWrap" class="couponBar_timerWrap">
			<div>Offer ends on<div id="couponBar_theTime"></div></div>
		</div>

		<div id="couponBar_content" class="couponBar_content couponBar_font">
			<div class="couponBar_mobileText">PUT_MOBILE_TEXT_HERE</div>
			<div class="couponBar_text">PUT_MAIN_TEXT_HERE</div>
			<div id="couponBar_couponCode" class="couponBar_couponCode" data-cb-code="1"></div>
		</div>

		<div id="couponBar_closeButton" class="couponBar_closeButton"></div>
	</div>

Now replace the following texts with your text:

  1. Replace the text “PUT_MOBILE_TEXT_HERE” with the text you want to display on the bar for mobile devices and tablets. The text length must not exceed 34 characters (including spaces). Read this answer in FAQ chapter.
  2. Replace the text “PUT_MAIN_TEXT_HERE” with the main text you want to display on the bar. This text will be visible on all devices. The text length must not exceed 60 characters (including spaces). Read this answer in FAQ chapter.
  3. You can replace the “Offer ends on” text with other text but don’t make it too long.

Use Google translate to count the text length. Do not include the coupon code in the text, you will set it later through the options. Final example:

	<div id="couponBarSelector" class="couponBar">
		<div id="couponBar_timerWrap" class="couponBar_timerWrap">
			<div>Offer ends on<div id="couponBar_theTime"></div></div>
		</div>

		<div id="couponBar_content" class="couponBar_content couponBar_font">
			<div class="couponBar_mobileText">Get 50% OFF on all products! Code:</div>
			<div class="couponBar_text">Get today 50% discount on all products, ends soon! Use code:</div>
			<div id="couponBar_couponCode" class="couponBar_couponCode" data-cb-code="1"></div>
		</div>

		<div id="couponBar_closeButton" class="couponBar_closeButton"></div>
	</div>

Now put this code after the previous elements:

<scriptt type="text/javascript">
    const couponBarOptions = {
        selector: 'couponBarSelector',
        couponCode: 'PUT_COUPON_CODE_HERE' // Replace it with your coupon code, for example '50OFF'
    };
    couponBar = new couponBar(couponBarOptions);
</scriptt>

Now the coupon bar is ready for use, and it will be displayed on your site. But if you want to customize the bar and adjust the options, all you have to do is follow the steps in the next chapter.

couponBar.js Options

couponBar.js includes 23 options, some of which are required while others are optional. In the following table, you will find an explanation of each option:

Option Name Description Value Type Default Value Required?
selector Main wrap ID. String. An HTML Element ID. It is recommended not to change the default ID. "couponBarSelector" Yes!
couponCode Your coupon code to display it in the bar. String. Its length must not exceed 9 characters. "CODE" Yes!
rtl for rtl sites Boolean or digit: true or "1" to enable RTL. false or "0" to disable RTL. false Optional