Piano offer templates
what you can do about them
and how
Welcome to Piano offer templates! What one needs to know in the first place is that there're 2 main types of templates: modal and inline. Modals are basically pop-ups overlapping the whole page and blocking its content. Inline templates are widgets which can be built in any block on your website — they can appear between article paragraphs, slide up from the very bottom, or be standalone landing pages. In these documents you will find tons of examples of using our templates, both modal and inline, and guidelines on how to implemet every particular case. Please bear in mind they are only examples, and you can figure out your own custom variant! Don't hesitate to come up with ideas, address them to the Piano guys you communicate with, we're always happy to help.
Modal templates
The modal format is a dominant format, commonly used for locking the content, presenting subscriptions or registration offers. A layer "over" the content, it can be either a hard lock or a dismissible window. Modal can open checkout, or the call-to-action (CTA) buttons may lead, for example, to a subscription landing page. Also it's a common use case to intercept ad blockers. The backdrop "under" the modal can have any color and opacity, here is how.
Inline templates
While a modal is a pop-up which creates its context (backdrop and position) itself, an inline template requires a client to specify a container where it will "live". In terms of HTML, it could be a simple empty <div>. The position and dimensions of the container, as well as the optional surrounding styling options, such as shadows or animations, should be added by the client. All you need is CSS and probably JavaScript. There're tons of ways of using inline templates. Here we give you some examples and general instructions.
Inline templates: Ribbons
Sticky ribbons are communication templates often used for presenting the subscription product or short messages in the context of a use case (e.g. displaying an offer when a certain number of free articles remains in a metered paywall or offering a special discount to a special targeted group of site visitors). Ribbons can be stuck to the bottom or to the top of the page, their position is being customized on the client's end with the help of CSS.
Inline templates: Built-in
Inline templates serve for the same purpose as modal formats: locking the content and presenting subscription or registration offers. They are also often used for displaying a newsletter or app download offers based on the targeting in Piano Composer. Unlike modal formats covering the whole page, an inline element is determined by the position of a container (which is set up on the client's end) within the page. Also they are not hiding ads, so the revenue from viewed or clicked ads kepps flowing. If inline is used for content locking, a semitransparent layer on top of them with a fade-out effect, indicating that the article is cropped and there is more text "behind", is recommended.
Inline templates: Landing pages
The best place to purchase a subscription, landing page can be either built within Piano templates completely or combined of a Piano template (only the central part with CTA buttons and pricing) and the client's front end. Such pages usually have higher conversion rates than subscriptions on articles because the motivation of coming there is different from "just" reading an article. To build a properly functioning subscription landing page is not easy: take your time, study public sources —or purchase Optimization
services for it. Use A/B tesing for improving them.
Inline templates: Other
Other, less dominant formats (sticky square, firing a modal etc.), are technically inline templates being inserted into containers created on the client's end. Sometimes they look like modals (sticky square) because they overlap the page (though partially) and cannot be scrolled away, but still they are built as inlines. Such inline widgets are used for similar use cases as "built-in inlines", such as newsletter subscription offers, app downloads and targeted messaging to selected visitor segments. In some cases, experimenting with the design and UX of these formats can significantly improve results. Your creativity is the only limit (usually).