Personnaliser l’apparence Chat Web avec Webchat Playground

Webchat Playground vous aide à personnaliser l’apparence et le comportement de votre assistant Copilot, Chat Web. L’interface utilisateur intuitive vous permet de modifier les couleurs, les polices, les miniatures et bien plus encore pour correspondre à l’identité de votre marque. Cet article explique comment utiliser Webchat Playground pour créer et gérer des thèmes et exporter des styles en tant que JSON ou HTML.

Interface utilisateur Webchat Playground

L’interface conviviale de Webchat Playground vous aide à définir l’apparence de votre Chat Web. Vous pouvez facilement effectuer des ajustements et afficher des aperçus en temps réel de vos modifications.

L’interface comporte trois domaines principaux :

1. Le volet gauche affiche les thèmes enregistrés avec leurs couleurs primaires, secondaires et d’accentuation. Sélectionnez un thème à modifier ou pour lequel afficher un aperçu.

2. Le volet central fournit un aperçu du thème sélectionné ou du thème que vous modifiez.

3. Le volet droit vous permet de basculer entre les onglets JSON et Extrait de code. La vue JSON fournit les styles actuels dans un tableau JSON, que vous pouvez coller dans une Chat Web existante. La vue Extrait de code contient un exemple de code HTML d’une Chat Web avec les styles incorporés.

Cet exemple de l’interface utilisateur affiche :

1. Dans le volet gauche, l’éditeur de style où vous modifiez ou créez un thème.

   Parmi les sections figurent Général, Zone d’envoi, Zone de suggestion, Avatar et Bulles. L’éditeur inclut également un vérificateur d’accessibilité pour toutes les sections applicables. Vous enregistrez et supprimez des actions en haut.

2. Dans le volet droit, l’onglet Extrait de code affichant l’exemple de code HTML. Basculez vers l’onglet JSON pour voir l’exemple JSON.

Utiliser des thèmes prédéfinis ou créer vos propres thèmes

Webchat Playground propose des thèmes prédéfinis qui présentent différentes options de personnalisation pour l’expérience de Chat Web. Ces thèmes vous donnent un point de départ lors de la conception d’un nouveau thème. Vous pouvez également créer des thèmes pour répondre à vos besoins spécifiques et les enregistrer pour une utilisation ultérieure.

Afficher un aperçu d’un thème

Sélectionnez un thème dans le volet gauche (où les couleurs sont affichées) pour ouvrir l’aperçu webchat.

Créer un thème

Pour créer un thème :

1. Sélectionnez Ajouter un thème dans le volet de gauche.
   Le volet gauche devient un éditeur de style dans lequel vous pouvez apporter des modifications.
2. Entrez un nom pour le thème.
3. Cliquez sur Enregistrer.

Modifier un thème

Pour modifier un thème existant :

1. Sélectionnez l’icône de crayon en regard du nom du thème dans le volet gauche.
2. Apportez des modifications dans l’éditeur de style.
3. Une fois terminé, sélectionnez Enregistrer.

Supprimer un thème

Pour supprimer un thème existant :

1. Ouvrez le thème en mode Édition.
2. Sélectionner l’icône de suppression (corbeille) en haut.

Exporter les styles

Pour exporter les styles :

1. Sélectionnez le thème souhaité dans le sélecteur de thème.
2. Sélectionnez l’onglet JSON dans le volet de droite.
3. Copiez tout le texte de l’affichage et collez-le dans votre Chat Web HTML à l’aide de la variable styleOptions.

Exporter l’extrait HTML

Pour exporter l’extrait HTML :

1. Sélectionnez le thème souhaité dans le sélecteur de thème.
2. Sélectionnez l’onglet Extrait de code dans le volet droit.
3. Enregistrez tout le balisage HTML dans la vue sous la forme d’un fichier avec une extension .html.
4. Téléchargez le fichier sur votre serveur web.

Exemple HTML

L’exemple d’extrait de code HTML présente un contrôle Chat Web sous forme de widget flottant, avec les styles sélectionnés appliqués.

Informations associées

• Personnaliser l’apparence d’un assistant