Ribbon: collapsible

Ribbons are typical inline templates being inserted to a <div> container on the client's end. All styles, animation effects, and other magic should also be described on the client's end. Usually, the element sticks to the page bottom (or top — up to you) and looks like a narrow strip with a catchy copy and a CTA. To get a clearer idea of what it is, please see the demo.

DemoTo return from the demo page, please use the browser Back button. We were trying to make the demo as close to real life as possible, and did not provide any link to go back intentionally.

How-to

Setting up a template

There're 2 ways to set up an inline template: on your end or in Composer.

Speaking about ribbons specifically. Since you want the container to be "glued" to the top/bottom of your page, you need to add these styles to its class (the example class here is called .piano-container) in your CSS:

  .piano-container {
    position: fixed;
    /* for bottom position */
    bottom: 0;
    left: 0;
    width: 100%;
    /* shadow is an optional property */
    box-shadow: 0 0 28px 0 rgba(51, 51, 51, 0.1);
  }

To position the ribbon at the top of you page, replace "bottom" with "top" in the sample above (line 4). Also, shadow (the .box-shadow property, line 8) is optional. But it helps to distinguish the ribbon from the rest of the content. This role could be also played by a contrast background color or a border.

When applicable, order your layers properly by adjusting the z-index property.

Making it collapsible

The client doesn't need to do anything on their end in order to make a template collapse/expand. It'd better be done in the template code on Piano's end (in the dashboard). The only thing to keep in mind as always is that the container should not have a fixed height. Let the template recalculate its parameters itself.

To add the ability to be collapsed, you need 3 things.

1. Add a button-switcher which will toggle between 2 views — collapsed and expanded.
2. Attach an event listener to this button which will add and remove a CSS class (say, .widget--collapsed) for a collapsed view on click.
3. Make everything visible by default and describe a CSS class like .widget--collapsed which will be added to the template on click (and removed on another click) and switch the view. For example, to make a button hide in a collapsed view add something like this:

  .widget--collapsed .widget__button {
    display: none;
  }

You may hide pretty much anything in the same way by using CSS selectors. You can also change the switcher-button state according to your current view (if it's about an angle arrow, it's a good way to flip it). The class names can be replaced with yours.

Specifying the template size

Piano inline templates simply take 100% of the parent container width. By parent container we mean the <div> you specify on your end for the Piano template to show up. Regarding its height, the browser counts it automatically according to the template content. So nothing needs to be defined. Instead, just let the Piano template be parsed freely — things like setting up a fixed height would prevent it from displaying correctly.

If you need an expandable template rather than collapsible, all you need is to slightly change the logic and add a .widget--open instead of .widget--collapsed, or simply add the .widget--collapsed class to the template by default.