Widget Dokumentation
Erfahren Sie, wie Sie das AirType Finanzierungs-Widget integrieren und Ihr Team sicher per Magic-Link im Dashboard arbeiten lassen.
Widget erstellen
Erstellen Sie Ihr Widget unter /create. Dort konfigurieren Sie und aktivieren den Dashboard-Zugang per Magic Link:
Nach dem Erstellen erhalten Sie Ihre Customer-ID, den Embed-Code und einen Magic Link für den direkten Dashboard-Start.
Dashboard & Team-Zugriff
Das Dashboard ist unter /app/dashboard verfügbar und per Login geschützt.
/auth/login sendet einen sicheren Magic Link.Schnellstart
Fügen Sie das Widget mit einem einfachen iframe-Tag in Ihre Website ein:
<iframe
src="https://widget.airtype.de/widget?cid=IHRE_CUSTOMER_ID"
width="100%"
height="900"
frameborder="0"
style="border: none; max-width: 600px;"
></iframe>Ersetzen Sie IHRE_CUSTOMER_ID mit Ihrer Customer-ID, die Sie bei der Registrierung erhalten haben.
Embed Script (empfohlen)
Alternativ können Sie das Widget per Script einbinden. Das Script erstellt automatisch ein iframe und passt die Höhe dynamisch an.
<div id="airtype-widget"></div>
<script
src="https://widget.airtype.de/embed.js"
data-customer-id="IHRE_CUSTOMER_ID"
data-height="900"
data-max-width="600px"
data-primary-color="#16a34a"
data-property-platform="immoscout"
data-property-id="123456"
data-expose-url="https://www.immobilienscout24.de/expose/123456"
></script>Das optionale Attribut data-primary-color übergibt die Primärfarbe an den Lade-Spinner, damit er sofort in Ihrer Markenfarbe erscheint. Die data-property-*-Attribute übertragen Objekt-Kontext (Plattform/ID/Exposé-Link), der bei aktivierten Objektdaten übernehmen (dwEnabled=1) zusammen mit dem Lead gespeichert und in der Lead-E-Mail angezeigt wird.
Objekt / Exposé Kontext (optional)
Wenn Sie Objektdaten übernehmen aktivieren (dwEnabled=1), kann das Widget zusätzlich Objekt-Informationen aus der Einbettungsseite übernehmen:
Diese Werte werden als property_platform, property_id und expose_urlbeim Lead gespeichert und in der Benachrichtigungs-E-Mail unter Objekt / Exposé angezeigt.
Variante A: Übergabe über embed.js (empfohlen)
Nutzen Sie die data-property-*-Attribute (siehe Beispiel oben). Das Script überträgt die Werte via postMessage an das Widget.
Variante B: Übergabe per URL-Parameter an das Widget
https://widget.airtype.de/widget?cid=IHRE_CUSTOMER_ID&dwEnabled=1&property_platform=immoscout&property_id=123456&expose_url=https%3A%2F%2Fwww.immobilienscout24.de%2Fexpose%2F123456Dynamische Höhenanpassung
Das Widget sendet automatisch seine aktuelle Höhe an die Elternseite via postMessage. So können Sie die iframe-Höhe dynamisch anpassen, wenn Benutzer Abschnitte auf- oder zuklappen.
Wenn Sie das Embed Script verwenden, ist die Höhenanpassung bereits enthalten. Bei einem reinen iframe benötigen Sie den Listener unten.
Message Format
{
type: 'airtype-widget-resize',
height: 850, // Höhe in Pixeln
source: 'airtype-widget'
}JavaScript Beispiel
Fügen Sie diesen Code auf Ihrer Seite ein, um die iframe-Höhe automatisch anzupassen:
<script>
window.addEventListener('message', function(event) {
// Sicherheitscheck: Nur Nachrichten vom Widget verarbeiten
if (event.data?.type === 'airtype-widget-resize' &&
event.data?.source === 'airtype-widget') {
const iframe = document.getElementById('airtype-widget');
if (iframe && event.data.height > 0) {
iframe.style.height = event.data.height + 'px';
}
}
});
</script>
<iframe
id="airtype-widget"
src="https://widget.airtype.de/widget?cid=IHRE_CUSTOMER_ID"
width="100%"
frameborder="0"
style="border: none; max-width: 600px; transition: height 0.3s ease;"
></iframe>React Beispiel
import { useState, useEffect } from 'react';
function AirTypeWidget({ customerId }) {
const [height, setHeight] = useState(900);
useEffect(() => {
const handleMessage = (event) => {
if (event.data?.type === 'airtype-widget-resize' &&
event.data?.source === 'airtype-widget') {
setHeight(event.data.height);
}
};
window.addEventListener('message', handleMessage);
return () => window.removeEventListener('message', handleMessage);
}, []);
return (
<iframe
src={`https://widget.airtype.de/widget?cid=${customerId}`}
width="100%"
height={height}
style={{ border: 'none', maxWidth: 600, transition: 'height 0.3s' }}
/>
);
}Tipp: Fügen Sie eine CSS-Transition hinzu (transition: height 0.3s), um sanfte Höhenänderungen zu erzielen.
URL Parameter
Sie können das Widget über URL-Parameter anpassen und Daten von Ihrer Website übergeben:
| Parameter | Beschreibung | Beispiel |
|---|---|---|
cid | Ihre Customer-ID (erforderlich) | abc123 |
primaryColor | Primärfarbe (Hex) | #16a34a |
widgetBg | Widget Hintergrundfarbe (Hex) | #f5f5f7 |
surfaceBg | Flächen-/Card-Hintergrundfarbe (Hex) | #ebebef |
inputBg | Input Hintergrundfarbe (Hex) | #ebebef |
borderColor | Rahmenfarbe (Hex) | #e5e7eb |
textColor | Textfarbe (Hex) | #111827 |
surfaceTextColor | Flächen-Textfarbe (Hex) | #111827 |
inputTextColor | Input-Textfarbe (Hex) | #111827 |
borderRadius | Rahmen-Radius in Pixeln | 24 |
controlRadius | Control-Radius in Pixeln (Inputs, Buttons, Auswahl-Buttons) | 16 |
fontFamily | Schriftart (CSS font-family Wert) | Inter, system-ui |
layout | Layout-Variante | one-column oder two-column |
showLogo | Logo im Widget-Header anzeigen (Standard: aus) | 1 oder true |
logoUrl | URL zum Logo (nur wirksam wenn showLogo aktiviert ist) | https://example.com/logo.png |
dwEnabled | Daten von Website aktivieren | 1 |
tracking | Analytics/Tracking deaktivieren | 0 oder false |
utm_source | UTM Source (wird in Analytics gespeichert) | google |
utm_medium | UTM Medium (wird in Analytics gespeichert) | cpc |
utm_campaign | UTM Campaign (wird in Analytics gespeichert) | winter-sale |
purchasePrice | Kaufpreis vorausfüllen | 350000 |
propertyType | Immobilienart vorausfüllen | house, apartment, multi, land |
showBankOffers | Bankangebote anzeigen | 1 |
location | Standort/PLZ vorausfüllen | 10115 oder Berlin |
brokerCommission | Maklergebühr aktivieren (ja/nein) | 1, true, ja |
brokerCommissionPercent | Maklergebühr in Prozent | 3.57 oder 5.95 |
rentalIncome | Monatliche Mieteinnahmen (Kaltmiete) für Kapitalanlagen | 1200 |
usagePurpose | Nutzungsart (Eigennutzung oder Kapitalanlage) | EIGENGENUTZT oder VERMIETET |
collapsed | Widget im eingeklappten Zustand starten (Standard: ausgeklappt) | 1 oder true |
property_platform | Objekt-Plattform (nur bei dwEnabled=1) | immoscout |
property_id | Objekt-ID (nur bei dwEnabled=1) | 123456 |
expose_url | Exposé-Link/URL (nur bei dwEnabled=1) | https://... |
Beispiel mit Parametern
https://widget.airtype.de/widget?cid=abc123&dwEnabled=1&purchasePrice=450000&propertyType=apartmentBeispiel mit Theme-Anpassung
https://widget.airtype.de/widget?cid=abc123&widgetBg=%23ffffff&surfaceBg=%23f3f4f6&inputBg=%23f3f4f6&borderColor=%23e5e7eb&textColor=%23111827&surfaceTextColor=%23111827&inputTextColor=%23111827&borderRadius=28&controlRadius=10&fontFamily=Inter%2C%20system-uiBeispiel für Kapitalanlage mit Mieteinnahmen
https://widget.airtype.de/widget?cid=abc123&dwEnabled=1&purchasePrice=320000&propertyType=apartment&usagePurpose=VERMIETET&rentalIncome=950&location=10115&brokerCommissionPercent=3.57Tipp für Immobilienportale: Sie können die Parameter dynamisch aus Ihren Exposé-Daten befüllen. Bei Kapitalanlagen übergeben Sie die erwartete Kaltmiete über rentalIncome – das Widget setzt dann automatisch die Nutzungsart auf "Kapitalanlage".
Lead Benachrichtigungen (E-Mail)
Wenn ein Interessent das Widget absendet, werden die Kontaktdaten und Finanzierungsdaten per E-Mail versendet.
finance@airtype.deAnalytics / Tracking (optional)
Das Widget kann anonymisierte Nutzungs-Events erfassen (z.B. Step-Views, Klicks, Conversion), um im Dashboard Statistiken anzeigen zu können.
/api/widget/events gesendet.utm_source, utm_medium, utm_campaign sowie Referrer/Page-URL werden gespeichert.Tracking deaktivieren
Falls Sie kein Tracking möchten, deaktivieren Sie es per URL-Parameter:
https://widget.airtype.de/widget?cid=IHRE_CUSTOMER_ID&tracking=0Sicherheitshinweis
Bei der Verarbeitung von postMessage-Events sollten Sie immer die source und type Felder überprüfen, um sicherzustellen, dass die Nachricht vom AirType Widget stammt. Das Widget sendet immer source: 'airtype-widget' und z.B. type: 'airtype-widget-resize'. Beim Einbetten über embed.js kann zusätzlich Objekt-Kontext via airtype-widget-request-context / airtype-widget-context übertragen werden.
Haben Sie Fragen?
info@airtype.de