Introduction.‍

Les interfaces fournies par Prisme.ai sont entièrement personnalisables. Il est possible de les modifier simplement via le connecteur propre au canal choisi.
Des options basiques sont disponibles permettant de changer les couleurs ou le fond, mais une modification plus poussée est proposée via la possibilité d’insérer votre propre style au format CSS.
Et oui, je vais pouvoir créer ce style rétro-futuriste dont j'ai toujours rêvé pour mon chatbot !

Cet article vous apprendra à :

1. Enregistrer votre CSS personnalisé
2. Cibler les classes CSS des éléments graphiques à personnaliser
   

Enregistrer votre CSS personnalisé.

Nous commençons avec le plus facile, pour modifier le CSS d'un assistant c'est très simple :

1. Rendez-vous dans l'onglet "Canaux" de votre chatbot, et sélectionnez le canal à personnaliser. Pour l’exemple nous utiliserons “webchat”.

2. Déplier les paramètres avancés

3. Trouvez l'option “Définir des styles CSS personnalisés”, cliquez-dessus.

4. Un éditeur s’ouvre alors, vous permettant d’insérer vos propres styles CSS.

‍

5. Valider la modification, puis n'oubliez pas de remonter pour enregistrer la configuration globale du canal Webchat.

‍

La règle de l'exemple permet par exemple de cacher le bouton permettant de "Recommencer la conversation" sur l'affichage webchat, on obtient docn plus de place à côté du champ de saisie :
‍
‍

‍

Cibler les classes CSS des éléments graphiques à personnaliser.

En CSS, tout élément graphique peut être ciblé d’une manière ou d’une autre.  

Cependant, pour faciliter l’ajout de CSS personnalisé, tous les éléments graphiques du chatbot susceptibles d’être personnalisés sont identifiés par classe CSS Prisme.ai, celles-ci débutent par "pr-" et essaient d'être le plus explicite possible.

Pour savoir quels sont les classes des éléments à modifier, il vous suffit d’inspecter le chat via les outils fournis par votre navigateur. Pour Chrome par exemple il faut effectuer un clic droit sur l’élément désiré ainsi :
‍

‍

Le navigateur ouvrira alors l’inspecteur en surlignant la balise correspondant à l’élément sélectionné.
Dans cette balise qu’apparaît le nom de la classe, indiquée par l’attribut class=”...”.

Dans notre exemple, l’élément sélectionné (il s’agit de l'image de l'assistant dans le header) possède la classe “pr-chat-head__avatar”.

‍

‍

Vous pouvez ensuite rajouter un style CSS pour cette classe comme vu dans la première partie.
Par exemple, rendons cet image plus imposante en y ajoutant de la hauteur. Soyons fou, doublons la : 

‍

Le nom de la classe est précédé d’un point, puis suivi d’une paire d’accolades ouverte et fermée.

A l’intérieur de ces accolades, vous pouvez placer toutes les règles CSS de votre choix.
Si vous n'êtes pas familier avec CSS il existe de nombreux guide sur internet très très bien fait à ce sujet !

Bien entendu, n'oubliez pas de valider, puis d'enregistrer vos modifications.
Le résultat de notre nouvelle règle :
‍

‍

Conclusion.

Bravo ! Vous venez de personnaliser votre assistant avec votre propre CSS ! 🎉

Le style a son importance et maintenant vous pouvez complètement dominer celui de votre assistant. Grâce à cet accès poussé au style de votre chatbot vous pouvez créer une interface qui vous correspond complètement.
Le CSS est un outil très puissant et il vous permettra vraiment de modifier complètement l'affichage que vous souhaitez pour votre assistant, bien entendu vous pouvez également l'utiliser simplement pour changer des petits détails qui vous dérangent, c'est à vous seul d'en décider !

N'hésitez pas à nous partager vos styles les plus réussis, peut-être qu'on fera une élection Mr & Mrs Prisme.ai... Qui sait ?
‍
Bonne création !