Widget-Erscheinungsbild

Das Erscheinungsbild des WebSpeaker-Widgets lässt sich vollständig an das Design Ihrer Website anpassen. Über den Theme-Editor im Verwaltungsportal können Sie Farben, Farbverläufe und Stile konfigurieren, um ein nahtloses Nutzererlebnis zu schaffen. Eine konsistente visuelle Gestaltung stärkt das Vertrauen Ihrer Besucher und sorgt dafür, dass das Widget als integraler Bestandteil Ihrer Website wahrgenommen wird.

Theme-Editor

Den Theme-Editor finden Sie im Verwaltungsportal unter portal.webspeaker.pro unter Widget Settings -> Colors. Farben und Bubble-Position befinden sich jetzt auf zwei getrennten Seiten — Colors für das Theme und Position für den Launcher. Der Editor bietet eine visuelle Oberfläche, über die Sie alle Aspekte des Widget-Designs anpassen können. Änderungen werden in einer Live-Vorschau sofort angezeigt, sodass Sie das Ergebnis direkt begutachten können, bevor Sie die Einstellungen speichern und auf Ihrer Website veröffentlichen.

Farben und Farbverläufe

Sie können die Primär- und Sekundärfarben des Widgets frei wählen, um sie an Ihre Markenfarben anzupassen. Dies umfasst die Hintergrundfarbe des Widget-Headers, die Farben der Chat-Blasen, die Textfarben sowie die Akzentfarben für Schaltflächen und Links. Darüber hinaus unterstützt WebSpeaker Farbverläufe (Gradienten) für den Header-Bereich, sodass Sie ansprechende visuelle Effekte erzielen können. Geben Sie einfach die gewünschten Farbwerte im Hex- oder RGB-Format ein.

Vorgeschlagene Themes

Falls Sie nicht bei Null anfangen möchten, bietet WebSpeaker eine Auswahl vorgeschlagener Themes. Die Farbpaletten werden basierend auf der aktuellen Farbgebung Ihrer Website generiert, sodass sie sich nahtlos in Ihr bestehendes Design einfügen. Wählen Sie ein Theme aus der Liste und passen Sie es anschließend nach Ihren Wünschen an. Dies beschleunigt den Designprozess erheblich und liefert professionelle Ergebnisse.

Position der Bubble

Die Position der schwebenden Chat-Bubble kann unabhängig von den übrigen Darstellungseinstellungen des Widgets konfiguriert werden. Öffnen Sie im Verwaltungsportal Widget Settings -> Position, um festzulegen, wo die Bubble auf Ihrer Website erscheinen soll.

Sie können die Ecke auswählen, in der die Bubble angezeigt wird, und getrennte Offsets für Desktop und Mobilgeräte definieren. So lassen sich Konflikte mit fixierten Navigationsleisten, Cookie-Bannern, Kontakt-Buttons oder anderen festen Seitenelementen leichter vermeiden.

Mit der Einstellung z-index steuern Sie, wie stark die Bubble über anderen Seitenelementen liegen soll. Ein höherer Wert ist sinnvoll, wenn der Launcher hinter Bannern, Headern oder eingebetteten Widgets verschwindet. Niedrigere Werte können hilfreich sein, wenn Ihre Website bereits eigene Overlays oder schwebende Bedienelemente nutzt, die im Vordergrund bleiben sollen.

Die Positionsoptionen sind nur relevant, wenn die Funktion Floating Chat Bubble (FAB) aktiviert ist. Wenn die Bubble ausgeschaltet ist, bleiben die Positionsfelder deaktiviert, bis der Launcher wieder aktiviert wird.

Unabhängig von den Styles Ihrer Website

Die Styles des Widgets sind von dem CSS Ihrer Website getrennt. Die Stylesheets Ihrer Seite verändern also nie das Aussehen des Widgets, und das Widget beeinflusst umgekehrt nie das Aussehen des restlichen Seiteninhalts. Was Sie im Theme-Editor einstellen, sehen Besuchende genau so, unabhängig davon, wie sich das Design Ihrer Website später weiterentwickelt. Wie Besuchende das geöffnete Chat-Fenster verschieben und in der Größe ändern können, lesen Sie unter Chat-Fenster verschieben und in der Größe ändern.

Zurücksetzen und Live-Vorschau

Jederzeit können Sie Ihre Änderungen mit der Zurücksetzen-Funktion auf die Standardwerte zurücksetzen. Die Live-Vorschau zeigt Ihnen in Echtzeit, wie das Widget mit den aktuellen Einstellungen aussieht. So können Sie verschiedene Farbkombinationen ausprobieren, ohne Ihre Website zu beeinflussen. Erst wenn Sie die Einstellungen speichern, werden die Änderungen auf Ihrer Live-Website sichtbar. Nutzen Sie die Vorschau ausgiebig, um das optimale Design für Ihre Website zu finden.