Set up the integration

The MYM Estimate Widget is a native web component: one script line plus one HTML tag, and it runs on any website (plain HTML, Webflow, React, Vue, …). Access is controlled through a domain-bound API key; design and behavior are configured centrally per client.

Integration in 3 steps

Request credentials

Tell us the domains the widget should run on (e.g. www.your-domain.com). You receive an API key (pk_live_…) that works exclusively on those domains — so it is safe to place it visibly in your HTML.

Paste the snippet

Two lines, anywhere on your page:

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

Done

The widget renders a button that opens the valuation dialog. Colors, corner radius and the closing CTA come from your central configuration — changing them requires no changes on your website.

Try it yourself right now (sandbox)

There is a public sandbox key for testing that only works on localhost. Save the following file as index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Widget test</title></head>
<body>
  <h1>My 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>

Then start a local server in the same folder and open http://localhost:8000:

# Option A (Python, preinstalled on macOS/Linux)
python3 -m http.server 8000

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

Important: opening the file by double-clicking it (file://…) will not work — the browser then sends no Origin header and the request is rejected with 403. This is the same domain check that will protect your own key later. The sandbox key is limited to 60 requests/minute. The widget UI is currently German-first (German locale, EUR formatting).

Configuration

Optional attributes on the <mym-estimate-widget> element:

Attribute	Values	Description
`api-key`	`pk_live_…` / `pk_test_…`	Your access key (required).
`mode`	`button` · `inline` · `headless`	`button` (default): a button opens the dialog. `inline`: the wizard renders directly in the page. `headless`: nothing visible — you open the dialog yourself via `element.open()` from your own button.
`trigger-label`	Text	Button label (default: “Immobilie bewerten”).

Events (optional)

For analytics or custom logic the widget fires DOM events that bubble up to document:

Event	Detail	When
`mym:opened` / `mym:closed`	—	Dialog opened / closed
`mym:step`	`{ step }`	Wizard step change
`mym:result`	`{ response }`	Valuation computed successfully
`mym:cta-click`	`{ href }`	Click on the closing CTA
`mym:error`	`{ kind, message }`	Configuration or API error

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

Theming

The widget's appearance is determined in three layers — each later layer overrides the previous one:

Layer	Configured where	Purpose
1 · Preset	Centrally by us, per client	`mym` (default, teal branding) · `light` (neutral, inherits your fonts) · `dark`
2 · Client theme	Centrally by us, per client	Your branding (colors, radius, fonts) as JSON — applies everywhere, no code change on your site
3 · CSS variables	In your HTML/CSS	Quick local overrides; always win

Submitting a client theme (recommended)

Send us your branding in this format — we store it on your account. The widget loads it automatically with your key; changing it later requires no changes on your website. All fields are optional; omitted values fall back to the preset:

{
  "colors": {
    "primary":         "#0E7C66",   // buttons, active states, accents
    "secondary":       "#3577F1",   // second chart line
    "background":      "#FFFFFF",   // dialog background
    "foreground":      "#171717",   // text color
    "muted":           "#EDEDED",   // subtle surfaces (icons, progress bar)
    "mutedForeground": "#737373",   // secondary text
    "border":          "#D4D4D4",   // borders and dividers
    "destructive":     "#E40F0F",   // error states
    "success":         "#00B243"    // positive market trend
  },
  "radius": "12px",                 // base radius for cards/dialog
  "font": {
    "display": "Your-Brand, sans-serif",  // headings and prices
    "body": "Your-Brand, sans-serif"      // body copy
  }
}

Fonts: the widget does not load any web fonts itself — it uses fonts already available on your page. Load your brand font the way you normally do and the widget picks it up. Invalid theme values are discarded server-side; the widget safely falls back to the preset.

CSS variables (local overrides)

For quick tweaks directly on the element or in your stylesheet — they override both the preset and the client theme:

<!-- Option A: directly on the element -->
<mym-estimate-widget api-key="pk_live_YOUR_KEY"
  style="--mym-primary: #3577F1; --mym-radius: 8px;">
</mym-estimate-widget>

/* Option B: in your stylesheet */
mym-estimate-widget {
  --mym-primary: #3577F1;
  --mym-font-display: 'Your-Brand', sans-serif;
}

Variable	Default (`mym`)	Affects
`--mym-primary`	`#159FB8`	Buttons, selection, progress, CTA, "district" chart line
`--mym-secondary`	`#3577F1`	"City" chart line
`--mym-background`	`#FFFFFF`	Dialog and card background
`--mym-foreground`	`#171717`	Primary text
`--mym-muted`	`#EDEDED`	Icon surfaces, inactive progress segments
`--mym-muted-foreground`	`#737373`	Labels, secondary text
`--mym-border`	`#D4D4D4`	Borders, dividers, inputs
`--mym-destructive`	`#E40F0F`	Error states, negative trend
`--mym-success`	`#00B243`	Positive trend
`--mym-radius`	`16px`	Base radius (cards, dialog; buttons/inputs scale from it)
`--mym-font-display`	Kanit stack	Headings, prices, option labels
`--mym-font-body`	Inter stack	Body copy, inputs

Dark site? Either ask us to enable the dark preset — or locally set at least --mym-background, --mym-foreground, --mym-muted and --mym-border to dark values. When choosing your own colors, keep sufficient contrast (WCAG AA).

React, Vue, Webflow & friends

The widget is a native web component — no wrappers needed.

React

// load once globally, e.g. in index.html or via an effect
useEffect(() => {
  const s = document.createElement('script');
  s.src = 'https://estimation.meetyourmakler.de/mym-widget.iife.js';
  s.async = true;
  document.head.appendChild(s);
}, []);

// in JSX (React 19 supports custom elements natively)
<mym-estimate-widget api-key="pk_live_YOUR_KEY" />

Vue

<!-- script tag in index.html, then simply use it in a template: -->
<mym-estimate-widget api-key="pk_live_YOUR_KEY" />
// note: mark the tag as a custom element in vite.config:
// compilerOptions.isCustomElement = (tag) => tag.startsWith('mym-')

Webflow / CMS

Add an “Embed” element (custom code) where the widget should appear and paste the two-line snippet from above. That’s it.