WLAS Widget — Dokumentation

Überblick

Das WLAS-Widget ist ein Web Component, das sich nahtlos in jede Website integrieren lässt. Es zeigt Immobilienangebote Ihres Maklerbetriebs an und ermöglicht Interessenten, direkt auf Ihrer Seite zu suchen, zu filtern und Kontakt aufzunehmen.

Vollständig im Shadow DOM isoliert — keine CSS-Konflikte mit Ihrer Website
Läuft in einem sicheren iframe — kein JavaScript-Konflikt möglich
Unterstützt 360°-Panoramen, Galerie, Listen- und Kachelansicht
Eingebautes Anfrage-Formular mit reCAPTCHA-Schutz
Alle Filter, Seiten und die ausgewählte Immobilie werden in der URL gespeichert (teilbare Links)
Login für gespeicherte Suchen und Favoriten (optional)

Schnellstart

Zwei Schritte genügen, um das Widget einzubinden:

Script-Tag einbinden
Empfohlen: im <head> — so ist das Widget sofort beim Laden der Seite verfügbar.
```
<script src="https://wlas.alleimmobilien.at/alleimmobilien-wlas-widget.js"></script>
```
Optional: Das Script kann auch direkt neben dem Widget-Element platziert werden — der Browser registriert das Custom Element automatisch.

Widget-Element an der gewünschten Stelle platzieren

<alleimmobilien-wlas-widget
  member-unique-code="ihr-makler-slug"
></alleimmobilien-wlas-widget>

ℹ️

Den Wert für member-unique-code erhalten Sie von Ihrem alleimmobilien-Ansprechpartner. Er entspricht dem eindeutigen Bezeichner Ihres Maklerkontos in der Plattform.

Wie es funktioniert

Das Widget verwendet eine Zwei-Ebenen-Architektur:

Loader-Script (alleimmobilien-wlas-widget.js) — wird in Ihre Seite eingebunden. Es registriert das Custom Element <alleimmobilien-wlas-widget> und erstellt darin einen unsichtbaren <iframe>.
Widget-App — läuft vollständig im iframe auf unserem Server. Kommuniziert mit dem Loader per postMessage (z. B. für Höhenanpassung und Modale).

Durch diese Isolierung kollidiert das Widget weder mit Ihrem CSS noch mit Ihrem JavaScript. Alle Bibliotheken (Preact, React Query, Axios) sind im Bundle enthalten — keine zusätzlichen Abhängigkeiten nötig.

✅

Das Widget passt seine Höhe automatisch an den Inhalt an. Sie müssen keine feste Höhe setzen — das Element wächst und schrumpft dynamisch.

Pflichtattribute

Attribut	Typ	Beschreibung
member-unique-code Pflicht	String	Eindeutiger Bezeichner Ihres Maklerkontos (Slug). Bestimmt, welche Immobilien und welche API-Endpunkte verwendet werden.

Feature-Schalter

Alle booleschen Attribute akzeptieren "true" oder "false" als String-Wert. Der angegebene Standardwert gilt, wenn das Attribut weggelassen wird.

Attribut	Standard	Beschreibung
show-nav	`"true"`	Zeigt die Kauf/Miete-Navigation am oberen Rand des Widgets.
show-breadcrumb	`"true"`	Zeigt den Breadcrumb-Pfad in der Detailansicht.
show-broker-info	`"true"`	Zeigt Maklerinformationen auf den Immobilienkarten.
detail-as-modal	`"false"`	Öffnet die Detailansicht als Vollbild-Modal statt als separate Seite im Widget.
show-page-size	`"true"`	Zeigt das Dropdown zur Auswahl der Ergebnisanzahl pro Seite.
hide-pagination	`"false"`	Blendet die Paginierungsleiste aus (z. B. für Single-Page mit Scroll).
hide-login-button	`"false"`	Blendet den Anmelde-Button aus. Sinnvoll, wenn Login-Funktionalität nicht gewünscht wird.
hide-toolbar	`"false"`	Blendet die gesamte Toolbar aus (Titel, Sortierung, Filter, Ansichtsumschalter).
collapse-on-empty	`"false"`	Versteckt das Widget vollständig, wenn keine Suchergebnisse vorhanden sind.
mini-slider	`"false"`	Aktiviert den kompakten 3-Karten-Karussell-Modus (z. B. für Startseiten-Teaser). Siehe Beispiel.
transparent-bg	`"false"`	Entfernt den Rahmen und Schatten des Widgets — sinnvoll für eigene Hintergründe.

Paginierung & Ansicht

Attribut	Standard	Mögliche Werte	Beschreibung
default-page-size	`"12"`	`"3"`, `"6"`, `"12"`, `"24"`, `"48"`	Anzahl der Immobilien pro Seite beim ersten Laden.
initial-tabs	`"TILE"`	`"TILE"`, `"LIST"`	Standard-Anzeigemodus: Kachelansicht oder Listenansicht.
exclude-office-id	—	String (ID)	Filtert Immobilien eines bestimmten Büros aus der Ergebnisliste heraus.

Theme & Design

Das Widget unterstützt eine vollständige Anpassung der Farben, Schriftart und Formgebung über HTML-Attribute. Hover-Varianten und helle Hintergründe werden automatisch aus der Primärfarbe abgeleitet.

⚠️

Farbwerte müssen im Hex-Format angegeben werden: entweder #RGB oder #RRGGBB. Andere Formate (rgb(), hsl(), named colors) werden nicht unterstützt.

Attribut	Beispielwert	Beschreibung
theme-primary	`"#E8703A"`	Hauptfarbe: Buttons, aktive Zustände, Hervorhebungen. Hover- und Hell-Varianten werden automatisch berechnet.
theme-highlight	`"#E8703A"`	Akzentfarbe für Icons, Checkboxen und Paginierung. Standard: entspricht `theme-primary`.
theme-btn-text	`"#ffffff"`	Textfarbe auf primären Buttons (z. B. Weiß auf rotem Button).
theme-link	`"#2C5AA0"`	Farbe für Links und anklickbare Textelemente.
theme-font	`"Urbanist"`	Schriftfamilie. Unterstützt alle Google Fonts (z. B. `"Montserrat"`, `"Inter"`, `"Roboto"`). Wird automatisch geladen.
theme-radius	`"6px"`	Abrundungsradius für Karten, Buttons und Eingabefelder. `"0px"` für eckiges Design, `"20px"` für stark gerundetes.

Farbbeispiele

WLAS Orange
#E8703A

Klassisches Blau
#2C5AA0

Waldgrün
#1d7a4b

Violett
#7c3aed

Dunkelblau
#1a1a2e

Beispiele

Einfache Einbindung

Das Minimalbeispiel — nur der Pflicht-Code wird gesetzt:

<!-- Script einmalig im <head> -->
<script src="https://wlas.alleimmobilien.at/alleimmobilien-wlas-widget.js"></script>

<!-- Widget auf der Seite -->
<alleimmobilien-wlas-widget
  member-unique-code="muster-immobilien"
></alleimmobilien-wlas-widget>

Mit eigenem Design

Widget im Corporate Design einer blauen Marke, Listenansicht als Standard:

<alleimmobilien-wlas-widget
  member-unique-code="muster-immobilien"
  theme-primary="#1a3c6e"
  theme-highlight="#1a3c6e"
  theme-btn-text="#ffffff"
  theme-link="#1a3c6e"
  theme-font="Montserrat"
  theme-radius="4px"
  initial-tabs="LIST"
  default-page-size="24"
></alleimmobilien-wlas-widget>

Minimalkonfiguration ohne Login und Toolbar

Für eingebettete Ansichten ohne Benutzer-Interaktionselemente:

<alleimmobilien-wlas-widget
  member-unique-code="muster-immobilien"
  hide-login-button="true"
  hide-toolbar="true"
  hide-pagination="true"
  collapse-on-empty="true"
  transparent-bg="true"
></alleimmobilien-wlas-widget>

Mini-Slider (Teaser auf der Startseite)

Kompakter 3-Karten-Karussell — ideal für Teaserblöcke auf Startseiten:

<alleimmobilien-wlas-widget
  member-unique-code="muster-immobilien"
  mini-slider="true"
  theme-primary="#E8703A"
  transparent-bg="true"
  hide-login-button="true"
></alleimmobilien-wlas-widget>

ℹ️

Im Mini-Slider-Modus sind Filter, Toolbar und Paginierung automatisch ausgeblendet. Das Widget zeigt die neuesten Immobilien in einem horizontalen Karussell.

Alle Attribute — Schnellreferenz

Attribut	Typ	Standard	Beschreibung
member-unique-code Pflicht	String	—	Makler-Slug (Backend-Identifier)
show-nav	Boolean	`true`	Kauf/Miete-Navigation
show-breadcrumb	Boolean	`true`	Breadcrumb in Detailansicht
show-broker-info	Boolean	`true`	Maklerinfo auf Karten
detail-as-modal	Boolean	`false`	Detailansicht als Modal
show-page-size	Boolean	`true`	Dropdown: Ergebnisse pro Seite
default-page-size	Number	`12`	Ergebnisse pro Seite (3/6/12/24/48)
initial-tabs	Enum	`TILE`	Startansicht: TILE oder LIST
exclude-office-id	String	—	Büro-ID ausschließen
hide-pagination	Boolean	`false`	Paginierung ausblenden
hide-login-button	Boolean	`false`	Login-Button ausblenden
hide-toolbar	Boolean	`false`	Toolbar ausblenden
collapse-on-empty	Boolean	`false`	Widget bei keinen Ergebnissen verstecken
mini-slider	Boolean	`false`	3-Karten-Karussell-Modus
transparent-bg	Boolean	`false`	Rahmen und Schatten entfernen
theme-primary	Hex-Farbe	`#E8703A`	Hauptfarbe
theme-highlight	Hex-Farbe	= primary	Icon/Checkbox-Akzent
theme-btn-text	Hex-Farbe	`#ffffff`	Button-Textfarbe
theme-link	Hex-Farbe	`#2C5AA0`	Link-Farbe
theme-font	String	`Urbanist`	Google Font Name
theme-radius	CSS-Wert	`6px`	Rahmenradius

Browser-Unterstützung

Browser	Mindestversion	Status
Chrome / Edge	79+	✅ Vollständig unterstützt
Firefox	72+	✅ Vollständig unterstützt
Safari	14.1+	✅ Vollständig unterstützt
iOS Safari	14.5+	✅ Vollständig unterstützt
Samsung Internet	12+	✅ Vollständig unterstützt
Internet Explorer	—	❌ Nicht unterstützt

Das Widget nutzt Custom Elements v1 und Shadow DOM v1, die in allen modernen Browsern nativ verfügbar sind.

Häufige Fragen

Kann ich das Widget mehrfach auf einer Seite einbinden?

Ja. Jede Instanz von <alleimmobilien-wlas-widget> ist vollständig unabhängig. Verschiedene member-unique-code-Werte zeigen unterschiedliche Maklerbestände an.

Beeinflusst das Widget meine Seiten-Performance?

Das Loader-Script (alleimmobilien-wlas-widget.js) ist ca. 6 KB groß und lädt den iframe erst, wenn das Element sichtbar wird. Die eigentliche Widget-App läuft in einem separaten iframe — Ihre Seite wird nicht blockiert.

Meine Website verwendet eine eigene Schriftart — überschreibt das Widget sie?

Nein. Das Widget läuft im Shadow DOM, völlig isoliert von Ihren Seiten-Styles. Setzen Sie theme-font auf den gewünschten Google Font Namen, und das Widget lädt ihn automatisch.

Wie werden URLs mit Filtern geteilt?

Das Widget speichert alle Filterzustände, die aktuelle Seite und die ausgewählte Immobilie als URL-Parameter mit dem Präfix pr_ in der Adresszeile Ihrer Seite. Ein geteilter Link öffnet exakt denselben Zustand beim Empfänger.

Wie integriere ich das Widget in ein CMS (WordPress, Typo3, …)?

Fügen Sie das Script-Tag im <head>-Bereich Ihres Templates ein (einmalig pro Seite). Das Widget-Element platzieren Sie im Seiteninhalt über ein HTML-/Code-Block-Element Ihres CMS. Für WordPress gibt es alternativ eine fertige Plugin-Lösung — fragen Sie Ihren alleimmobilien-Ansprechpartner.