{"id":15640778,"url":"https://github.com/anandchowdhary/hello-bar","last_synced_at":"2025-07-25T20:02:20.176Z","repository":{"id":39559095,"uuid":"163602446","full_name":"AnandChowdhary/hello-bar","owner":"AnandChowdhary","description":"👋 Greet your visitors with a hello bar","archived":false,"fork":false,"pushed_at":"2024-05-01T12:34:50.000Z","size":6906,"stargazers_count":74,"open_issues_count":6,"forks_count":10,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-12-12T17:16:04.533Z","etag":null,"topics":["engagement","hellobar","js","library","marketing"],"latest_commit_sha":null,"homepage":"https://anandchowdhary.github.io/hello-bar/?utm_source=github\u0026utm_medium=link","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AnandChowdhary.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-30T16:44:23.000Z","updated_at":"2024-11-02T19:31:48.000Z","dependencies_parsed_at":"2024-06-21T13:39:43.145Z","dependency_job_id":null,"html_url":"https://github.com/AnandChowdhary/hello-bar","commit_stats":{"total_commits":679,"total_committers":7,"mean_commits":97.0,"dds":"0.32400589101620025","last_synced_commit":"2dda4def8f39294d7df92b3b2a12dca7c684ea69"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnandChowdhary%2Fhello-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnandChowdhary%2Fhello-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnandChowdhary%2Fhello-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnandChowdhary%2Fhello-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnandChowdhary","download_url":"https://codeload.github.com/AnandChowdhary/hello-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230445927,"owners_count":18227060,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["engagement","hellobar","js","library","marketing"],"created_at":"2024-10-03T11:40:12.449Z","updated_at":"2024-12-19T14:08:37.908Z","avatar_url":"https://github.com/AnandChowdhary.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![Hello-Bar](https://raw.githubusercontent.com/AnandChowdhary/hello-bar/master/logo.png)\n\nThis is an open-source alternate to the [Hello Bar](https://www.hellobar.com/) service. It's a great way to capture leads, announce a sale or discount, etc. It supports targeting based on location, referrer, A/B testing, etc.\n\n\n[![Travis CI](https://img.shields.io/travis/AnandChowdhary/hello-bar.svg)](https://travis-ci.org/AnandChowdhary/hello-bar)\n[![Minzipped size](https://img.shields.io/bundlephobia/minzip/hello-bar.svg)](https://www.npmjs.com/package/hello-bar)\n[![GitHub](https://img.shields.io/github/license/anandchowdhary/hello-bar.svg)](https://github.com/AnandChowdhary/add-to-calendar/blob/master/LICENSE)\n![Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/AnandChowdhary/hello-bar.svg)\n[![Made in Enschede](https://img.shields.io/badge/made%20in-Enschede-brightgreen.svg)](https://cityofenschede.com/)\n\n[![NPM](https://nodei.co/npm/hello-bar.png)](https://nodei.co/npm/hello-bar/)\n\n![Hello Bar demo](https://raw.githubusercontent.com/AnandChowdhary/hello-bar/master/demo.gif)\n\n## Usage\n\n### Basic usage\n\nInstall Hello Bar from NPM:\n\n```bash\nyarn add hello-bar\n```\n\nInitialize with text to display:\n\n```js\nimport HelloBar from \"hello-bar\";\n\nnew HelloBar({\n  text: \"Hello, world!\"\n});\n```\n\n### Call-to-action button\n\nAdd class `cta` to your `a` or `button` for a large call-to-action button. Add the class `wiggle` for attention-catching animated wiggling.\n\n```js\nnew HelloBar({\n  text: `Buy my new book now! \u003ca class=\"cta wiggle\" href=\"#\"\u003eGet $10 off!\u003c/a\u003e`\n});\n```\n\n### Customization\n\nThese are all the options you can use in the constructor:\n\n```js\nnew HelloBar({\n  id: \"\", // A unique ID for this hello bar content (required for targeting)\n  text: \"\", // Text you want the banner to display\n  hideClose: false, // Set to `true` to hide close button\n  position: \"top\", // Set to \"bottom\" to have the bar in the bottom instead of top\n  fixed: false, // Set to `true` to set the position as fixed (on scroll)\n  move: null, // Element(s) to force add margin-top to, in case you have any absolutely positioned elements\n  duration: 500, // Animation duration in ms\n  delay: 1, // Delay in ms\n  align: \"center\", // Text alignment in CSS (\"left\", \"right\", or \"center\")\n  background: \"#eee\", // Background color\n  textColor: null, // Black or white text is automagically determined; you can specify a color if you like\n  size: \"normal\", // Set to \"large\" for a big banner like Hello Bar,\n  multiline: false, // Set to true to have multiple lines of text\n  disableBodyMove: false, // Set to true to not move the body slightly down,\n  hide: false, // Set to true to not show the bar\n  ipEndpoint: \"https://ipinfo.io/json\", // Endpoint to get IP info in case of location-based targeting\n  i18n: {\n    hideText: \"Hide announcement\" // ARIA-label for close button\n  },\n  targeting: {\n    once: false, // Set to true to not show after it's been closed in this session\n    onceUser: false, // Set to true to not show after it's been closed by this user EVER,\n    params: { // Support for URL param targeting\n      // Add key-value pairs here\n    },\n    // Some examples below\n    location: { // Add targeting by location\n      eu: false, // Set to true to only show in EU countries\n      country: [\"us\", \"ca\", \"in\"], // Array of countries to show in,\n      city: [\"New Delhi\"], // Array of cities to show in,\n      ip: [\"192.168.1.1\"], // Array of IP addresses to show in,\n      postal: [110048], // Array of postal codes to show in,\n      region: [\"California\"], // Array of regions to show in\n    },\n    pathName: \"/about\", // Only show on this path,\n    href: \"https://example.com/about\" // Only show on this URL\n  }\n});\n```\n\n### `move`\n\nIn extreme cases, you may have an element with an absolute position on the page (say, 30px from top). To display the bar, we would then have to push the element below the hello bar's height (say, 30px + 20px = 50px from top). In this case, you can specify such element(s) in the `move` parameter.\n\nThe `\u003cbody\u003e` is a default `move` case since, in general, it is going to be pushed down when the hello bar is visible. You can disable this setting using `\"disableBodyMove\": true` in the options.\n\nAcceptance `move` values:\n\n- String containing selector: `\"h1#moveMe\"`\n- DOM element: `document.querySelector(\"h1#moveMe\")`\n- Node list of DOM elements: `document.querySelectorAll(\"h1\")`\n- Array containing selectors: `[\"h1\", \"div.move\"]`\n- Hybrid array: `[\"h1\", document.querySelectorAll(\"h2\"), document.querySelector(\"#divId\")]`\n- etc.\n\n## Use cases\n\n### EU cookie law message\n\nYou can show a cookie law message only in the European Union (EU) using something like this:\n\n```js\nnew HelloBar({\n  text: '🍪 We use cookies and storage on our website. \u003ca class=\"cta\" href=\"/privacy-policy\"\u003ePrivacy policy\u003c/a\u003e',\n  fixed: true,\n  position: \"bottom\",\n  targeting: {\n    onceUser: true,\n    location: {\n      eu: true\n    }\n  }\n});\n```\n\nIn the code above, setting `targeting.onceUser` will make sure that a user doesn't see the message again after they've closed it. Using `targeting.location.eu` will restrict message visibility within the EU member countries.\n\n### Product Hunt message\n\nYou can show a welcome message to users coming from your Product Hunt page:\n\n```js\nnew HelloBar({\n  text: 'Hello Product Hunter! Use code PH20 for 20% off when you sign up!',\n  background: \"#dc542f\",\n  targeting: {\n    params: {\n      ref: \"producthunt\"\n    }\n  }\n});\n```\n\n### A/B testing\n\nYou can do client-side A/B testing by using an array for `text` instead of a string. You can then track specific events using `HelloBar.on()`:\n\n```js\nconst bar = new HelloBar({\n  text: [\n    'You are seeing A! \u003ca href=\"/link-1\" class=\"cta\"\u003eClick here\u003c/a\u003e',\n    'You are seeing B! \u003ca href=\"/link-2\" class=\"cta\"\u003eClick here\u003c/a\u003e'\n  ]\n});\n// Track CTA clicks on Google Analytics\nwindow.ga(\"create\", \"UA-XXXXX-Y\", \"auto\");\nbar.on(\"cta-mouse-click\", e =\u003e window.ga(\"send\", \"event\", \"ab-test\", e.getAttribute(\"href\")));\n```\n\n## Methods\n\nYou can use the following methods to manipulate the bar:\n\n| Method | Description |\n|-------|-------------|\n| `showBar()` | Show the bar |\n| `hideBar()` | Hide the bar |\n| `unMove()` | Revert moved elements to their initial state |\n\n## Events\n\nFor analytics, you can listen to events like this:\n\n```js\nconst bar = new HelloBar({\n  text: 'Hello world!'\n});\nbar.on(\"mouse-click\", () =\u003e {\n  // Do something here\n});\n```\n\nYou can listen to the following events. They all return the relevant DOM element (either the bar itself or the call-to-action button):\n\n| Event | Description |\n|-------|-------------|\n| `before-created` | Called before the bar is first created |\n| `created` | Called when the bar is first created |\n| `after-created` | Called after the bar is first created |\n| `not-created` | Called when the bar is not created |\n| `mouse-enter` | Called when mouse enters the bar |\n| `mouse-leave` | Called when mouse leaves the bar |\n| `mouse-down` | Called when mouse presses down on the bar |\n| `mouse-up` | Called when mouse releases on the bar |\n| `mouse-click` | Called when mouse clicks the bar |\n| `cta-mouse-enter` | Called when mouse enters CTA button |\n| `cta-mouse-leave` | Called when mouse leaves CTA button |\n| `cta-mouse-down` | Called when mouse presses down on CTA button |\n| `cta-mouse-up` | Called when mouse releases on CTA button |\n| `cta-mouse-click` | Called when mouse clicks CTA button |\n| `show-bar` | Called when the bar is shown |\n| `hide-bar` | Called when the bar is hidden |\n| `close-bar` | Called when the close button is clicked |\n| `color-bar` | Called when the bar is colored (returns colors) |\n| `calculate-height` | Called when the bar's height is calculated (returns height) |\n| `move-element` | Called when an element is moved (returns element) |\n| `start-ip-info` | Called when the IP fetch request is started |\n| `fetch-ip-info` | Called when the IP fetch request is returned |\n| `error-ip-info` | Called when the IP fetch request has an error |\n| `window-resize` | Called with window is resized and objects and repositioned |\n\n## Todo\n- [x] Targeting features (single: true)\n- [x] Emit events for hello bar showed, closed, cta hover, etc.\n- [x] Random from `text` array for A/B testing\n- [ ] Better design customization (gradients?)\n- [ ] Support for other IP info endpoints (?)\n- [ ] Revisit ARIA for close button (?)\n\n## License\n\nMIT \u0026copy; [Anand Chowdhary](https://anandchowdhary.com/?utm_source=github\u0026utm_medium=repository\u0026utm_campaign=hello-bar\u0026utm_term=license-link)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanandchowdhary%2Fhello-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanandchowdhary%2Fhello-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanandchowdhary%2Fhello-bar/lists"}