Een chat-widget die eruitziet als de rest van je shop — het nieuwe sjablonensysteem
Een chat-widget die eruitziet als de rest van je shop
Ongeveer een maand geleden hadden we een gesprek met een grote Nederlandse uitgever. Twee van zijn titels exploiteren e-commerce shops met een zeer uitgesproken visuele identiteit. Een rode prijs in twee maten gesplitst (groot geheel deel, kleinere centen iets verhoogd). Een gele tag in de linkerbovenhoek van de productkaart met de adviesprijs en de actuele prijs naast elkaar. Een oranje pijl die als call-to-action fungeert. Een klik op de kaart of de pijl moest de productdetails in een modal openen, en niet doorverwijzen naar de shop-pagina. Veel van die elementen moesten volledig anders zijn dan in de standaard Upsellic-widget.
In die tijd kwam de hele Upsellic-themaconfiguratie neer op vier kleuren. We hebben het ronduit gezegd: zonder herbouw van het systeem krijgen we dit niet voor elkaar.
We hebben het voor elkaar gekregen.
Wat zijn widget-sjablonen?
Elk Upsellic-widgetthema bestaat nu uit 15 onafhankelijke sjablonen. Elk sjabloon is een fragment code in Nunjucks — een taal vergelijkbaar met Twig, Handlebars of Jinja. Eén centraal CSS-bestand bindt het geheel samen. Samen renderen ze alles wat de bezoeker ziet: productkaarten in assistentenberichten, gespreksballonnen, het productdetail-modal, het modal voor gespreksbeoordeling, de widget-header, de footer en de promotiebanner.
Je kunt elk van deze sjablonen vanaf nul herschrijven. Je hebt volledige controle over de HTML-structuur, CSS-klassen, de volgorde van elementen en de hele lay-out. Onveranderd blijven enkel de variabelenamen — product.title, theme.primaryColour, phrases.viewProduct — die de backend automatisch koppelt aan de juiste data. Je hoeft ze niet uit het hoofd te leren; het systeemsjabloon dat als startpunt dient gebruikt al alle beschikbare variabelen. Je kopieert, bewerkt, controleert het resultaat.
Wat verandert er in de dagelijkse praktijk
Stel je rolt de widget uit op een cosmeticashop. De productpagina heeft een minimalistische lay-out — veel witruimte, de prijs als één samenhangend getal, een zwarte „In winkelmandje"-knop. De standaard Upsellic-widget heeft productkaarten met een gradiënt, zachte schaduwen en een paarse CTA — ziet er prettig uit, maar past niet bij de rest van de pagina.
In plaats van ons een bericht met een hulpverzoek te sturen, kloon je een systeemthema, open je de sjabloon-editor, kies je de slot PRODUCT_CARD, verwijder je het gradiënt, vermindert je de schaduw, verander je de knop in een zwarte rechthoek. Aan de rechterkant van het paneel draait de hele tijd een live preview met voorbeelddata — je ziet meteen hoe de kaart eruitziet zowel zelfstandig als met de door de assistent toegevoegde aanbevelingsmotivatie onder de titel.
Elke toetsaanslag wordt opgeslagen in een concept. Het concept verlaat je paneel niet — de productiewidget blijft de hele tijd tonen wat je laatst hebt gepubliceerd. Je kunt een uur aan een slot werken, een onafgewerkte schets een week laten liggen, de volgende ochtend terugkomen en doorgaan. Klanten zien niets totdat je op Publiceren klikt.
Dat is een bewuste designkeuze, geen technisch detail. We hebben gezien hoe gebruikers bang zijn iets in de productiewidget aan te raken, omdat elke wijziging onmiddellijk live gaat. Hier is het andersom — experimenteren kost niets, en de laatste stap (publicatie) vraagt één bewuste klik.
Vergelijken met bron — wat is er werkelijk veranderd
Na een uur bewerken vergeet je gemakkelijk wat er precies is gewijzigd. Bij elke slot bevindt zich een knop Met bron vergelijken, die de editor in side-by-side diff-modus zet: links het originele systeemsjabloon, rechts jouw versie. Elk verschil wordt regel voor regel gemarkeerd.
We hebben geen uitgebreide wijzigingsgeschiedenis in commit log-stijl — dit is geen Git. Deze weergave volstaat in de praktijk: je ziet wat er is toegevoegd, wat er is verwijderd, en je kunt de wijzigingen ofwel behouden ofwel terugdraaien via Resetten (zet de slot terug naar de systeemversie) of Concept verwerpen (gaat terug naar wat momenteel is gepubliceerd).
Export en import — thema's zijn draagbaar
Elk eigen thema kun je exporteren naar één enkel JSON-bestand. Kleuren, alle 15 slots, inclusief concepten en gepubliceerde versies. Het bestand krijgt een naam met de exportdatum, bijv. MijnThema.2026-05-01T12-34-56.theme.json.
Waarvoor? Drie concrete toepassingen.
Ten eerste: een bureau ontwerpt het thema op een testaccount, exporteert het, de klant importeert het op zijn productieaccount. Zonder handmatig sjabloon na sjabloon te kopiëren.
Ten tweede: je wilt wijzigingen ongedaan maken. Heb je een export van twee weken geleden? Importeer hem terug — en hier een belangrijk detail — import overschrijft nooit een bestaand thema. Het maakt een nieuw thema met de toevoeging (import 2026-05-01 14:22:08) in de naam. Het oude thema, dat momenteel live is, blijft onaangetast. Om wijzigingen ongedaan te maken, wijs je in de widget-instellingen simpelweg het geïmporteerde thema aan. Blijkt de nieuwere versie achteraf toch beter — keer je met één klik terug naar het vorige thema.
Ten derde: volwaardige A/B-tests. Je importeert variant B als apart thema, koppelt het aan een tweede widget op dezelfde pagina (bijv. voor 50 % van het verkeer), verzamelt een week lang data, beslist welk thema beter werkt.
De editor van binnen
De sjabloon-editor is Monaco — dezelfde engine waarop VS Code is gebouwd. Syntax highlighting voor HTML en Nunjucks in slot-sjablonen, CSS-highlighting in de slot STYLES. Multi-cursor, zoeken en vervangen, haakjes-matching, regelnummers en de volledige set sneltoetsen.
Aan de rechterkant bevindt zich de live preview, die zich automatisch ververst bij elke wijziging van het concept. Hij gebruikt voorbeelddata — product, content, bestelling en gespreksballonnen die de uitstraling van een echt gesprek met de assistent nabootsen. Je klikt op een productkaart in de preview — het modal dat je zojuist hebt bewerkt opent. Je klikt op de X in de rechterbovenhoek — het modal sluit.
In de werkbalk bevindt zich tevens een knop Widget-cache wissen. Gebruik hem wanneer je in productie een rebuild wilt forceren zonder enig sjabloon te wijzigen.
Systeemthema's zijn alleen-lezen — en waarom dat de juiste keuze is
De drie systeemthema's — default, minimal, editorial — zijn gemarkeerd als „alleen-lezen". Wil je iets wijzigen, dan moet je eerst het thema klonen. Dat is bewust gedaan.
De reden: wanneer wij updates uitleveren (een nieuw element toevoegen, een visuele regressie in een browser oplossen), landen de wijzigingen uitsluitend in de systeemthema's. Jouw gekloonde thema blijft precies in de staat waarin je het hebt achtergelaten. Er is geen situatie waarin je 's ochtends wakker wordt, de shop opent en de widget er ineens anders uitziet.
Indien nodig kun je nakijken wat er in het systeemthema is veranderd — de knop „Met bron vergelijken" toont altijd de actuele systeemversie naast die van jou. Als je vindt dat de nieuwe systeemversie een nuttig element bevat dat je mist, kopieer je het handmatig naar je eigen thema. Zonder het risico dat onze wijzigingen jouw aanpassingen overschrijven.
Voor wie is deze oplossing
Als je shop een uitgesproken visuele identiteit heeft en je tot nu toe genoegen moest nemen met vier kleuren uit de configurator — dan is dit een optie voor jou. Als je een shop draait op een standaardthema en wilt dat de AI-assistent zich naast de producten presenteert alsof hij deel uitmaakt van de lay-out, en niet als een van buitenaf vastgeplakte widget — dan is dit ook een optie voor jou.
Als je bezoekers de widget niet onderscheiden van de rest van de pagina, gefeliciteerd — je conversie op AI-aanbevelingen is zojuist gestegen. Wat de assistent hun ook toont, hij moet eerst worden opgemerkt en als geloofwaardige gesprekspartner worden geaccepteerd.
Hoe te beginnen
De editor is op elk account beschikbaar onder Thema's → kies een thema → Code-editor. De eerste stap is het klonen van een van de systeemthema's — je krijgt onmiddellijk een naam en alle 15 slots vooraf gevuld met systeeminhoud. Daarna rest enkel nog bewerken, preview, publiceren.
De volledige stap-voor-stap handleiding — met alle knoppen, screenshots en het export- en importproces — hebben we beschreven in een aparte gids: