Add option to target based on URL

AnandChowdhary · Jan 18, 2019 · c105a2f · c105a2f
1 parent 9d972df
commit c105a2f
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 646 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ This is an open-source alternate to the [Hello Bar](https://www.hellobar.com/) s
 ![Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/AnandChowdhary/hello-bar.svg)
 [![Made in Enschede](https://img.shields.io/badge/made%20in-Enschede-brightgreen.svg)](https://cityofenschede.com/)
 
-[![NPM](https://nodei.co/npm/hello-bar.png)](https://nodei.co/npm/hello-bar/)
+[![NPM](https://npm.im/hello-bar.png)](https://nodei.co/npm/hello-bar/)
 
 ![Hello Bar demo](https://raw.githubusercontent.com/AnandChowdhary/hello-bar/master/demo.gif)
 
@@ -45,7 +45,7 @@ new HelloBar({
 
 ### Customization
 
-These are the default values, and you can customize them to the values in comments:
+These are all the options you can use in the constructor:
 
 ```js
 new HelloBar({
@@ -72,14 +72,17 @@ new HelloBar({
     params: { // Support for URL param targeting
       // Add key-value pairs here
     },
+    // Some examples below
     location: { // Add targeting by location
       eu: false, // Set to true to only show in EU countries
-      country: null // Add array of countries to show in,
-      city: null // Add array of cities to show in,
-      ip: null // Add array of IP addresses to show in,
-      postal: null // Add array of postal codes to show in,
-      region: null // Add array of regions to show in
-    }
+      country: ["us", "ca", "in"], // Array of countries to show in,
+      city: ["New Delhi"], // Array of cities to show in,
+      ip: ["192.168.1.1"], // Array of IP addresses to show in,
+      postal: [110048], // Array of postal codes to show in,
+      region: ["California"], // Array of regions to show in
+    },
+    pathName: "/about", // Only show on this path,
+    href: "https://example.com/about" // Only show on this URL
   }
 });
 ```
@@ -108,7 +111,7 @@ You can show a cookie law message only in the European Union (EU) using somethin
 ```js
 new HelloBar({
   text: '🍪 We use cookies and storage on our website. <a class="cta" href="/privacy-policy">Privacy policy</a>',
-  fixed: true, // Position fixed for this message,
+  fixed: true,
   position: "bottom",
   targeting: {
     onceUser: true,
@@ -153,6 +156,15 @@ window.ga("create", "UA-XXXXX-Y", "auto");
 bar.on("cta-mouse-click", e => window.ga("send", "event", "ab-test", e.getAttribute("href")));
 ```
 
+## Methods
+
+You can use the following methods to manipulate the bar:
+
+| Method | Description |
+|-------|-------------|
+| `showBar()` | Show the bar |
+| `hideBar()` | Hide the bar |
+
 ## Events
 
 For analytics, you can listen to events like this:
@@ -204,4 +216,4 @@ You can listen to the following events. They all return the relevant DOM element
 
 ## License
 
-MIT (c) [Anand Chowdhary](https://anandchowdhary.com/?utm_source=github&utm_medium=repository&utm_campaign=hello-bar&utm_term=license-link)
+MIT &copy; [Anand Chowdhary](https://anandchowdhary.com/?utm_source=github&utm_medium=repository&utm_campaign=hello-bar&utm_term=license-link)
diff --git a/build/index.css b/build/index.css
diff --git a/build/index.css.map b/build/index.css.map
diff --git a/build/index.js b/build/index.js
diff --git a/build/index.js.map b/build/index.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>hello-bar demo</title><link href="index.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app!</noscript><div id="root"><h1>Look above &uarr;</h1><div class="options"><div><input id="option1" type="radio" name="demoMessage" value="large-star" checked="checked"> <label for="option1">GitHub star message</label></div><div><input id="option2" type="radio" name="demoMessage" value="cookie-law-1"> <label for="option2">Cookie law message (shows everywhere)</label></div><div><input id="option3" type="radio" name="demoMessage" value="cookie-law-2"> <label for="option3">EU cookie law message (shows only if you're in the EU)</label></div><div><input id="option4" type="radio" name="demoMessage" value="random"> <label for="option4">A/B testing message</label></div></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non lorem quam. Nunc at risus auctor felis semper semper. Proin nec consectetur dolor, eu congue tellus. Nulla ac libero viverra, aliquam mi eget, auctor diam. Vestibulum eget leo consequat, tempus eros ac, bibendum ligula. Etiam non lobortis augue, eget eleifend mi. Etiam felis sem, elementum sit amet lacinia ac, dignissim at eros. Mauris tincidunt, arcu ut vulputate maximus, tellus leo rhoncus ante, vitae viverra est lectus a erat. Fusce semper vehicula laoreet.</p></div><script src="index.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>hello-bar demo</title><link href="index.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app!</noscript><div id="root"><h1>Look above &uarr;</h1><div class="options"><div><input id="option1" type="radio" name="demoMessage" value="large-star" checked="checked"> <label for="option1">GitHub star message</label></div><div><input id="option2" type="radio" name="demoMessage" value="cookie-law-1"> <label for="option2">Cookie law message (shows everywhere)</label></div><div><input id="option3" type="radio" name="demoMessage" value="cookie-law-2"> <label for="option3">EU cookie law message (shows only if you're in the EU)</label></div><div><input id="option5" type="radio" name="demoMessage" value="evening"> <label for="option5">Evening message (shows only after 8 pm)</label></div><div><input id="option4" type="radio" name="demoMessage" value="random"> <label for="option4">A/B testing message</label></div></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non lorem quam. Nunc at risus auctor felis semper semper. Proin nec consectetur dolor, eu congue tellus. Nulla ac libero viverra, aliquam mi eget, auctor diam. Vestibulum eget leo consequat, tempus eros ac, bibendum ligula. Etiam non lobortis augue, eget eleifend mi. Etiam felis sem, elementum sit amet lacinia ac, dignissim at eros. Mauris tincidunt, arcu ut vulputate maximus, tellus leo rhoncus ante, vitae viverra est lectus a erat. Fusce semper vehicula laoreet.</p></div><script src="index.js"></script></body></html>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>hello-bar demo</title><link href="index.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app!</noscript><div id="root"><h1>Look above ↑</h1><div class="options"><div><input id="option1" type="radio" name="demoMessage" value="large-star" checked="checked"> <label for="option1">GitHub star message</label></div><div><input id="option2" type="radio" name="demoMessage" value="cookie-law-1"> <label for="option2">Cookie law message (shows everywhere)</label></div><div><input id="option3" type="radio" name="demoMessage" value="cookie-law-2"> <label for="option3">EU cookie law message (shows only if you're in the EU)</label></div><div><input id="option4" type="radio" name="demoMessage" value="random"> <label for="option4">A/B testing message</label></div></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non lorem quam. Nunc at risus auctor felis semper semper. Proin nec consectetur dolor, eu congue tellus. Nulla ac libero viverra, aliquam mi eget, auctor diam. Vestibulum eget leo consequat, tempus eros ac, bibendum ligula. Etiam non lobortis augue, eget eleifend mi. Etiam felis sem, elementum sit amet lacinia ac, dignissim at eros. Mauris tincidunt, arcu ut vulputate maximus, tellus leo rhoncus ante, vitae viverra est lectus a erat. Fusce semper vehicula laoreet.</p></div><script src="index.js"></script></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>hello-bar demo</title><link href="index.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app!</noscript><div id="root"><h1>Look above ↑</h1><div class="options"><div><input id="option1" type="radio" name="demoMessage" value="large-star" checked="checked"> <label for="option1">GitHub star message</label></div><div><input id="option2" type="radio" name="demoMessage" value="cookie-law-1"> <label for="option2">Cookie law message (shows everywhere)</label></div><div><input id="option3" type="radio" name="demoMessage" value="cookie-law-2"> <label for="option3">EU cookie law message (shows only if you're in the EU)</label></div><div><input id="option5" type="radio" name="demoMessage" value="evening"> <label for="option5">Evening message (shows only after 8 pm)</label></div><div><input id="option4" type="radio" name="demoMessage" value="random"> <label for="option4">A/B testing message</label></div></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non lorem quam. Nunc at risus auctor felis semper semper. Proin nec consectetur dolor, eu congue tellus. Nulla ac libero viverra, aliquam mi eget, auctor diam. Vestibulum eget leo consequat, tempus eros ac, bibendum ligula. Etiam non lobortis augue, eget eleifend mi. Etiam felis sem, elementum sit amet lacinia ac, dignissim at eros. Mauris tincidunt, arcu ut vulputate maximus, tellus leo rhoncus ante, vitae viverra est lectus a erat. Fusce semper vehicula laoreet.</p></div><script src="index.js"></script></body></html>