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

With a dynamic template, the article publisher chooses where to place the container when creating a new article or post. This location marks where the article should be cropped and where the Piano content lock template should appear.

Follow these steps to implement the dynamic-position inline template with a semi-transparent blur strip.

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

Add the following JavaScript to your site. When the offer appears, the script adds the template-shown class to the Piano container and hides the content that follows it in the same parent container.

JavaScript

// When a template is shown...
tp.push(["addHandler", "showOffer", () => {
  // Add a gradient strip above the template container.
  // The selector should match the container name specified in Composer.
  document.querySelector("#piano-container").classList.add("template-shown");

  // Hide everything after the container within the same HTML container.
  document.querySelectorAll("#piano-container ~ *").forEach((x) => {
    x.hidden = true;
  });
}]);

Add the following CSS to create the semi-transparent gradient strip. You can adjust the height or transparency as needed.

CSS

.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%);
}

When editing a post, place the container wherever the content lock should appear. Keep it at the same level as other paragraphs, images, or page elements so it is not wrapped in extra tags.
HTML
```
<div id="piano-container"></div>
```

Last updated: July 30, 2026