Landing page: partial

By "partial" we mean here that you will have 1) some elements on your end and 2) a container where our template will run. The idea is absolutely the same as for the regular inline templates appearing, for example, inside an article, between its paragraphs. The only difference is that in this case the Piano template pretends to be part of the page, unlike an inline template in an article where it's clearly a separate block. At the same time, it has all information about terms, sign-in links, CTA buttons to start checkout easily; and all clicks performed inside a Piano template (and other user data) can be tracked and gathered to a report.

A very typical example of partial landing page is when a client wants this page to have a top menu or/and a footer same as on other pages of their website. So they prepare an empty page which contains only a top menu, a footer, and an empty <div> where a Piano template will be inserted. This template can contain offer information along with pretty anything like benefits, FAQs, contacts, advanced options, tips etc.

What will be coded on what side (Piano vs client) is up to you to decide.

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 a landing page: on your end or in Composer.

Specifying a template size

Piano inline templates (which a partial landing page basically is) 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 contents. 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..