Bannery

A really easy-to-use component for generating fully customized banners. You can take advantage of it in order to show, for example, a cookie consent banner or even to announce an upcoming event.

⭐️ Features

• Options from external source
• Markdown support
• Start/End date
• One-time display
• Callbacks
• CSS customization
• Custom CSS animation

⚙️ Usage

Install

npm -i bannery
// or
yarn add bannery

ES Module

import Bannery from 'bannery';

import 'bannery/dist/style.css';
import 'bannery/dist/theme.css'; // or use "css" option

Bannery({ url: 'https://cdn.jsdelivr.net/gh/embedmode/bannery/dist/example.json' });

CDN

Alternatively, you can include it via jsDelivr CDN:

UMD:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/embedmode/bannery/dist/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/embedmode/bannery/dist/theme.css">

<script src="https://cdn.jsdelivr.net/gh/embedmode/bannery/dist/bannery.umd.js"></script>
<script>
  Bannery({ url: 'https://cdn.jsdelivr.net/gh/embedmode/bannery/dist/example.json' });
</script>

ES module:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/embedmode/bannery/dist/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/embedmode/bannery/dist/theme.css">

<script type="module">
  import Bannery from "https://cdn.jsdelivr.net/gh/embedmode/bannery/dist/bannery.es.js";

  Bannery({
    url: "https://cdn.jsdelivr.net/gh/embedmode/bannery/dist/example.json"
  });
</script>

Parameters

• External source options will be deep-merged with passed by parameter.

| Attribute | Type | Default | Description | | ----------------- | -------- | --------- | ---------------------------------------------------------------------------------------------------------------------- | | key | string | | Banner identity. It will be used as DOM element id, part of cookie name and passed as a query string for data requests | | url | string | | Provide an external options source. Must return a valid JSON body. | | options | object | see below | Local options | | hooks.onOptions | function | | After getting and merging options, you can use this hook to modify them | | hooks.onOpen | function | | Sets banner to show or hide | | hooks.onPrimary | function | | Triggers when primary button is clicked. Native event passed | | hooks.onSecondary | function | | Triggers when secondary button is clicked. Native event passed |

Options

example.json

| Key | Type | Default | Description | | --------------------- | ------- | --------------------- | ----------------------------------------------------------------------------------------------- | | enabled | boolean | true | First thing checked in order to display our banner | | title | string | | Support markdown without html, only rendered if exists | | description | string | | Support markdown without html, only rendered if exists | | position | string | bottom | [top|bottom] Banner display position | | display.startDate | date | | Banner will be shown if current date is later than startDate, regardless of endDate | | display.endDate | date | | Banner will be shown if current date is before endDate, regardless of startDate | | display.mode | string | | [cookie|session] Enables one-time banner display, storing a value in cookies or sessionStorage | | buttons.primaryLink | string | | Primary button link, usually used as a confirm button | | buttons.primaryText | string | | Primary button text, usually used as a confirm button as well | | buttons.secondaryText | string | | Secondary button text, normally used as a close button | | themeClass | string | bannery-default-theme | Root element class name used as a theme class name | | css | string | | css string injected as a style tag | | animation | string | | css animation class name |

🌐 Browser support

| IE / Edge | Firefox | Chrome | Safari | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Edge | >= 52 | >= 59 | >= 11 |

🙌 Contributing

To learn how to setup a development environment and for contribution guidelines, see CONTRIBUTING.md.

🚧 Development

yarn install

// Compiles and hot-reloads for development
yarn serve

// Lints and fixes files
yarn lint

// Compiles and minifies for production
yarn build

📜 Changelog

We use GitHub releases.

🔐 Security

To report a security vulnerability, please use the Tidelift security contact.

📄 License

This project is licensed under the terms of the MIT license.