Integration einrichten

Das MYM Estimate Widget ist ein natives Web Component: eine Script-Zeile plus ein HTML-Tag, lauffähig in jeder Website (HTML, Webflow, React, Vue, …). Der Zugriff wird über einen domain-gebundenen API-Key gesteuert; Design und Verhalten werden zentral pro Kunde konfiguriert.

Integration in 3 Schritten

Zugangsdaten anfordern

Nennen Sie uns die Domains, auf denen das Widget laufen soll (z. B. www.ihre-domain.de). Sie erhalten einen API-Key (pk_live_…), der ausschließlich auf diesen Domains funktioniert — er darf also sichtbar im HTML stehen.

Snippet einfügen

Zwei Zeilen an beliebiger Stelle Ihrer Seite:

<script src="https://estimation.meetyourmakler.de/mym-widget.iife.js" async></script>
<mym-estimate-widget api-key="pk_live_IHR_KEY"></mym-estimate-widget>

Fertig

Das Widget rendert einen Button, der den Bewertungsdialog öffnet. Farben, Eckenradius und der Abschluss-CTA kommen aus Ihrer zentralen Konfiguration — Änderungen daran erfordern keine Anpassung an Ihrer Website.

Sofort selbst ausprobieren (Sandbox)

Zum Testen gibt es einen öffentlichen Sandbox-Key, der nur auf localhost funktioniert. Speichern Sie folgende Datei als index.html:

<!DOCTYPE html>
<html lang="de">
<head><meta charset="utf-8"><title>Widget-Test</title></head>
<body>
  <h1>Mein Widget-Test</h1>

  <script src="https://estimation.meetyourmakler.de/mym-widget.iife.js" async></script>
  <mym-estimate-widget api-key="pk_test_9a32ed5f9407d37830a0ae70e87049e103b7"></mym-estimate-widget>
</body>
</html>

Dann einen lokalen Server im selben Ordner starten und http://localhost:8000 öffnen:

# Variante A (Python, vorinstalliert auf macOS/Linux)
python3 -m http.server 8000

# Variante B (Node.js)
npx serve -l 8000

Wichtig: Die Datei per Doppelklick zu öffnen (file://…) funktioniert nicht — der Browser sendet dann keinen Origin-Header und die Anfrage wird mit 403 abgelehnt. Genau diese Domain-Prüfung schützt später Ihren eigenen Key. Der Sandbox-Key ist auf 60 Anfragen/Minute begrenzt.

Konfiguration

Optionale Attribute am <mym-estimate-widget>-Element:

Attribut	Werte	Beschreibung
`api-key`	`pk_live_…` / `pk_test_…`	Ihr Zugangs-Key (erforderlich).
`mode`	`button` · `inline` · `headless`	`button` (Standard): Button öffnet den Dialog. `inline`: Wizard direkt in der Seite. `headless`: nichts sichtbar — Sie öffnen den Dialog selbst per `element.open()` von Ihrem eigenen Button aus.
`trigger-label`	Text	Beschriftung des Buttons (Standard: „Immobilie bewerten“).

Events (optional)

Für Analytics oder eigene Logik feuert das Widget DOM-Events, die bis zum document aufsteigen:

Event	Detail	Wann
`mym:opened` / `mym:closed`	—	Dialog geöffnet / geschlossen
`mym:step`	`{ step }`	Schrittwechsel im Wizard
`mym:result`	`{ response }`	Bewertung erfolgreich berechnet
`mym:cta-click`	`{ href }`	Klick auf den Abschluss-CTA
`mym:error`	`{ kind, message }`	Konfigurations- oder API-Fehler

document.addEventListener('mym:result', (e) => {
  console.log('Bewertung berechnet', e.detail.response);
});

Theming

Das Erscheinungsbild wird in drei Schichten bestimmt — jede spätere Schicht überschreibt die frühere:

Schicht	Wo konfiguriert	Wofür
1 · Preset	Zentral bei uns, pro Kunde	`mym` (Standard, Teal-Branding) · `light` (neutral, erbt Ihre Schrift) · `dark`
2 · Kunden-Theme	Zentral bei uns, pro Kunde	Ihr Branding (Farben, Radius, Schriften) als JSON — gilt überall, ohne Code-Änderung auf Ihrer Seite
3 · CSS-Variablen	In Ihrem HTML/CSS	Schnelle lokale Anpassungen; gewinnen immer

Kunden-Theme einreichen (empfohlen)

Schicken Sie uns Ihr Branding in diesem Format — wir hinterlegen es auf Ihrem Account. Das Widget lädt es automatisch mit Ihrem Key; Änderungen erfordern keine Anpassung an Ihrer Website. Alle Felder sind optional, ausgelassene Werte kommen aus dem Preset:

{
  "colors": {
    "primary":         "#0E7C66",   // Buttons, aktive Zustände, Akzente
    "secondary":       "#3577F1",   // zweite Chart-Linie
    "background":      "#FFFFFF",   // Dialog-Hintergrund
    "foreground":      "#171717",   // Textfarbe
    "muted":           "#EDEDED",   // dezente Flächen (Icons, Progressbar)
    "mutedForeground": "#737373",   // Sekundärtext
    "border":          "#D4D4D4",   // Rahmen und Trennlinien
    "destructive":     "#E40F0F",   // Fehlerzustände
    "success":         "#00B243"    // positiver Markttrend
  },
  "radius": "12px",                 // Grundradius für Karten/Dialog
  "font": {
    "display": "Ihre-Marke, sans-serif",  // Überschriften und Preise
    "body": "Ihre-Marke, sans-serif"      // Fließtext
  }
}

Schriften: Das Widget lädt selbst keine Webfonts — es verwendet Schriften, die auf Ihrer Seite bereits verfügbar sind. Laden Sie Ihre Markenschrift also wie gewohnt auf der Seite, das Widget übernimmt sie dann. Ungültige Theme-Werte werden serverseitig verworfen; das Widget fällt sicher auf das Preset zurück.

CSS-Variablen (lokale Overrides)

Für schnelle Anpassungen direkt am Element oder in Ihrem Stylesheet — sie überschreiben Preset und Kunden-Theme:

<!-- Variante A: direkt am Element -->
<mym-estimate-widget api-key="pk_live_IHR_KEY"
  style="--mym-primary: #3577F1; --mym-radius: 8px;">
</mym-estimate-widget>

/* Variante B: in Ihrem Stylesheet */
mym-estimate-widget {
  --mym-primary: #3577F1;
  --mym-font-display: 'Ihre-Marke', sans-serif;
}

Variable	Standard (`mym`)	Wirkt auf
`--mym-primary`	`#159FB8`	Buttons, Auswahl, Fortschritt, CTA, Chart-Linie „Bezirk“
`--mym-secondary`	`#3577F1`	Chart-Linie „Stadt“
`--mym-background`	`#FFFFFF`	Dialog- und Kartenhintergrund
`--mym-foreground`	`#171717`	Primärtext
`--mym-muted`	`#EDEDED`	Icon-Flächen, inaktive Progress-Segmente
`--mym-muted-foreground`	`#737373`	Labels, Sekundärtext
`--mym-border`	`#D4D4D4`	Rahmen, Trennlinien, Inputs
`--mym-destructive`	`#E40F0F`	Fehlerzustände, negativer Trend
`--mym-success`	`#00B243`	Positiver Trend
`--mym-radius`	`16px`	Grundradius (Karten, Dialog; Buttons/Inputs skalieren davon)
`--mym-font-display`	Kanit-Stack	Überschriften, Preise, Options-Labels
`--mym-font-body`	Inter-Stack	Fließtext, Inputs

Dark-Site? Entweder Preset dark bei uns aktivieren lassen — oder lokal mindestens --mym-background, --mym-foreground, --mym-muted und --mym-border auf dunkle Werte setzen. Achten Sie bei eigenen Farben auf ausreichenden Kontrast (WCAG AA).

React, Vue, Webflow & Co.

Das Widget ist ein natives Web Component — es braucht keine Wrapper.

React

// einmal global laden, z. B. in index.html oder per import
useEffect(() => {
  const s = document.createElement('script');
  s.src = 'https://estimation.meetyourmakler.de/mym-widget.iife.js';
  s.async = true;
  document.head.appendChild(s);
}, []);

// im JSX (React 19 unterstützt Custom Elements direkt)
<mym-estimate-widget api-key="pk_live_IHR_KEY" />

Vue

<!-- Script-Tag in index.html, dann einfach im Template: -->
<mym-estimate-widget api-key="pk_live_IHR_KEY" />
// Hinweis: in vite.config den Tag als Custom Element markieren:
// compilerOptions.isCustomElement = (tag) => tag.startsWith('mym-')

Webflow / CMS

Ein „Embed“-Element (Custom Code) an der gewünschten Stelle einfügen und das Zwei-Zeilen-Snippet von oben hineinkopieren. Fertig.