Einen einbettbaren Klimaanlagen-Rechner bauen

Die meisten „Rechner"-Widgets im Web schleppen ein ganzes Framework, ein Analytics-SDK und drei Tracking-Pixel mit sich herum – für ein bisschen Multiplikation. Das geht schlanker.
Ich habe einen Klimaanlagen-Rechner als einzelne index.html gebaut: kein Build, keine Dependencies, keine Cookies. Er berechnet die passende Kühlleistung für einen Raum, schätzt die Stromkosten und lässt sich per iframe auf jeder Seite einbetten – inklusive einer white-label Affiliate-Mechanik. Hier die interessanten Teile.:

👉 Live-Demo: https://affilliator.de/tools/klimaanlage-rechner.html

## Die Fachlogik: von m² zu BTU Die Faustformel für Kühlbedarf ist erstaunlich simpel – ~60 Watt pro m², dann
Korrekturen:

  function calcCooling(area, height, sun, people) {
    let base = area * 60 * (height / 2.5) * sun; // W
    base += Math.max(0, people - 1) * 100;       // je Person +100 W
    const watts = Math.round(base);
    const btu   = Math.round(base * 3.412 / 100) * 100; // 1 W ≈ 3,412 BTU/h
    return { watts, btu };
  }

sun ist ein Faktor (1.0 schattig bis 1.45 Dachgeschoss). Das reicht für eine
belastbare Kaufentscheidung – niemand braucht hier eine thermodynamische
Simulation. ## White-Label per URL-Parameter

Der spannende Teil: Das Widget soll auf fremden Seiten einbettbar sein,
und der jeweilige Betreiber soll seinen eigenen Amazon-Partner-Tag
hinterlegen. Statt eines Backends reicht ein Query-Parameter:

  const DEFAULT_TAG = "meintag-21";
  function affTag() {
    const t = (new URLSearchParams(location.search).get("tag") || "").trim();
    return /^[a-zA-Z0-9]+-[0-9]{2}$/.test(t) ? t : DEFAULT_TAG;
  }

Einbetten sieht dann so aus:

```html width="100%" height="1180" style="border:0">

  Der Produkt-Link wird aus dem berechneten Ergebnis + Tag zusammengesetzt – ein
  simpler Amazon-Such-Deeplink, kein Product-Advertising-API-Key nötig:



  ```js
  const q   = encodeURIComponent(`mobile klimaanlage ${size} BTU`);
  const url =
  `https://www.amazon.de/s?k=${q}&tag=${encodeURIComponent(affTag())}`;

## Die eine Server-Hürde: X-Frame-Options

Ein Detail, das gern übersehen wird: Wenn deine Seite X-Frame-Options:
SAMEORIGIN sendet (guter Default gegen Clickjacking!), lässt sie sich*nicht* cross-origin einbetten. Für die Tool-Route musst du das gezielt
lockern – und nur dort, nicht global:

  location /tools/ {
      add_header Content-Security-Policy "frame-ancestors *" always;
      # bewusst kein X-Frame-Options in dieser location
  }

Weil add_header in nginx nicht additiv ist, „erbt" die location die
globalen Header nicht mehr – man muss die gewünschten (HSTS, nosniff …) hier
erneut setzen. Genau dieses Verhalten macht das gezielte Lockern sauber
möglich.

## Warum überhaupt Vanilla?

• Ladezeit: eine Datei, ~10 KB, kein Render-Blocking.
  • Einbettbarkeit: kein Framework-Konflikt auf fremden Seiten.
  • Lebensdauer: funktioniert auch in 5 Jahren noch, ohne npm install.

Der komplette Code ist quelloffen (MIT) – Fork und eigener Tag genügen. Wenn
du sowas selbst baust: Fang mit der Fachformel an, nicht mit dem Framework.

Die produktive Version läuft als kostenloses Tool auf
affilliator.de.