Plateforme
Templates
Tarifs
Ressources
DocumentationAPI
Contact
Se connecter
Commencer
FR
EN

partager

Comment personnaliser le CSS de son chatbot ?

Les interfaces Prisme.ai Messenger 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 pour 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.

Parution le 

1/5/2021

, par 

Kévin MEGE

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

Cliquez sur le crayon pour modifier les paramètres du canal.

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

Cliquez sur "Paramètres avancés" afin de dérouler un volet d'options.

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.

‍

Une règle CSS visant l'élément de classe ".pr-input__send" et ayant pour attribut "title" valant "Recommencer la conversation".

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

Champ de saisie sans le bouton "Recommencer la conversation".

‍

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

Clic droit sur l'image de l'assistant.

‍



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

‍

L'élément sélectionné en surbrillance dans l'inspecteur du navigateur.

‍

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 : 

‍

Ajout d'une règle visant la classe "pr-chat-head__avatar".


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 !

PlateformeCas d'usageTarifs
BlogDocumentationRecrutement
Se connecterBlagnac, France
CGUMentions LégalesPolitique de confidentialité

Tous droits réservés Prisme.ai - 2016-2022 - Gogowego SAS - Made In Francecréation de site internet polish_ studio