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.