Un widget de chat qui ressemble au reste de votre boutique — le nouveau système de modèles
Un widget de chat qui ressemble au reste de votre boutique
Il y a environ un mois, nous avons rencontré un grand éditeur néerlandais. Deux de ses titres exploitent des boutiques e-commerce avec une identité visuelle très marquée. Un prix rouge divisé en deux tailles (partie entière en grand, centimes plus petits et légèrement surélevés). Une étiquette jaune dans le coin supérieur gauche de la carte produit avec le prix conseillé et le prix actuel disposés côte à côte. Une flèche orange faisant office de call-to-action. Un clic sur la carte ou la flèche devait ouvrir les détails du produit dans une modale, et non rediriger vers la page boutique. Beaucoup de ces éléments devaient être totalement différents du widget Upsellic standard.
À l'époque, toute la configuration du thème Upsellic se résumait à quatre couleurs. Nous l'avons dit franchement : sans refonte du système, c'est impossible.
Nous l'avons fait.
Que sont les modèles du widget ?
Chaque thème de widget Upsellic est désormais composé de 15 modèles indépendants. Chaque modèle est un fragment de code en Nunjucks — un langage similaire à Twig, Handlebars ou Jinja. Un seul fichier CSS central relie l'ensemble. Ensemble, ils rendent tout ce que voit le visiteur : les cartes produit dans les messages de l'assistant, les bulles de conversation, la modale détail produit, la modale d'évaluation de la conversation, l'en-tête du widget, le pied de page et la bannière promotionnelle.
Vous pouvez réécrire chacun de ces modèles depuis zéro. Vous avez un contrôle total sur la structure HTML, les classes CSS, l'ordre des éléments et l'ensemble de la mise en page. Seuls restent inchangés les noms des variables — product.title, theme.primaryColour, phrases.viewProduct — que le backend connecte automatiquement aux bonnes données. Vous n'avez pas besoin de les apprendre par cœur ; le modèle système qui sert de point de départ utilise déjà toutes les variables disponibles. Vous copiez, modifiez, vérifiez le résultat.
Ce que cela change au quotidien
Supposons que vous déployiez le widget sur une boutique de cosmétiques. La page produit a une mise en page minimaliste — beaucoup d'espace blanc, le prix donné comme un nombre cohérent, un bouton « Ajouter au panier » noir. Le widget Upsellic par défaut a des cartes produit avec un dégradé, des ombres douces et un CTA violet — agréable à regarder, mais ne correspond pas au reste de la page.
Au lieu de nous envoyer un message demandant de l'aide, vous clonez un thème système, ouvrez l'éditeur de modèles, sélectionnez l'emplacement PRODUCT_CARD, supprimez le dégradé, réduisez l'ombre, transformez le bouton en un rectangle noir. À droite du panneau, une prévisualisation en direct s'affiche en permanence avec des données d'exemple — vous voyez immédiatement à quoi ressemble la carte aussi bien seule qu'avec la justification de recommandation ajoutée par l'assistant sous le titre.
Chaque frappe au clavier est enregistrée dans un brouillon. Le brouillon ne quitte pas votre panneau — le widget en production continue d'afficher ce que vous avez publié en dernier. Vous pouvez travailler sur un emplacement pendant une heure, laisser une ébauche inachevée pendant une semaine, revenir le lendemain matin et continuer. Les clients ne voient rien tant que vous n'avez pas cliqué sur Publier.
C'est une décision de conception délibérée, pas un détail technique. Nous avons observé des utilisateurs trop effrayés pour toucher à quoi que ce soit dans le widget en production, parce que chaque modification part immédiatement en production. Ici, c'est l'inverse — expérimenter ne coûte rien, et la dernière étape (la publication) demande un clic conscient.
Comparer avec la source — ce qui a réellement changé
Après une heure de modifications, il est facile d'oublier ce qui a été modifié. À côté de chaque emplacement se trouve un bouton Comparer avec la source, qui bascule l'éditeur en mode diff côte à côte : à gauche le modèle système original, à droite votre version. Chaque différence est mise en évidence ligne par ligne.
Nous n'avons pas d'historique de modifications élaboré façon commit log — ce n'est pas Git. Cette vue suffit en pratique : vous voyez ce qui a été ajouté, ce qui a été supprimé, et vous pouvez soit conserver les modifications, soit les annuler via Réinitialiser (rétablit l'emplacement à la version système) ou Annuler le brouillon (revient à ce qui est actuellement publié).
Export et import — les thèmes sont portables
Chaque thème personnalisé peut être exporté dans un seul fichier JSON. Couleurs, les 15 emplacements, brouillons et versions publiées inclus. Le fichier reçoit un nom avec la date d'export, par ex. MonTheme.2026-05-01T12-34-56.theme.json.
À quoi cela sert ? Trois cas d'usage concrets.
Premier : une agence conçoit le thème sur un compte de test, l'exporte, le client l'importe sur son compte de production. Sans copier-coller modèle par modèle.
Deuxième : vous voulez annuler des modifications. Vous avez un export d'il y a deux semaines ? Réimportez-le — et voici le détail important — l'import n'écrase jamais un thème existant. Il crée un nouveau thème avec la mention (import 2026-05-01 14:22:08) ajoutée au nom. L'ancien thème, celui qui est actuellement en production, reste intact. Pour annuler les modifications, il vous suffit de pointer les paramètres du widget vers le thème importé. Si la nouvelle version s'avère finalement meilleure — vous revenez au thème précédent en un clic.
Troisième : des tests A/B à part entière. Vous importez la variante B comme thème séparé, vous la branchez sur un deuxième widget de la même page (par ex. pour 50 % du trafic), vous collectez des données pendant une semaine, vous décidez quel thème fonctionne le mieux.
L'éditeur de l'intérieur
L'éditeur de modèles est Monaco — le même moteur qui propulse VS Code. Coloration syntaxique pour HTML et Nunjucks dans les modèles d'emplacement, coloration CSS dans l'emplacement STYLES. Multi-curseur, recherche et remplacement, correspondance des accolades, numéros de ligne et l'ensemble complet des raccourcis clavier.
À droite se trouve la prévisualisation en direct, qui se rafraîchit automatiquement à chaque modification du brouillon. Elle utilise des données d'exemple — produit, contenu, commande et bulles de conversation reproduisant l'apparence d'une vraie discussion avec l'assistant. Vous cliquez sur une carte produit dans la prévisualisation — la modale que vous venez d'éditer s'ouvre. Vous cliquez sur le X dans le coin supérieur droit — la modale se ferme.
La barre d'outils dispose également d'un bouton Vider le cache du widget. Utilisez-le lorsque vous voulez forcer une reconstruction en production sans modifier aucun modèle.
Les thèmes système sont en lecture seule — et pourquoi c'est la bonne décision
Les trois thèmes système — default, minimal, editorial — sont marqués « lecture seule ». Si vous voulez modifier quelque chose, vous devez d'abord cloner le thème. C'est intentionnel.
La raison : lorsque nous publions des mises à jour (ajout d'un nouvel élément, correction d'une régression visuelle dans un navigateur), les modifications ne touchent que les thèmes système. Votre thème cloné reste exactement dans l'état où vous l'avez laissé. Il n'y a aucune situation où vous vous réveillez le matin, ouvrez la boutique et le widget a soudain l'air différent.
Au besoin, vous pouvez vérifier ce qui a changé dans le thème système — le bouton « Comparer avec la source » montre toujours la version système actuelle à côté de la vôtre. Si vous estimez que la nouvelle version système contient un élément utile qui vous manque, vous le copiez manuellement dans votre propre thème. Sans risque que nos modifications n'écrasent vos personnalisations.
À qui s'adresse cette solution
Si votre boutique a une identité visuelle marquée et que jusqu'à présent vous deviez vous contenter de quatre couleurs depuis le configurateur — c'est une option pour vous. Si vous gérez une boutique sur un thème standard et souhaitez que l'assistant IA se présente à côté des produits comme s'il faisait partie de la mise en page, et non comme un widget tiers collé à l'extérieur — c'est aussi une option pour vous.
Si vos visiteurs ne distinguent pas le widget du reste de la page, félicitations — votre conversion sur les recommandations IA vient d'augmenter. Quoi que l'assistant leur montre, il doit d'abord être remarqué et reconnu comme un interlocuteur crédible.
Comment commencer
L'éditeur est disponible sur chaque compte dans la section Thèmes → choisir un thème → Éditeur de code. La première étape est de cloner l'un des thèmes système — vous obtenez immédiatement un nom et les 15 emplacements pré-remplis avec le contenu système. Ensuite, il ne reste plus qu'à éditer, prévisualiser et publier.
Le guide pas à pas complet — avec tous les boutons, captures d'écran et le processus d'export et d'import — est décrit dans un guide séparé :