Can tp.offer.show() and tp.template.show() Be Used to Show Lightweight Templates?

Yes. Lightweight Templates can be rendered with the same tp.offer.show() and tp.template.show() methods from tinypass.min.js that are used for Classic templates. To render a template in Lightweight mode, pass engine: "LIGHTWEIGHT" in the options object. Additional styling and layout options are available specifically for Lightweight Templates.

Basic Usage

tp.offer.show({
  offerId: "OFXXXXXXXXXX",
  templateId: "OTXXXXXXXXXX",
  engine: "LIGHTWEIGHT"
});

The same parameters apply to tp.template.show().

Full Parameter Reference

The following options are supported by both tp.offer.show() and tp.template.show():

tp.offer.show({
  offerId: string;                  // Offer ID
  templateId: string;               // Template ID - required

  // Lightweight mode trigger
  engine: "LIGHTWEIGHT" | "CLASSIC";  // "LIGHTWEIGHT" routes to pianoWidgets

  // Display
  displayMode?: "inline" | "modal";  // default: "modal"
  containerSelector?: string;       // required when displayMode = "inline"
  templateVariantId?: string;

  // Styling (Lightweight only)
  encapsulationType?: "shadow" | "iframe" | "plain";
  showCloseButton?: boolean;
  zIndex?: number;
  isPageScrollDisabled?: boolean;
  isBackdropVisible?: boolean;
  isCloseOnBackdropClick?: boolean;
  backdrop?: {
    color?: string;
    transparency?: number;
  };
  position?: {
    desktop?: IPositionConfig;
    tablet?: IPositionConfig;
    mobile?: IPositionConfig;
  };
  size?: {
    desktop?: ISizeConfig;
    tablet?: ISizeConfig;
    mobile?: ISizeConfig;
  };
});

Supporting Interfaces

interface IPositionConfig {
  stickTo: "custom" | "center" | "top" | "bottom" | "left" | "right";
  top?: string;
  left?: string;
  right?: string;
  bottom?: string;
}

interface ISizeConfig {
maxWidth?: string;
maxHeight?: string;
}

// pn-widgets/packages/types/widget/widget.d.ts
type IWidgetContainerType = "iframe" | "plain" | "shadow";
type IWidgetAppearanceType = "modal" | "inline";

Key Points

engine: "LIGHTWEIGHT" is the single parameter that routes the call to the Lightweight rendering pipeline (pianoWidgets). Omit it or set it to "CLASSIC" to render a Classic template.
encapsulationType, backdrop, position, and size are only applied when engine: "LIGHTWEIGHT" is set. These options have no effect on Classic templates.
containerSelector is required when displayMode is "inline" — this is the DOM element the template will render into.
position and size accept separate configurations for desktop, tablet, and mobile, allowing responsive layouts from a single call.

Last updated: July 07, 2026