Inline template: whole clickable

There are cases when you need a whole template to be clickable. This can be a banner or only a single button which still needs to be a Piano template with all its functionality: tracking clicks, starting checkout, using variants with different colors and copy, or A/B testing.

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.

Making a whole template clickable

Technically, it's a regular inline template but usually a really small one. Wrap all its content into an interactive element tag like <a> or <button> and provide it with an action you want it to perform.

Keep in mind the UX best practices, such as specifying states — hover, focus, active — to let a user know that your banner (or button) is interactive.

Specifying the template size

Piano's 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 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.