Widget Integration

Embeddable Widget

Was ist der RaumKlima Planer?

Ein interaktives Widget für Ihre Website. Endkunden planen eigenständig Heizungs- und Lüftungsprojekte — mit Grundriss-Upload, Raumkonfiguration und Kontaktanfrage. Sie erhalten qualifizierte Leads mit allen technischen Details als PDF.

Live-Beispiel ansehen

So funktioniert's — in 5 Schritten

1

Projekttyp wählen

Vollheizung, Zusatzheizung, Schimmelsanierung oder AirUnit

2

Gebäudedaten

Baujahr, Dämmung, Fläche erfassen

3

Grundriss & Räume

Interaktiver Editor mit Upload

4

Dokumente

Fotos, Pläne, Anmerkungen

5

Kontakt & Absenden

Lead wird sofort weitergeleitet

Vorteile für Partner

Qualifizierte Leads

Direkt über Ihre eigene Website — kein Umweg über Drittportale.

Zeitersparnis

Kunden planen eigenständig, rund um die Uhr — auch außerhalb Ihrer Geschäftszeiten.

2 Zeilen Code

Einfach einbetten — keine eigene Server-Infrastruktur nötig.

White-Label

Passen Sie das Widget mit Ihrer eigenen Markenfarbe an.

Kostenlos registrieren

Jetzt Partner werden

Registrieren Sie sich kostenlos und erhalten Sie Ihren Partner-Schlüssel, um das Widget sofort auf Ihrer Website einzubinden.

Integrationsanleitung

Diese Anleitung zeigt Ihnen, wie Sie den Laco-Heat RaumKlima Planer als Widget in Ihre Website einbinden können.

Schnellstart

Fügen Sie folgenden Code an der Stelle ein, wo das Widget erscheinen soll:

<!-- Widget Container -->
<div id="lacoheat-planner" data-partner="IHR-PARTNER-SCHLUESSEL"></div>

<!-- Widget laden -->
<script src="https://projektplaner.laco-heat.de/widget/widget.js"></script>

Hinweis: Ersetzen Sie IHR-PARTNER-SCHLUESSEL durch Ihren individuellen Partner-Schlüssel, den Sie von uns erhalten haben.

Konfigurationsmöglichkeiten

Sie können das Widget über Data-Attribute anpassen:

<div id="lacoheat-planner"
     data-partner="IHR-PARTNER-SCHLUESSEL"
     data-types="vollheizung,zusatzheizung,schimmelsanierung,airunit"
     data-color="#FF5722">
</div>

Verfügbare Attribute

AttributBeschreibungBeispiel
data-partnerPflicht – Ihr Partner-Schlüsseldata-partner="musterfirma"
data-typesNur bestimmte Projekttypen anzeigendata-types="vollheizung,zusatzheizung"
data-colorIhre Markenfarbe (Hex-Format)data-color="#FF5722"

Verfügbare Projekttypen

  • vollheizung – Vollheizung
  • zusatzheizung – Zusatzheizung
  • schimmelsanierung – Schimmelsanierung
  • airunit – Lüftungsanlagen (AirUnit)

Wenn Sie data-types nicht angeben, werden alle Projekttypen angezeigt.

Lead-Tracking mit onComplete

Das Widget bietet einen Callback, der aufgerufen wird, sobald ein Kunde das Formular erfolgreich abgeschlossen hat. Damit können Sie Conversions tracken.

Grundlegende Verwendung

<script>
    window.LacoheatPlanner = {
        onComplete: function(projectId) {
            console.log('Projekt erfolgreich abgeschlossen:', projectId);
            // Hier können Sie eigene Aktionen ausführen
        }
    };
</script>

<!-- Widget Container -->
<div id="lacoheat-planner" data-partner="IHR-PARTNER-SCHLUESSEL"></div>

<!-- Widget laden (NACH dem Callback-Script!) -->
<script src="https://projektplaner.laco-heat.de/widget/widget.js"></script>

Wichtig: Das window.LacoheatPlanner-Objekt muss vor dem Widget-Script definiert werden!

Google Ads Conversion Tracking

So tracken Sie abgeschlossene Leads als Google Ads Conversions:

1. Google Ads Tag einbinden

Falls noch nicht vorhanden, fügen Sie das Google Ads Tag in Ihren <head>-Bereich ein:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXXXX"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'AW-XXXXXXXXXX');
</script>

Ersetzen Sie AW-XXXXXXXXXX durch Ihre Google Ads Conversion-ID.

2. Widget mit Conversion Tracking einbinden

<script>
    window.LacoheatPlanner = {
        onComplete: function(projectId) {
            // Google Ads Conversion auslösen
            gtag('event', 'conversion', {
                'send_to': 'AW-XXXXXXXXXX/YYYYYYYYYY'
            });

            console.log('Lead-Conversion getrackt für Projekt:', projectId);
        }
    };
</script>

<div id="lacoheat-planner" data-partner="IHR-PARTNER-SCHLUESSEL"></div>
<script src="https://projektplaner.laco-heat.de/widget/widget.js"></script>

Ersetzen Sie AW-XXXXXXXXXX/YYYYYYYYYY durch Ihre vollständige Conversion-ID (bestehend aus Conversion-ID und Conversion-Label).

Wo finde ich meine Conversion-ID?

  1. Melden Sie sich bei Google Ads an
  2. Gehen Sie zu Tools & Einstellungen → Messung → Conversions
  3. Wählen Sie Ihre Conversion-Aktion aus oder erstellen Sie eine neue
  4. Unter "Tag einrichten" finden Sie Ihre Conversion-ID im Format AW-XXXXXXXXXX/YYYYYYYYYY

Google Analytics 4 Event Tracking

Falls Sie Google Analytics 4 nutzen:

<script>
    window.LacoheatPlanner = {
        onComplete: function(projectId) {
            gtag('event', 'generate_lead', {
                'event_category': 'lacoheat_widget',
                'event_label': projectId,
                'value': 1
            });
        }
    };
</script>

Mehrere Tracking-Systeme kombinieren

Sie können im onComplete-Callback mehrere Tracking-Systeme gleichzeitig ansprechen:

<script>
    window.LacoheatPlanner = {
        onComplete: function(projectId) {
            // Google Ads Conversion
            gtag('event', 'conversion', {
                'send_to': 'AW-XXXXXXXXXX/YYYYYYYYYY'
            });

            // Google Analytics 4 Event
            gtag('event', 'generate_lead', {
                'event_category': 'lacoheat_widget',
                'event_label': projectId
            });

            // Facebook Pixel (falls vorhanden)
            if (typeof fbq !== 'undefined') {
                fbq('track', 'Lead', {
                    content_name: 'lacoheat_projektplaner'
                });
            }

            // Microsoft Ads / Bing (falls vorhanden)
            if (typeof uetq !== 'undefined') {
                uetq.push('event', 'lead', {});
            }
        }
    };
</script>

Vollständiges Beispiel

Hier ein komplettes Beispiel einer HTML-Seite mit Widget und Google Ads Tracking:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RaumKlima Planer | Musterfirma</title>

    <!-- Google Ads Tag -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXXXX"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'AW-XXXXXXXXXX');
    </script>
</head>
<body>
    <h1>Heizungsplaner</h1>
    <p>Planen Sie jetzt Ihre neue Infrarotheizung:</p>

    <!-- Callback vor dem Widget definieren -->
    <script>
        window.LacoheatPlanner = {
            onComplete: function(projectId) {
                // Google Ads Conversion
                gtag('event', 'conversion', {
                    'send_to': 'AW-XXXXXXXXXX/YYYYYYYYYY'
                });
                console.log('Lead erfolgreich erfasst:', projectId);
            }
        };
    </script>

    <!-- Widget Container mit optionaler Branding-Farbe -->
    <div id="lacoheat-planner"
         data-partner="musterfirma"
         data-color="#FF5722">
    </div>

    <!-- Widget Script laden -->
    <script src="https://projektplaner.laco-heat.de/widget/widget.js"></script>
</body>
</html>

Fehlerbehebung

Widget wird nicht angezeigt

  • Prüfen Sie, ob ein Element mit id="lacoheat-planner" existiert
  • Prüfen Sie, ob data-partner korrekt gesetzt ist
  • Öffnen Sie die Browser-Konsole (F12) und prüfen Sie auf Fehlermeldungen

"Partner nicht gefunden" Fehler

Der data-partner-Wert muss exakt mit Ihrem Partner-Schlüssel übereinstimmen. Kontaktieren Sie uns, falls Sie unsicher sind.

CORS-Fehler in der Konsole

Ihre Domain muss bei uns für das Widget freigeschaltet sein. Teilen Sie uns bitte mit, von welchen Domains Sie das Widget einbinden möchten.

Bei technischen Fragen zur Integration wenden Sie sich bitte an Ihren Ansprechpartner bei Laco-Heat.