Design et le Studio de Design du Widget
Habillez le widget aux couleurs de votre marque — tokens de thème, composants et le studio de design par organisation.
Le groupe Surfaces est l’endroit où vous contrôlez l’apparence de l’assistant : voyez les composants qu’il peut afficher et concevez le widget en détail dans le Studio de design du widget.
Composants
Une référence des composants intégrés que l’assistant peut afficher — tableaux, cartes, formulaires et plus — ainsi que l’API pour enregistrer vos propres composants React afin que l’assistant les affiche aussi.
Studio de Design du Widget
Le Studio de Design est l’endroit où vous concevez le widget en profondeur. Il monte le widget réel comme un canevas en direct, donc ce que vous voyez est ce qui est déployé :
- Une bibliothèque de designs — conservez plusieurs designs et choisissez lequel est actif.
- Affectation par taille et par mode — donnez à chaque taille de chat son propre design si vous le souhaitez.
- Un inspecteur pour les couleurs, la typographie, la forme, le lanceur, les icônes et le mouvement, les surcharges par taille et le CSS avancé.
- Un design « détecté » qui dérive les thèmes clair et sombre de votre site en direct.
Créer et activer un design, étape par étape
Le Design Studio monte le vrai widget comme un canevas en direct, si bien que ce que vous voyez est ce qui sera déployé :
- Ouvrir le Design StudioRendez-vous dans le groupe Surfaces et ouvrez le Widget Design Studio. Il charge le widget en direct à côté d’une bibliothèque de designs.
- Créer un profilCliquez sur New profile et nommez-le — ou dupliquez le design intégré « detected », qui dérive des thèmes clair et sombre de votre site en direct, puis éditez à partir de là.
- Le régler dans l’inspecteurOuvrez le profil pour l’éditer. Utilisez l’inspecteur pour ajuster les couleurs, la typographie, la forme, le lanceur, les icônes et le mouvement — le canevas en direct se met à jour au fur et à mesure, et vos modifications s’enregistrent à mesure que vous les faites.
- L’assigner aux tailles et aux modesDans le panneau Sizes & modes, choisissez quelles tailles et quels modes de chat utilisent ce design — vous pouvez attribuer à chaque taille le sien si vous le souhaitez.
- En faire celui qui est utiliséL’enregistrement met à jour l’apparence stockée du profil, mais votre widget en direct ne change que lorsque vous choisissez Use this design pour en faire celui qui est actif. Promouvez en production quand il vous convient.