How to implement a dynamic-position inline template with a semi transparent blur strip

When implementing a dynamic template, it would be left up the publisher of an article to determine the best location to add the container when creating a new article or post. Typically, this would be the point from which the article should be cropped and where you want to see the Piano content lock template.

Steps to implement the dynamic-position inline template with a semi-transparent blur strip are as follows.

In the Piano dashboard:

Create an Offer template.
Set up a regular Composer experience for an inline template and specify a container name, let's say #piano-container.

On your website:

1. Add this piece of code to your JavaScript code:
```
// when a template is shown...
tp.push(["addHandler", "showOffer", () => {
  // ...we add a gradient strip above our template container (it's name should correspond to a specified one in Composer)...
  document.querySelector("#piano-container").classList.add("template-shown");
  // ...and hide everything after it within the same HTML container (also, the name should be checked)
  document.querySelectorAll("#piano-container ~ *").forEach((x) => {
    x.hidden = true;
  });
} ]);
```
2. Add this piece of CSS code describing a semi-transparent gradient strip to your CSS file (its height or level of transparency can be adjusted):
  
  .template-shown { position: relative; } .template-shown::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 200px; background-image: linear-gradient(to top, #ffffff 0%, #ffffff 30%, rgba(255, 255, 255, 0) 100%); }
3. Now, when editing a post, it's possible to put a line like the below example in any place. It only should be on the same level as other paragraphs/images/any elements so that it's not wrapped in extra tags:
```
<div id="piano-container"></div>
```

Last updated: June 26, 2026