Widget Design

Das Webchat-Widget ist ein essentielles Element für die Interaktion zwischen Nutzern und Chatbots auf einer Webseite. Die Anpassung dieses Widgets ermöglicht es Unternehmen, nicht nur ihre Corporate Identity zu reflektieren, sondern auch die Benutzererfahrung zu optimieren. Hier sind detaillierte Schritte, um das Webchat-Widget anzupassen:

1. Gehe in Project Settings

Um das Webchat-Widget anzupassen, klicke zunächst auf "Project settings". Dieser Schritt ermöglicht es dir, auf die verschiedenen Einstellungen und Optionen zuzugreifen, um das Widget nach deinen Wünschen anzupassen.

2. Wähle die "Channels" Übersicht

Und wähle den zu gestaltenden Webchannel aus. Dort kannst du dann, spezifische Anpassungen und Konfigurationen vornehmen.

3. Branding and general appearance:**\

Bei der Gestaltung und allgemeinen Erscheinung des Widgets hast du die Möglichkeit, das Logo, den Avatar und den Toggle-Zustand festzulegen.

4. Logo:

Das Logo wird oben im Header des Widgets angezeigt und trägt maßgeblich zur Markenidentität bei. Wenn du das Logo ändern möchtest, klicke einfach auf "Change".

5. Avatar:

Der Avatar ist das kleine Bildchen, das neben den Nachrichten angezeigt wird, die sich an den Nutzer richten. Er verleiht dem Chatbot eine persönliche Note und kann das Nutzererlebnis verbessern. Wenn du den Avatar ändern möchtest, klicke einfach auf "Change".

6. Toggle:

Der Toggle "Open" bzw. "Closed" bestimmt, welches Symbol, Logo oder Bild angezeigt wird, wenn dein Chatfenster geöffnet oder geschlossen ist. Diese visuelle Darstellung ist entscheidend, um den Nutzern zu zeigen, ob der Chat aktiv ist oder nicht. Wenn du das Toggle-Icon anpassen möchtest, klicke einfach auf "Change".

7. Branding:

Im Branding-Bereich besteht die Möglichkeit, das Mercury-Logo aus dem Footer oder Fußbereich zu entfernen. Dies ist besonders nützlich, wenn du ein konsistentes Branding auf deiner Webseite beibehalten möchtest.

8. Header:

Im Header-Bereich kannst du die Farbe des Headers anpassen. Diese Einstellung ermöglicht es dir, das Erscheinungsbild des Headers entsprechend deiner Markenfarben oder dem Design deiner Webseite anzupassen.

9. Body und Body shadow:

Im Body-Bereich kannst du die Hintergrundfarbe des Widgets anpassen, um es besser an das Design deiner Webseite anzupassen. Zusätzlich kannst du die Farbe des Schattens definieren, den das Widget wirft, um eine visuelle Tiefe zu erzeugen und das Widget hervorzuheben.

10. Body font:

Im Bereich "Body font" kannst du eine geeignete Schriftart für den Text im Widget auswählen. Die Wahl der Schriftart trägt wesentlich zum Erscheinungsbild und zur Lesbarkeit des Widgets bei.

11. Body shadow:

Unter "Body shadow size" kannst du die Größe des Schattens anpassen, den das Widget wirft. Durch die Einstellung der Schattengröße kannst du das Ausmaß dieses visuellen Effekts steuern.

12. Body corner radius:

Der "Body corner radius" bezieht sich auf den Grad der Abrundung der Ecken des Webwidgets. Durch das Festlegen dieses Parameters kannst du entscheiden, wie stark die Ecken des Widgets abgerundet werden sollen. Ein höherer Wert führt zu stärker abgerundeten Ecken, während ein niedrigerer Wert zu schärferen Ecken führt.

13. Message Design:

Im Abschnitt "Message Design" kannst du das Erscheinungsbild der Nachrichtenfenster anpassen. Die Option "Size and shape" ermöglicht es dir, sowohl die Schriftgröße als auch den Eckenradius der Nachrichtenfenster festzulegen. Wenn du die "Font size" änderst, beeinflusst dies die Größe der Schrift in den Nachrichtenblasen, während die Einstellung "Corner radius" den Grad der Abrundung der Ecken in den Nachrichtenblasen steuert.

14. User messages:

Im Abschnitt "User messages" kannst du das Erscheinungsbild der Nutzernachrichten anpassen. Die Option "Background" ermöglicht es dir, die Hintergrundfarbe der Nachrichtenblasen festzulegen, während "Font" die Schriftfarbe der Nutzernachrichten steuert.

15. Bot messages:

Im Bereich "Bot messages" kannst du das Erscheinungsbild der Botnachrichten anpassen. Mit der Option "Background" bestimmst du die Hintergrundfarbe der Nachrichtenblasen für die Botnachrichten. "Font" ermöglicht es dir, die Schriftfarbe der Botnachrichten festzulegen.

16. Service agent messages:

Im Abschnitt "Service agent messages" kannst du das Erscheinungsbild der Nachrichten festlegen, die von Service-Agenten gesendet werden. Hier kannst du sowohl die Hintergrundfarbe als auch die Schriftfarbe für diese Nachrichten anpassen. Durch diese Anpassungen kannst du sicherstellen, dass die Nachrichten der Service-Agenten klar erkennbar sind und sich visuell von anderen Nachrichten im Chat abheben.

17. Dates and Timestamps:

"Date background" legt die Hintergrundfarbe, "Date font" die Schriftfarbe und "Timestamp font" die Farbe des Zeitstempels fest.

18. Quick reply buttons:

Im Abschnitt "Quick reply buttons" kannst du das Design der Schnellantwortbuttons festlegen. Du kannst verschiedene Eigenschaften der Buttons anpassen, darunter den Radius der Buttons, die Hintergrundfarbe und Schriftfarbe, sowohl für den normalen Zustand als auch für den Hover-Zustand, sowie den Schatten und die Schattenunschärfe.