Publisher Wiki & Widget Integration Encyclopedia | PC Part Comparator

Monetization & Affiliate Key Integration

Tue, 04 Aug 2026 00:00:00 +0000

Monetization & Affiliate Key Integration

The Comparator widgets allow media publishers, reviewers, and tech bloggers to monetize hardware recommendation traffic directly. By injecting your custom affiliate tracking tags into our Deal Monitor and comparison embeds, 100% of out-bound clickouts on “Go to offer” buttons carry your affiliate IDs.

1. Supported Affiliate Networks & Parameters

You can append affiliate tags globally via widget configuration or inline via data-affiliate-* attributes:

Store / Network	Tag Parameter	Example Value	Supported Networks
Amazon US	`data-tag-amazon`	`mytechblog-20`	Amazon Associates
Newegg US	`data-tag-newegg`	`8483920`	Impact Radius / CJ Affiliate
Best Buy	`data-tag-bestbuy`	`bby-pub-99`	Impact

Standard Embed Example with Affiliate Tags:

<iframe
 src="https://thecomparator.tech/widget/deal-monitor/?category=gpu&tag_amazon=myblog-20&tag_newegg=998811"
 width="100%"
 height="480"
 frameborder="0"
 loading="lazy"
 title="Live GPU Deal Monitor">
</iframe>

2. Compliance & CTA Wording Rules

To protect your publisher domain and maintain FTC compliance:

“Go to offer” vs “Buy Now”:
- We require all widget CTA buttons to read “Go to offer” (or “View on Amazon”) when prices are dynamic market snapshots.
- “Buy for $X” is strictly prohibited unless the price is guaranteed in real-time.
Dated Price Snapshots:
- Every offer price printed inside the widget displays a timestamp (e.g. Prices as of Aug 4, 2026).
Affiliate Disclosure Requirement:
- Publishers MUST include an inline affiliate disclosure near the widget (e.g., “When you purchase through links on our site, we may earn an affiliate commission.”).

3. Optimizing Click-Through Rates (CTR)

Contextual Category Pre-filtering: Embed GPU widgets in graphics card reviews, CPU widgets in processor reviews, and NVMe SSD widgets in storage roundups.
Match Preset to Article Context: Use preset=gaming-1440p for gaming articles, or preset=ai-llm for workstation/AI hardware articles.
Theme Matching: Use theme=auto so the widget matches your site’s light/dark mode seamlessly.

🧩 : Complete HTML snippet catalog & configuration options.
🎨 : Dark mode & responsive container rules.
🎓 : Overview of all publisher tools and features.

Theme Syncing & Responsive iFrames

Mon, 01 Jan 0001 00:00:00 +0000

Theme Syncing & Responsive iFrame Architecture

To ensure widgets blend seamlessly into host publisher websites without scrollbars or color mismatch, The Comparator uses assets/js/widget.js.

1. How Theme Synchronization Works

Host websites often switch between Light and Dark modes. The embedded widget listens for theme changes on the parent window using the HTML5 postMessage API.

[Host Website (Parent)] ── postMessage({ type: 'tc-theme', theme: 'dark' }) ──> [Comparator Widget (iFrame)]

Parent Host Script Setup

Add the lightweight widget.js script to your page footer:

<script src="https://thecomparator.tech/assets/js/widget.js" async></script>

This script automatically:

Detects dark class mutations on document.documentElement or document.body.
Checks localStorage.theme and prefers-color-scheme: dark.
Dispatches tc-theme events to all active Comparator iFrames on the page.

2. Dynamic Height Auto-Resizing

To prevent vertical scrollbars inside the iFrame, the widget calculates its content scroll height dynamically and notifies the parent window:

// Example inside widget.js listener
window.addEventListener('message', function(event) {
 if (event.data && event.data.type === 'tc-resize') {
 const iframe = document.querySelector(`iframe[src*="${event.data.widgetId}"]`);
 if (iframe) {
 iframe.style.height = event.data.height + 'px';
 }
 }
});

3. Fallback Without JavaScript

If the host site disables JavaScript:

The iFrame falls back to the default height="450" specified in HTML.
The theme defaults to the theme parameter specified in the URL (?theme=light or ?theme=dark).

Widget Embed Guide for Publishers

Mon, 01 Jan 0001 00:00:00 +0000

The Comparator provides lightweight, interactive hardware value widgets that publishers can embed directly into tech reviews and buyer guides.

Widget Type	Ideal Article Placement	What It Displays
Deal Monitor	Product Review Cards	Live lowest market price, stock status, 30-day price trend
Value Meter	Conclusion / Verdict Section	Algorithmic $0-100$ Value Score gauge relative to market
Versus Comparison	Head-to-Head Comparison Articles	Side-by-side spec comparison table & winner verdict

2. Standard iFrame Embedding

Paste the standard responsive iFrame code directly into your article editor HTML block:

<!-- The Comparator Deal Monitor Widget -->
<iframe src="https://thecomparator.tech/embed/deal-ryzen-7-9800x3d.html"
 width="100%"
 height="450"
 frameborder="0"
 scrolling="no"
 loading="lazy"
 title="AMD Ryzen 7 9800X3D — Price Snapshot &amp; Value Score">
</iframe>

3. CMS Platform Specific Instructions

WordPress (Gutenberg Editor)

Add a Custom HTML block inside your post editor.
Paste the <iframe> snippet above.
Save or publish your article.

Ghost CMS

Click the + icon in the Ghost editor and select HTML Card.
Paste the <iframe> snippet.

Webflow / Custom Platforms

Paste the code inside an Embed Component.

You can pass URL query parameters to customize widget behavior:

theme=dark or theme=light: Force specific color scheme.
currency=USD: Specify market currency.
subid=your_publisher_tag: Attach your custom affiliate tracking tag.

Example:

<iframe src="https://thecomparator.tech/embed/deal-ryzen-7-9800x3d.html?theme=dark&subid=techblog_review_2026" ...></iframe>

Publisher Wiki & Widget Integration Encyclopedia | PC Part Comparator

Monetization & Affiliate Key Integration

Monetization & Affiliate Key Integration

1. Supported Affiliate Networks & Parameters

Standard Embed Example with Affiliate Tags:

2. Compliance & CTA Wording Rules

3. Optimizing Click-Through Rates (CTR)

Theme Syncing & Responsive iFrames

Theme Syncing & Responsive iFrame Architecture

1. How Theme Synchronization Works

Parent Host Script Setup

2. Dynamic Height Auto-Resizing

3. Fallback Without JavaScript

Widget Embed Guide for Publishers

Widget Embed Guide for Publishers

1. Widget Types & Use Cases

2. Standard iFrame Embedding

3. CMS Platform Specific Instructions

WordPress (Gutenberg Editor)

Ghost CMS

Webflow / Custom Platforms

4. Customizing Widget Parameters

Publisher Wiki & Widget Integration Encyclopedia | PC Part Comparator

Monetization & Affiliate Key Integration

Monetization & Affiliate Key Integration

1. Supported Affiliate Networks & Parameters

Standard Embed Example with Affiliate Tags:

2. Compliance & CTA Wording Rules

3. Optimizing Click-Through Rates (CTR)

🔗 Related Publisher Guides

Theme Syncing & Responsive iFrames

Theme Syncing & Responsive iFrame Architecture

1. How Theme Synchronization Works

Parent Host Script Setup

2. Dynamic Height Auto-Resizing

3. Fallback Without JavaScript

Widget Embed Guide for Publishers

Widget Embed Guide for Publishers

1. Widget Types & Use Cases

2. Standard iFrame Embedding

3. CMS Platform Specific Instructions

WordPress (Gutenberg Editor)

Ghost CMS

Webflow / Custom Platforms

4. Customizing Widget Parameters