When deploying personalized or recommendation-driven components from the Tweakwise Builder (like People Like You, Recently Viewed, Previously Bought), presenting clear visual cues to your shoppers is a powerful strategy. Informing a user that a set of products is shown because of "People Like You" or "Frequently Bought Together" directly influences trust and boosts conversion.

Overview

This document guides you through intercepting the Tweakwise JS rendering cycle to dynamically identify where a product tile originated from and inject custom labels into the DOM.

Implementation

Tweakwise provides functional and product-specific lifecycle events during page rendering.

Use the visible hook to access component data and the target element:

"twn.product.visible": function (e) {
  if (e.data.origin) {
    // Check component type and add custom elements
  }
}

Example: People Like You Component

Here's how to display a label for the "People Like You" component:

"twn.product.visible": function (e) {
  if (e.data.origin) {
    if (e.data.origin.type === "ai-personal-product") {
      var badge = document.createElement("span");
      badge.classList.add("tw__personal-product");
      badge.innerHTML = "People Like You";
      e.targetElement.appendChild(badge);
    }
  }
}

Extending the Pattern

You can extend this pattern to handle multiple component types:

"twn.product.visible": function (e) {
  if (e.data.origin) {
    switch (e.data.origin.type) {
      case "ai-personal-product":
        addLabel(e.targetElement, "People Like You", "tw__personal-product");
        break;
      case "trending-product":
        addLabel(e.targetElement, "Trending", "tw__trending");
        break;
    }
  }
}

function addLabel(element, text, className) {
  var badge = document.createElement("span");
  badge.classList.add(className);
  badge.innerHTML = text;
  element.appendChild(badge);
}

This approach provides a flexible way to add contextual labels to any builder component based on its origin type.

Notes & Considerations

• As this is custom on your platform, the label can be styled as desired
• In this example we use the twn.product.visible hook. This hook triggers when a product tile is rendered and enters the viewport. It is also possible to use the twn.request.success.