ROI-Kalkulatoren auf link11.com einbinden

Übersicht

Die ROI-Kalkulatoren sind als eigenständige HTML-Dateien gebaut (Vanilla HTML/CSS/JS, keine externen Abhängigkeiten). Für die Einbindung in die Link11 WordPress-Webseite gibt es drei Ansätze.

Empfohlen
Option A — iframe-Einbettung

Warum: Schnellste Umsetzung, kein Risiko für Konflikte mit WordPress-Theme/Plugins, unabhängig deploybar.

So funktioniert es

<iframe
  src="https://roi.link11.com/concept1.html?product=ddos&lang=de"
  width="100%"
  height="800"
  frameborder="0"
  style="border: none; border-radius: 16px;
         max-width: 720px; margin: 0 auto; display: block;"
  loading="lazy"
  title="Link11 DDoS ROI Calculator"
></iframe>

// PostMessage für dynamische iframe-Höhe
function postHeight() {
    const h = document.body.scrollHeight;
    window.parent.postMessage({ type: 'roi-calc-height', height: h }, '*');
}
window.addEventListener('load', postHeight);
new ResizeObserver(postHeight).observe(document.body);

window.addEventListener('message', function(e) {
    if (e.data && e.data.type === 'roi-calc-height') {
        document.querySelectorAll('iframe[src*="roi.link11.com"]')
            .forEach(function(f) {
                f.style.height = (e.data.height + 20) + 'px';
            });
    }
});

Vorteile

• Zero-Risk: Keine Interaktion mit WordPress-Theme, Plugins oder Caching
• Unabhängiges Deployment: Kalkulatoren können aktualisiert werden ohne WordPress anzufassen
• URL-Parameter: Steuern Produkt + Sprache: ?product=cdn&lang=en
• Responsive: Kalkulatoren sind bereits mobil-optimiert
• Performance: loading="lazy" verhindert Ladezeit-Impact

WordPress-Umsetzung

• Gutenberg: Custom HTML Block oder Shortcode
• Elementor: HTML Widget
• WPBakery: Raw HTML Element
• WPML/Polylang: Unterschiedliche iframe-URLs für DE/EN (?lang=de vs ?lang=en)

WordPress Shortcode (Copy & Paste)

In functions.php oder als Mini-Plugin einfügen:

function link11_roi_calculator_shortcode($atts) {
    $atts = shortcode_atts(array(
        'concept' => '1',
        'product' => 'ddos',
        'lang'    => 'de',
        'height'  => '800',
    ), $atts);

    $base_url = 'https://roi.link11.com/';
    $file = 'concept' . intval($atts['concept']) . '.html';
    $params = http_build_query(array(
        'product' => sanitize_text_field($atts['product']),
        'lang'    => sanitize_text_field($atts['lang']),
    ));

    return sprintf(
        '<iframe src="%s%s?%s" width="100%%" height="%d"
         frameborder="0"
         style="border:none;border-radius:16px;
                max-width:720px;margin:0 auto;display:block;"
         loading="lazy"
         title="Link11 ROI Calculator"></iframe>',
        esc_url($base_url),
        esc_attr($file),
        esc_attr($params),
        intval($atts['height'])
    );
}
add_shortcode('link11_roi', 'link11_roi_calculator_shortcode');

Nutzung im WordPress-Editor:

[link11_roi concept="1" product="ddos" lang="de"]
[link11_roi concept="2" lang="en"]
[link11_roi concept="3" product="cdn" lang="de" height="900"]

Alternative
Option B — WordPress Custom Block Plugin

Wann: Wenn das Content-Team eine visuellere Einbettung wünscht (Gutenberg Block mit Dropdown für Produkt-Auswahl).

• ~2–4 Stunden Entwicklung
• Erfordert ein kleines WordPress-Plugin mit register_block_type()
• Block rendert intern den iframe mit Auswahl-UI im Editor
• Vorteil: Content-Team kann Kalkulatoren per Drag & Drop einbauen

Nur bei Bedarf
Option C — Direkte Integration (Nativ)

Wann: Falls absolute Theme-Integration gewünscht (gleiche Fonts, gleiche Farben, nahtloses Scrolling).

• CSS-Variablen des WordPress-Themes auf die Kalkulator-Variablen mappen
• JavaScript + HTML als WordPress Custom Template Part oder Custom Shortcode inline einbinden
• Demo-Bar (Produktswitcher) entfernen, da nur ein Produkt pro Seite nötig

Aufwand: ~1–2 Tage. Theme-Abhängigkeit beachten: Änderungen am WP-Theme können Kalkulator brechen. Caching-Risiko: WP-Caching-Plugins könnten JavaScript beeinflussen.

Vergleich

Nächste Schritte