@microbt/popup-container

React preview SDK for popup_new popup material (image + hotspots + copywriting + close button).

Install

pnpm add @microbt/popup-container react react-dom

Usage

import { PopupMaterialPreview } from "@microbt/popup-container";
import type { PopupMaterialContent } from "@microbt/popup-container";

type ApiResponse = {
  data: {
    creative: {
      content: unknown;
    };
  };
};

const content = (response as ApiResponse).data.creative.content as PopupMaterialContent;

export function Demo({ response }: { response: ApiResponse }) {
  return (
    <div style={{ width: 360 }}>
      <PopupMaterialPreview
        content={content}
        onAction={(payload) => {
          // payload.source: 'hotspot' | 'closeButton'
          // payload.action / payload.target / payload.tracking / payload.clickTracking
          void payload;
        }}
      />
    </div>
  );
}

onAction payload

type PopupMaterialTargetType = "url" | "app" | "wxbiz";

type PopupMaterialActionPayload = {
  source: "hotspot" | "closeButton";
  id: string;
  type: string;
  action?: string;
  target?: string;
  targetType?: PopupMaterialTargetType | (string & {});
  tracking?: Record<string, unknown>;
  clickTracking?: Record<string, unknown>;
};

Notes

• The component uses inline styles plus reset to keep rendering stable inside H5 hosts.
• Size is driven by container width; frame ratio is 16:9 (same as admin preview).
• Coordinates are percent values based on 750 width, same as the admin renderer.