Z-Index und Custom CSS beim melibo Widget

Dieser Artikel erklärt: • warum der Standard z-index sehr hoch ist • wie du ihn bei Bedarf anpasst • wie du „Powered by melibo“ per Custom CSS ausblendest • was du beim Schreiben von Custom CSS beachten musst

⸻

Warum ist der Standard z-index so hoch?

Der Widget-z-index ist bewusst auf den maximal möglichen Wert gesetzt.

Der Grund: • Das Widget wird oft auf externen Websites eingebunden • Dort existieren viele fremde UI-Elemente • In der Praxis wird der Chat sonst häufig überlagert

Ein hoher Standardwert sorgt dafür, dass: • das Widget sichtbar bleibt • die Integration auf den meisten Seiten ohne Anpassung funktioniert

⸻

Wann solltest du den z-index anpassen?

In einzelnen Setups kann ein niedrigerer z-index sinnvoll sein.

Typische Beispiele: • Off-Canvas Warenkörbe • modale Kaufprozesse • feste Call-to-Action Elemente

Du kannst den z-index gezielt per Custom CSS reduzieren.

So bleibt das Widget im Hintergrund, ohne die Nutzerführung zu stören.

⸻

Beispiel: z-index per Custom CSS anpassen

.teaser, .toggle { z-index: 999 !important; }

Warum !important? • Der Widget-z-index ist bewusst dominant • Eine saubere Überschreibung ist aktuell nur so zuverlässig möglich

⸻

„Powered by melibo“ ausblenden

Du darfst den Hinweis per Custom CSS ausblenden.

Wir freuen uns, wenn du ihn sichtbar lässt. Technisch ist das Ausblenden problemlos möglich.

Beispiel:

.widget-wrapper .powered-by__bar, .settings__wrapper .settings__bottom-bar { display: none !important; }

⸻

Wichtig: Klassen mit svelte entfernen

Nutze keine CSS-Klassen mit dem Präfix svelte.

Warum? • Diese Klassen werden bei jedem Reload neu generiert • Deine CSS-Regeln greifen sonst nicht zuverlässig

Regel für sauberes Custom CSS: • verwende nur stabile, semantische Klassen • vermeide automatisch generierte Selektoren

⸻

Typische Fragen aus der Praxis • Liegt das Widget über wichtigen UI-Elementen? • Blockiert der Toggle einen Kaufprozess? • Wird das Widget von anderen Elementen verdeckt?

In diesen Fällen lohnt sich ein Blick auf den z-index.

⸻

Du hast ein spezielles Layout oder einen Sonderfall?

Melde dich jederzeit. Wir helfen dir bei einer sauberen Lösung.