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 dismissable 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.

This component requires protocol-sticky-promo.js. The promo is hidden by default and made visible by the Mzp.StickyPromo.open() function. As a helper, you can set the sticky promo to automatically once the page is loaded by adding mzp-js-show-on-load to the class list.

Tips

  • Use only one Sticky Promo per page.
  • 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.
<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/protocol-sticky-promo.js"></script>

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