Mozilla Protocol
  • 19.1.0

Sticky Promo

A Sticky Promo is a small box of content positioned in the bottom corner of the window, intended to ensure that the content it’s promoting remains a constant on the page – always visible within the viewport no matter a user’s scroll position. It can be dismissed with a click.

Sticky Promos can be used to promote a product and provide a call to action, or potentially for some other kind of dismissible information (not to be confused with the Notification Bar).

The Sticky Promo container itself is both content and context agnostic. Content should be short and succinct, ideally just a few lines. Too much content will make the promo excessively tall and cover too much of the page.

Usage

Import using Webpack as an ES module:

import MzpStickyPromo from '@mozilla-protocol/core/protocol/js/sticky-promo';

Import using Webpack as CommonJS:

const MzpStickyPromo = require('@mozilla-protocol/core/protocol/js/sticky-promo');

Import as a global variable via a <script> tag:

const MzpStickyPromo = window.MzpStickyPromo;

You can then show the component using open().

MzpStickyPromo.open();

Tips

  • Use only one Sticky Promo per page.
  • Make initialize the component after the DOM has loaded.
  • The Sticky Promo is positioned in the lower right corner in LTR languages and in the lower left corner in RTL languages.
  • Add one of these product theme classes to include a logo above the title:
    • mzp-t-product-firefox
    • mzp-t-product-beta
    • mzp-t-product-developer
    • mzp-t-product-nightly
  • A dark theme is also available with the theme class mzp-t-dark.
  • you can set the sticky promo to automatically once the page is loaded by adding mzp-js-show-on-load to the class list.
<aside class="mzp-c-sticky-promo ">
    <button class="mzp-c-sticky-promo-close" type="button">Close</button>
    <h3 class="mzp-c-sticky-promo-title">A headline with 30 characters</h3>
    <p>Some body content, but keep it short. Just a sentence or two. Maybe three at the most.</p>

</aside>

<button id="showSticky" class="mzp-c-button" type="button">Show Sticky Promo</button>

<script src="../../protocol/js/sticky-promo.js"></script>

<script>
    (function() {
        'use strict';
        var showStickyBtn = document.getElementById("showSticky");
        showStickyBtn.addEventListener('click', MzpStickyPromo.open, false);
    })();
</script>