Themen & Anpassung

Passen Sie das Erscheinungsbild Ihres Helfers an Ihre Marke und das Design Ihrer Website an.

Minuten Lesezeit

Das Themensystem von AI Anywhere ermöglicht es Ihnen, das Aussehen und Gefühl Ihres Helfers anzupassen. Von den Schaltflächenfarben bis zu den Schriftarten können Sie den Helfer nahtlos in das Design Ihrer Website einfügen oder mit Ihren Markenfarben hervorheben. Sie können Ihre eigenen Hell- und Dunkelmodi entwerfen, indem Sie Farben und Stile an das Erscheinungsbild Ihrer Website anpassen.

Anpassung der Schaltflächenfarbe

Die Farbe der Helferschaltfläche ist eine der sichtbarsten Anpassungsoptionen. Sie können sie so einstellen, dass sie zu Ihrer Marke oder Ihrem Seitenthema passt.

Einstellung der Schaltflächenfarbe

In Ihrer Helferkonfiguration im Dashboard navigieren Sie zu den Theme-Einstellungen. Hier können Sie die primäre Schaltflächenfarbe einstellen mit:

Farbwähler: Wählen Sie eine Farbe visuell aus der Farbwahloberfläche
Hex-Code: Geben Sie einen spezifischen Hex-Farbcode ein (z.B., #4B0076 für Lila, #007bff für Blau)
RGB-Werte: Geben Sie RGB-Werte an, wenn Sie möchten (automatisch in Hex umgewandelt)

/* Beispiel: Einstellung der Schaltflächenfarbe auf Markenlila */
Schaltflächenfarbe: #4B0076

Beschriftungsfarbe

Die Beschriftungsfarbe (der Text, der auf der Schaltfläche erscheint) passt sich automatisch dem Kontrast basierend auf Ihrer Schaltflächenfarbe an. Wenn Ihre Schaltfläche dunkel ist, wird der Text hell sein; wenn hell, wird der Text dunkel sein. Dies gewährleistet die Lesbarkeit und bewahrt gleichzeitig Ihre gewählte Ästhetik.

Helfer

Links: Dunkle Schaltfläche mit hellem Text | Rechts: Helle Schaltfläche mit dunklem Text

Erstellen von Hell- und Dunkelmodi

Obwohl AI Anywhere keinen vorgefertigten Dunkelmodus enthält, können Sie Ihre eigenen Hell- und Dunkelthemen implementieren, indem Sie Schaltflächenfarben, Textfarben und andere Stiloptionen an das Design Ihrer Website anpassen.

Gestaltung des Dunkelmodus

Um ein Dunkelmodus-Erscheinungsbild für Ihren Helfer zu erstellen:

Verwenden Sie dunklere Schaltflächenfarben: Wählen Sie dunkle Farben (z.B., #1a1a1a, #2d3748) für dunkle Themenwebsites
Passen Sie die Textfarben an: Sorgen Sie für einen angemessenen Kontrast für die Lesbarkeit - dunkle Schaltflächen mit hellem Text, oder passen Sie die Beschriftungsfarben an
Passen Sie Ihre Seite an\ Wählen Sie Farben, die mit Ihrem Dunkelmodus-Farbschema übereinstimmen

<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
<textarea id="message"></textarea>
<span data-helper-anchor data-helper-token="your-helper-token"></span>

Die von Ihnen konfigurierte Schaltflächenfarbe bestimmt das Erscheinungsbild. Verwenden Sie dunklere Farben für Dunkelmodi, hellere Farben für Hellmodi.

Schriftfamilienanpassung

Sie können die vom Helfer verwendete Schriftfamilie anpassen, um sie an Ihre Website anzupassen\

Schriftfamilie festlegen

In Ihrer Helfer-Konfiguration im Dashboard navigieren Sie zu den Theme-Einstellungen, wo Sie aus einer Vielzahl von Schriftfamilien wählen können, darunter:

Web-sichere Schriften (Arial, Helvetica, Georgia, Times New Roman)
Moderne serifenlose Schriften (Inter, Roboto, Open Sans, Lato)
Serifenschriften (Merriweather, Playfair Display)

Der Helfer wird die ausgewählte Schriftfamilie für alle Textelemente verwenden, um visuelle Konsistenz mit Ihrer Website zu gewährleisten\

Button-Stile: Abgerundet vs. Eckig

Wählen Sie zwischen abgerundeten (pillenförmigen) und eckigen Button-Stilen, um Ihre Website anzupassen\

Abgerundete Buttons

Abgerundete Buttons haben vollständig abgerundete Ecken, was ihnen ein modernes, freundliches Aussehen verleiht. Dieser Stil passt gut zu zeitgenössischen Designs und weicheren Markenästhetiken.

Abgerundeter Button-Stil

Eckige Buttons

Eckige Buttons haben scharfe, minimalistische Ecken, die zu eher geometrischen, strukturierten Designs passen. Sie vermitteln ein professionelles, unternehmerisches Gefühl.

Eckiger Button-Stil

Farbcode-Beispiele

Hier sind einige gängige Farbcodes, die Sie verwenden könnten:

Lila: #4B0076 (Standard bei AI Anywhere)
Blau: #007bff
Grün: #28a745
Rot: #dc3545
Gelb: #ffc107
Grau: #6c757d

Beste Designpraktiken

Beste Designpraktiken:

Barrierefreiheit: Stellen Sie sicher, dass der Farbkontrast zwischen Button und Text für die Lesbarkeit ausreichend ist (der WCAG AA-Standard empfiehlt ein Kontrastverhältnis von mindestens 4,5:1)
Kontrast: Wählen Sie Button-Farben, die sich vom Seitenhintergrund abheben, aber nicht\
Einfachheit: Halten Sie die Anpassungen minimal; zu viele Stiländerungen können den Helfer von Ihrer Marke entfremdet wirken lassen
Konsistenz: Passen Sie die Farben Ihres Helfers an die primären Aktionsschaltflächen Ihrer Website an, um ein einheitliches Benutzererlebnis zu schaffen
Testen: Vorschau Ihres Helfers immer auf hellen und dunklen Hintergründen anzeigen, um sicherzustellen, dass er in allen Szenarien gut aussieht

Vorschau vor der Bereitstellung

Bevor Sie Ihren Helfer live schalten, verwenden Sie die Vorschaufunktion in Ihrem Dashboard, um genau zu sehen, wie Ihre Anpassungen aussehen werden. Dies hilft Ihnen:

Überprüfen Sie, ob die Farbauswahl zu Ihrer Marke passt
Überprüfen Sie die Lesbarkeit und den Kontrast
Stellen Sie sicher, dass der Button-Stil zu Ihrer Website passt\
Testen Sie Ihre benutzerdefinierten Designs für den hellen und dunklen Modus, falls zutreffend

Denken Sie daran: Nachdem Sie Änderungen am Thema in Ihrer Helfer-Konfiguration vorgenommen haben, generieren Sie Ihr Snippet neu, um den aktualisierten Code mit Ihren neuen Theme-Einstellungen zu erhalten, und aktualisieren Sie dann Ihre Website mit dem neuen Snippet.

Navigation