Thématisation & Personnalisation

Personnalisez l'apparence de votre Assistant pour qu'elle corresponde à votre marque et au design de votre site.

min de lecture

Le système de thèmes d'AI Anywhere vous permet de personnaliser l'apparence et la sensation de votre Assistant. Des couleurs des boutons aux polices, vous pouvez faire en sorte que le Assistant s'intègre parfaitement au design de votre site ou se démarque avec les couleurs de votre marque. Vous pouvez concevoir vos propres modes clair et sombre en personnalisant les couleurs et les styles pour correspondre à l'apparence de votre site.

Personnalisation de la couleur du bouton

La couleur du bouton de l'Assistant est l'une des options de personnalisation les plus visibles. Vous pouvez la définir pour qu'elle corresponde à votre marque ou au thème de votre site.

Définir la couleur du bouton

Dans la configuration de votre Assistant sur le tableau de bord, allez dans les paramètres du Thème. Ici, vous pouvez définir la couleur principale du bouton en utilisant :

Sélecteur de couleur : Choisissez une couleur visuellement depuis l'interface du sélecteur de couleur
Code hexadécimal : Entrez un code couleur hexadécimal spécifique (par exemple, #4B0076 pour le violet, #007bff pour le bleu)
Valeurs RGB : Spécifiez les valeurs RGB si vous préférez (converties automatiquement en hexadécimal)

/* Exemple : Définir la couleur du bouton sur le violet de la marque */
Couleur du bouton : #4B0076

Couleur de l'étiquette

La couleur du texte de l'étiquette (le texte qui apparaît sur le bouton) s'ajuste automatiquement pour le contraste en fonction de la couleur de votre bouton. Si votre bouton est foncé, le texte sera clair ; s'il est clair, le texte sera foncé. Cela garantit la lisibilité tout en maintenant l'esthétique choisie.

Assistants

Gauche : Bouton foncé avec texte clair | Droite : Bouton clair avec texte foncé

Créer des modes clair et sombre

Bien qu'AI Anywhere n'inclue pas de mode sombre préconçu, vous pouvez concevoir vos propres implémentations de thèmes clair et sombre en personnalisant les couleurs des boutons, les couleurs du texte et d'autres options de style pour correspondre au design de votre site.

Concevoir le mode sombre

Pour créer une apparence de mode sombre pour votre Assistant :

Utilisez des couleurs de bouton plus sombres : Choisissez des couleurs sombres (par exemple, #1a1a1a, #2d3748) pour les sites à thème sombre
Ajustez les couleurs du texte : Assurez un contraste adéquat pour la lisibilité - boutons sombres avec texte clair, ou personnalisez les couleurs des étiquettes
Adaptez à votre site\ Sélectionnez des couleurs qui s'alignent avec votre schéma de couleurs de mode sombre

<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>

La couleur du bouton que vous configurez déterminera l'apparence. Utilisez des couleurs plus sombres pour les modes sombres, des couleurs plus claires pour les modes clairs.

Personnalisation de la famille de polices

Vous pouvez personnaliser la famille de polices utilisée par l'Assistant pour correspondre à votre site\

Définir la famille de polices

Dans la configuration de votre Assistant sur le tableau de bord, allez dans les paramètres de thème où vous pouvez choisir parmi une variété de familles de polices, y compris :

Polices sûres pour le web (Arial, Helvetica, Georgia, Times New Roman)
Polices modernes sans-serif (Inter, Roboto, Open Sans, Lato)
Polices serif (Merriweather, Playfair Display)

L'Assistant utilisera la famille de polices sélectionnée pour tous les éléments textuels, assurant une cohérence visuelle avec votre site\

Styles de boutons : Arrondis vs. Carrés

Choisissez entre des styles de boutons arrondis (en forme de pilule) et carrés pour correspondre à votre site\

Boutons arrondis

Les boutons arrondis ont des coins entièrement arrondis, leur donnant une apparence moderne et conviviale. Ce style fonctionne bien avec des designs contemporains et des esthétiques de marque plus douces.

Style de bouton arrondi

Boutons carrés

Les boutons carrés ont des coins nets et minimalistes qui s'alignent avec des designs plus géométriques et structurés. Ils véhiculent une impression professionnelle et corporative.

Style de bouton carré

Exemples de codes couleur

Voici quelques codes couleur courants que vous pourriez utiliser :

Violet : #4B0076 (par défaut AI Anywhere)
Bleu : #007bff
Vert : #28a745
Rouge : #dc3545
Jaune : #ffc107
Gris : #6c757d

Meilleures pratiques de conception

Meilleures pratiques de conception :

Accessibilité : Assurez un contraste suffisant entre le bouton et le texte pour la lisibilité (la norme WCAG AA recommande un ratio de contraste d'au moins 4,5:1)
Contraste : Choisissez des couleurs de boutons qui se démarquent de l'arrière-plan de votre page mais ne\
Simplicité : Gardez la personnalisation minimale ; trop de changements de style peuvent donner l'impression que le Helper est déconnecté de votre marque
Cohérence : Faites correspondre les couleurs de votre Assistant aux boutons d'action principaux de votre site pour une expérience utilisateur cohérente
Test : Prévisualisez toujours votre Assistant sur des arrière-plans clairs et sombres pour vous assurer qu'il est esthétique dans tous les scénarios

Prévisualiser avant de déployer

Avant de rendre votre Assistant actif, utilisez la fonction de prévisualisation dans votre tableau de bord pour voir exactement à quoi ressembleront vos personnalisations. Cela vous aide à :

Vérifiez que les choix de couleurs correspondent à votre marque
Vérifiez la lisibilité et le contraste
Assurez-vous que le style du bouton s'adapte à votre site\
Testez vos designs personnalisés en mode clair et sombre si applicable

Rappelez-vous : après avoir modifié le thème dans votre configuration Assistant, régénérez votre extrait pour obtenir le code mis à jour avec vos nouveaux paramètres de thème, puis mettez à jour votre site avec le nouvel extrait.

Navigation