Personnaliser les modèles du widget
Contrôle total sur votre widget de chat — modifiez chacun des 15 emplacements visuels (cartes produit, bulles de message, modales, en-tête, CSS) dans l'éditeur de modèles intégré.
Que sont les modèles d'emplacement
Chaque thème dans Upsellic est composé de 15 modèles d'emplacement indépendants. Chaque emplacement définit un fragment visuel du widget — par exemple la carte produit affichée lorsque l'IA recommande un produit, ou la modale d'évaluation qui apparaît quand un client ferme le chat. Les emplacements sont écrits en Nunjucks (un langage de template similaire à Twig, Handlebars ou Jinja), et un seul emplacement STYLES contient tout le CSS qui assemble la mise en page.
Cela signifie que chaque partie du widget visible par le visiteur est modifiable, par marchand, par thème. Vous pouvez adapter le chat au design visuel de votre boutique dans les moindres détails — couleurs, typographie, espacements, formes de boutons, mises en page des cartes — sans aucun travail de notre côté et sans casser le widget d'un autre marchand.
Les 15 emplacements
| Emplacement | Ce qu'il rend |
|---|---|
PRODUCT_CARD | Carte de recommandation produit dans le message de l'assistant |
CONTENT_CARD | Carte de recommandation d'article / contenu |
ORDER_CARD | Carte de suivi de commande avec statut et lien de livraison |
WELCOME_MESSAGE | Message d'accueil affiché à la première ouverture du chat |
GOODBYE_MESSAGE | Message d'au revoir à la fin de la conversation |
HEADER | Barre supérieure du widget (titre, sous-titre, contrôles) |
FOOTER | Bandeau de marque sous le champ de saisie |
QUANTITY_TIERS | Bloc de prix par quantité pour le produit |
MESSAGE_USER | Bulle de message du client |
MESSAGE_ASSISTANT | Bulle de message de l'assistant |
PRODUCT_MODAL | Popup détail produit complet ouvert au clic sur une carte |
RATING_MODAL | Popup d'évaluation de conversation avec boutons de sentiment |
HANDOFF_UI | Écrans de transfert vers un agent (en attente / connecté / canaux de secours) |
STYLES | Bundle CSS complet du thème |
Les emplacements référencent des variables partagées — theme.primaryColour, phrases.viewProduct, product.salePrice — donc même si vous réécrivez tout le balisage, le widget continue à connecter automatiquement les données produit, les paramètres de couleur et les traductions.
Thèmes système vs thèmes personnalisés
Upsellic fournit des thèmes système (default, minimal, editorial) — ce sont des modèles en lecture seule par conception, afin que nos mises à jour n'écrasent jamais les personnalisations de qui que ce soit. Pour personnaliser un widget, vous clonez d'abord l'un des thèmes système dans un thème personnalisé privé qui appartient uniquement à votre compte. À partir de ce moment, le thème vous appartient et vous pouvez l'éditer librement.
Cloner un thème système
Avant de pouvoir éditer un modèle, vous avez besoin d'un thème personnalisé — une copie d'un thème système qui existe uniquement dans votre compte.
Ouvrir la liste des thèmes
Dans le menu latéral du tableau de bord, cliquez sur Thèmes. Vous voyez tous les thèmes disponibles — les thèmes système sont marqués séparément des thèmes personnalisés que vous avez créés précédemment.
Cliquer sur "Cloner" sur le thème système à utiliser comme point de départ
Une modale apparaît demandant le nom de votre nouveau thème. Choisissez un nom qui reflète la marque ou l'objectif (par ex. Édition de Noël, Boutique NL, Mobile-first).
Après confirmation, le nouveau thème personnalisé apparaît dans la liste — les 15 emplacements sont pré-remplis depuis le thème système cloné. Les couleurs sont aussi copiées — mais tout est désormais éditable.
Le thème système cloné reste inchangé et continue d'être disponible comme référence "Comparer avec la source" dans l'éditeur — utile lorsque vous voulez voir exactement ce que vous avez modifié.
Éditer un emplacement
Ouvrir l'éditeur de modèles
Sur la carte de n'importe quel thème personnalisé, cliquez sur Éditeur de code. L'éditeur affiche à gauche la liste des 15 emplacements, au centre l'éditeur Monaco, et à droite un panneau de prévisualisation en direct qui rend le widget à partir du brouillon actuel.
Choisir un emplacement à éditer
Cliquez sur un nom d'emplacement dans la barre latérale — l'éditeur charge le contenu de cet emplacement et la prévisualisation se rafraîchit. L'emplacement actif est mis en évidence, et les emplacements avec des brouillons non sauvegardés (plus de détails ci-dessous) sont marqués pour que vous voyiez ce qui a été modifié.
Effectuer vos modifications
L'éditeur est un Monaco complet (le moteur qui propulse VS Code), avec coloration syntaxique pour HTML / Nunjucks (dans les emplacements de modèle) et CSS (dans l'emplacement STYLES). Correspondance des accolades, numéros de ligne, multi-curseur, recherche/remplacement, raccourcis clavier — toutes les fonctionnalités dont vous avez besoin pour éditer du code.
Chaque frappe est sauvegardée automatiquement comme brouillon. Les brouillons sont privés à l'éditeur et ont zéro effet sur le widget en production — vos clients continuent à voir la version précédemment publiée jusqu'à ce que vous cliquiez sur Publier.
Utiliser la prévisualisation en direct
Le panneau de prévisualisation à droite rerend le widget chaque fois que le brouillon change. Il utilise des données d'exemple pour les produits / contenus / commandes, ainsi vous voyez à quoi ressemblent les cartes, bulles, modales et prix sans envoyer de vrais chats. Cliquez sur une carte produit dans la prévisualisation pour vérifier la modale que vous venez d'éditer.
Publier vos modifications
Les brouillons permettent d'expérimenter en toute sécurité. Pour publier vos modifications, le workflow est :
Comparer avec la source
Cliquez sur Comparer avec la source sur l'emplacement modifié. L'éditeur passe en mode diff côte à côte (l'éditeur de diff intégré de Monaco) — modèle système original à gauche, votre brouillon à droite. Chaque différence est mise en évidence ligne par ligne, vous voyez exactement ce qui changera avant la mise en production.
Publier un seul emplacement — ou tous d'un coup
Cliquez sur Publier pour pousser le brouillon de l'emplacement actif vers la production. Ou cliquez sur Tout publier dans la barre d'outils pour publier tous les emplacements ayant des changements non sauvegardés — cela vide aussi le cache du thème en une seule fois, ce qui est plus rapide quand vous éditez plusieurs emplacements.
La publication émet en interne un événement theme.updated. Le bundle widget pour chaque widget actif utilisant ce thème est reconstruit, le cache CDN est purgé. Le prochain chargement de page côté clients servira la version fraîche.
Annuler ou réinitialiser si quelque chose ne va pas
- Annuler le brouillon — restaure le brouillon de l'emplacement à la version actuellement publiée, en annulant les changements non publiés.
- Réinitialiser — recharge l'emplacement depuis le modèle système original (celui à partir duquel ce thème a été cloné). Utile si vous voulez recommencer à éditer un emplacement à zéro.
Vider le cache du widget
La plupart du temps vous n'avez pas besoin de vider le cache manuellement — publier un emplacement le fait déjà automatiquement. Pour les rares cas où vous voulez forcer une reconstruction, la barre d'outils de l'éditeur dispose d'un bouton Vider le cache du widget.
Le bouton purge à la fois le cache de bundle en mémoire sur notre API et le cache CDN pour chaque widget actif utilisant ce thème. La requête suivante reconstruit le bundle à partir des modèles actuellement publiés.
Exporter et importer des thèmes
Les thèmes sont portables — vous pouvez exporter un thème personnalisé entier (couleurs + 15 emplacements, brouillons et publié, dans un seul fichier JSON) et le réimporter plus tard, sur le même compte ou un autre.
Exporter
Sur la carte de n'importe quel thème personnalisé, cliquez sur Exporter. Un fichier JSON est téléchargé sur votre ordinateur avec un nom du type MonTheme.2026-05-01T12-34-56.theme.json. Gardez-le en lieu sûr — c'est un instantané complet du thème.
Les thèmes système ne peuvent pas être exportés directement. Clonez d'abord le thème système, puis exportez le thème cloné.
Importer
Cliquez sur Importer le thème dans la barre d'outils en haut de la liste des thèmes et sélectionnez un fichier JSON. Le thème importé arrive toujours comme un nouveau thème personnalisé — son nom est le nom original suivi de l'horodatage d'import, par ex. MonTheme (import 2026-05-01 14:22:08).
L'import n'écrase jamais un thème existant. Cela signifie que vous pouvez :
- Annuler une personnalisation en important un instantané plus ancien — la version précédente arrive comme un tout nouveau thème que vous sélectionnez dans les paramètres du widget.
- Expérimenter — importer un instantané, le personnaliser sans toucher l'original, faire de l'A/B en basculant les thèmes du widget.
Pour rendre un thème importé actif sur un widget, allez dans Widgets, éditez le widget concerné, et choisissez le thème importé dans la liste des thèmes. La bascule est instantanée — le prochain chargement de page côté client servira le nouveau thème.