Widget Lite Doku

Widget Lite Integration

Das Carport Widget Lite ist eine eigenständige Webkomponente, die Sie mit nur zwei HTML-Elementen in beliebige Websites einbetten können: dem Custom Element <widget-lite>, das als Platzhalter und Einhängepunkt dient, sowie einem <script>-Tag, das den zugehörigen Loader nachlädt. Sobald das Script geladen ist, rendert es Ihren aktuellen Fahrzeugbestand direkt in das <widget-lite>-Element – ohne iFrame und ohne dass Sie zusätzliche Stylesheets einbinden müssen. Da es sich um reinen HTML- und JavaScript-Code handelt, lässt sich das Widget in jedem Editor platzieren, der das Einfügen von benutzerdefiniertem HTML-Quelltext erlaubt.

Basisintegration

<widget-lite></widget-lite>
<script src="https://widget-lite.willhaben.at/production/Ihre-Händler-ID/loader.js"></script>
        

Die erste Zeile <widget-lite></widget-lite> legt fest, an welcher Stelle im Dokument der Fahrzeugbestand später erscheint – das leere Element ist zunächst nur ein Platzhalter. Die zweite Zeile bindet über <script src="..."> den Loader Ihres Händler-Accounts ein. Beim Aufruf der Seite sucht dieses Script automatisch nach dem <widget-lite>-Element im DOM und befüllt es mit der Standardansicht inklusive integrierter Fahrzeugsuche. Beide Elemente müssen im selben HTML-Kontext stehen; die Reihenfolge (erst das Element, danach das Script) sowie ein unverfälschter, ungefilterter Quelltext sind dabei entscheidend, damit das Widget korrekt initialisiert wird.

Integration in Ihr CMS

Jeder Website-Editor bringt eine eigene Art mit, rohen HTML-Code entgegenzunehmen – meist verbirgt sich dahinter ein Quelltext- bzw. HTML-Modus, ein eigenes HTML-Block-Element oder ein spezielles HTML-Widget/-Modul. In allen Fällen tragen Sie exakt denselben Embed-Code aus der Basisintegration ein: das <widget-lite>-Element gefolgt vom <script>-Tag. Wichtig ist nur, dass der jeweilige Editor den Code unverändert übernimmt und die Ausführung des externen Scripts nicht blockiert oder herausfiltert – WYSIWYG-Ansichten dürfen daher zum Einfügen nicht verwendet werden. Im Folgenden finden Sie die konkreten HTML-Elemente, über die Sie den Code platzieren – unterteilt in klassische Content-Management-Systeme (WordPress, Joomla!, Drupal, Contao, TYPO3) mit freier Editor-Struktur und Website-Baukästen (Wix, Jimdo), die den Code in einem stärker vorgegebenen Rahmen entgegennehmen.

Content-Management-Systeme

Integration in WordPress

Classic Editor:

Der Classic Editor arbeitet intern mit einem einfachen <textarea>-Feld, das den kompletten Beitragsinhalt als reinen Text hält. Wechseln Sie oben rechts von der Reiter „Visuell“ auf „Text“, um genau dieses Textarea-Feld sichtbar zu machen, und fügen Sie den Embed-Code an der gewünschten Position im Quelltext ein. Der Code lässt sich so in Seiten ebenso wie in Beiträgen verwenden. Alternativ steht im Widget-Bereich ein Text-Widget zur Verfügung, dessen Eingabefeld ebenfalls den HTML-Modus unterstützt – damit platzieren Sie das Widget etwa in der Seitenleiste oder im Footer.

Gutenberg Editor:

Gutenberg arbeitet blockbasiert – jeder Inhalt ist ein eigenes Element im Editor-Baum. Fügen Sie über das „+“-Menü einen neuen Block vom Typ „Individuelles HTML“ hinzu; dieser Block rendert seinen Inhalt ungefiltert als rohes HTML in die Seite, statt ihn wie andere Blöcke zu interpretieren. Tragen Sie den Embed-Code direkt in dieses Blockfeld ein – das funktioniert identisch in Seiten und Beiträgen. Für Seitenleiste oder Footer steht im Widget-Bereich derselbe Blocktyp als HTML-Widget zur Verfügung.

Elementor Editor:

In Elementor entspricht jedes Element im Seitenbaum einem eigenen Widget-Container. Ziehen Sie das HTML-Widget aus der Elementor-Elementeliste per Drag & Drop in den gewünschten Abschnitt bzw. die gewünschte Spalte – dieses Widget bettet ein einzelnes <div> in die Seite ein, dessen Inhalt unverändert als HTML ausgegeben wird. Tragen Sie den Embed-Code direkt in das Editorfeld des HTML-Widgets ein; das funktioniert auf Seiten und in Beiträgen gleichermaßen. Auch in Template-Bereichen wie Header, Footer oder Sidebar lässt sich dasselbe HTML-Widget einsetzen.

Integration in Joomla!

TinyMCE Editor:

TinyMCE zeigt Inhalte standardmäßig in einem contenteditable-Bereich an, der HTML-Tags beim Einfügen automatisch bereinigt. Klicken Sie deshalb im Editor-Menü auf das Symbol „Quellcode“ (bzw. „<>“) – dahinter verbirgt sich ein reines <textarea>-Feld mit dem rohen HTML-Quelltext des Beitrags. Fügen Sie den Embed-Code dort an der gewünschten Position ein und schließen Sie die Quellcode-Ansicht wieder. So lässt sich der Code sowohl in Beiträgen als auch in Modulen platzieren – etwa in der Sidebar, im Footer oder an anderen Modulpositionen Ihrer Website.

Code Mirror:

Anders als TinyMCE ist CodeMirror von Haus aus ein reiner Quelltext-Editor: Das Eingabefeld ist bereits ein HTML-Textfeld ohne WYSIWYG-Zwischenschicht, wodurch eingefügter Code nicht gefiltert oder umgeschrieben wird. Tragen Sie den Embed-Code daher direkt an der gewünschten Position in dieses Feld ein – ein zusätzlicher Wechsel in eine Code-Ansicht entfällt. Auch hier lässt sich der Code sowohl in Beiträgen als auch in Modulen einsetzen, um ihn z. B. in Sidebar, Footer oder anderen Modulpositionen anzuzeigen.

Integration in Drupal

CK-Editor:

Drupal filtert HTML-Ausgaben standardmäßig über sogenannte Textformate. Stellen Sie beim gewünschten Inhaltstyp oder Block daher zuerst sicher, dass das Textformat auf eine Option gesetzt ist, die Tags wie <widget-lite> und <script> nicht entfernt (z. B. „Full HTML“) – restriktivere Formate wie „Basic HTML“ filtern das Script-Tag sonst automatisch heraus. Klicken Sie danach im CKEditor auf das Symbol „Source“ bzw. „Quelltext“, um vom contenteditable-Bereich in die reine HTML-Textansicht zu wechseln, und fügen Sie den Embed-Code dort ein. Das funktioniert sowohl in Content Types (z. B. Seiten, Artikel) als auch in Blöcken für Sidebar-, Footer- oder Header-Bereiche. Beachten Sie, dass die verwendende Benutzerrolle über die Berechtigung zur Nutzung des gewählten Textformats verfügen muss.

Integration in Contao

Backend-Editor:

Öffnen Sie im Backend unter „Content“ → „Articles“ den gewünschten Artikel und klicken Sie auf „New“, um ein neues Inhaltselement anzulegen. Contao fragt zunächst nach der Position des neuen Elements innerhalb des Artikels – wählen Sie die gewünschte Stelle aus.

Öffnen Sie anschließend das Dropdown „Element type“ und wählen Sie in der Kategorie „Text elements“ den Eintrag „Unfiltered HTML“ aus. Im Unterschied zum ebenfalls vorhandenen Elementtyp „Code“ – der eingefügten Code lediglich formatiert anzeigt, aber nicht ausführt – wird der Inhalt von „Unfiltered HTML“ vollständig ungefiltert ausgegeben, wodurch <script>-Tags und Custom Elements wie <widget-lite> unverändert erhalten bleiben.

Tragen Sie den Embed-Code aus der Basisintegration unverändert in das Feld „HTML/Code“ ein. Contao zeigt hier lediglich einen Sicherheitshinweis zum sorgsamen Umgang mit eingefügtem Code an, filtert den Code selbst aber nicht. Speichern Sie das Element über „Save“ bzw. „Save and close“.

Da „Unfiltered HTML“ keinerlei Sicherheitsfilterung durchläuft, ist der Elementtyp in Contao je nach Benutzerrechte-Konfiguration nicht automatisch für jede Redakteursgruppe sichtbar. Sollte er in der Auswahl fehlen, muss er einem Benutzer bzw. einer Benutzergruppe zunächst explizit über die Berechtigungen für Inhaltselemente freigegeben werden.

Integration in TYPO3

Backend-Editor:

Legen Sie im TYPO3-Backend über „Neuen Inhalt erstellen“ ein neues Inhaltselement an und wählen Sie in der Kategorie „Spezielle Elemente“ den Elementtyp „Reines HTML“ aus. Dieser Elementtyp gibt seinen Inhalt beim Rendern unverändert und ungefiltert aus, statt ihn – wie die meisten anderen Content-Elemente – über TYPO3s RTE (Rich-Text-Editor) zu leiten, der Tags wie <script> normalerweise entfernen würde.

Tragen Sie den Embed-Code aus der Basisintegration unverändert in das Eingabefeld des Elements ein und speichern Sie den Datensatz. Das Element lässt sich auf beliebigen Seiten sowie – je nach TemplaVoila-/Fluid-Vorlage der Website – auch in wiederverwendbaren Bereichen wie Sidebar oder Footer platzieren.

Website-Baukästen

Integration in Wix

Klicken Sie im Wix-Editor links auf „Elemente hinzufügen“, wählen Sie die Kategorie „Einbettung“ und darin das Element „Code Einbetten“ aus. Es öffnet sich ein Eingabefeld, in das der Embed-Code aus der Basisintegration unverändert eingetragen werden kann.

Wix rendert den eingebetteten Code technisch in einem eigenen <iframe>. Da sowohl das <widget-lite>-Element als auch das Loader-Script gemeinsam innerhalb desselben iFrames stehen, funktioniert der Standard-Snippet aus der Basisintegration hier ohne Anpassung – Wix bereinigt oder filtert den Code nicht, ein JavaScript-Workaround wie bei anderen CMS ist daher nicht nötig. Beachten Sie lediglich, dass das „Code Einbetten“-Element in Wix über eine feste Höhe verfügt, die im Element-Einstellungsbereich passend zum Fahrzeugbestand manuell angepasst werden sollte, da sich ein iFrame nicht automatisch an seinen Inhalt anpasst.

Das Element lässt sich sowohl auf normalen Seiten als auch in wiederverwendbaren Bereichen wie Header, Footer oder Sidebar platzieren.

Integration in Jimdo

Jimdo bietet zwei vollständig getrennte Systeme an, zwischen denen kein Wechsel möglich ist: das ältere Jimdo Creator und das neuere, KI-basierte Jimdo Dolphin. Das Widget Lite kann ausschließlich in Jimdo Creator eingebunden werden – Jimdo Dolphin bietet aus Stabilitäts- und Sicherheitsgründen bewusst kein Element zur Einbindung von eigenem HTML- oder Script-Code mehr an, sondern nur vordefinierte „Smart Apps“ für ausgewählte Drittanbieter-Dienste. Prüfen Sie daher vorab, mit welchem der beiden Systeme die jeweilige Website erstellt wurde.

Jimdo Creator: Widget / HTML-Element

Öffnen Sie im Editor über „+ Element hinzufügen“ das Auswahlfenster und wählen Sie in der Kategorie „Weitere Inhalte“ das Element „Widget / HTML“ aus. Es öffnet sich ein Eingabefeld, das eigenen HTML- und Script-Code entgegennimmt.

Anders als bei Wix lässt sich der Basisintegrations-Code hier nicht unverändert einfügen: Jimdo Creator führt beim Speichern des Widget/HTML-Felds eine serverseitige Bereinigung des HTML-Codes durch, die anhand einer Liste bekannter HTML5-Tags arbeitet. Ein unbekanntes Custom Element wie <widget-lite> wird dabei entfernt, während <script>-Tags erhalten bleiben, da diese für den eigentlichen Zweck des Feldes explizit zugelassen sind. Aus diesem Grund wird das <widget-lite>-Element hier nicht direkt in den Quelltext geschrieben, sondern zur Laufzeit per JavaScript in einen festen Mount-Punkt eingefügt, bevor der Loader das Element befüllt.

<div id="widget-lite-jimdo-mount"></div>
<script>
  var mount = document.getElementById('widget-lite-jimdo-mount');
  var el = document.createElement('widget-lite');
  mount.appendChild(el);
</script>
<script src="https://widget-lite.willhaben.at/production/Ihre-Händler-ID/loader.js"></script>
        

Fügen Sie diesen Code in das Editorfeld des Widget/HTML-Elements ein und speichern Sie den Block. Prüfen Sie anschließend über die Entwicklertools des Browsers (Elements-Tab), ob <widget-lite> innerhalb von #widget-lite-jimdo-mount im DOM vorhanden ist und korrekt befüllt wird.