Widget-sjablonen aanpassen
Volledige controle over uw chat-widget — bewerk elk van de 15 visuele slots (productkaarten, berichtballonnen, modale vensters, header, CSS) in de ingebouwde sjabloon-editor.
Wat zijn slot-sjablonen
Elk thema in Upsellic bestaat uit 15 onafhankelijke slot-sjablonen. Elke slot definieert één visueel fragment van de widget — bijvoorbeeld de productkaart die wordt getoond als de AI een product aanbeveelt, of de beoordelingsmodal die verschijnt als een klant de chat sluit. Slots zijn geschreven in Nunjucks (een sjabloontaal vergelijkbaar met Twig, Handlebars of Jinja), en één enkele STYLES-slot bevat alle CSS die de lay-out aan elkaar knoopt.
Dit betekent dat elk onderdeel van de widget dat de bezoeker ziet, bewerkbaar is — per merchant, per thema. U kunt de chat tot in detail afstemmen op het visuele ontwerp van uw winkel — kleuren, typografie, witruimte, knopvormen, kaartlay-outs — zonder werk aan onze kant en zonder de widget van een andere merchant te raken.
De 15 slots
| Slot | Wat het rendert |
|---|---|
PRODUCT_CARD | Productaanbeveling-kaart in het assistentbericht |
CONTENT_CARD | Artikel- / inhoudaanbeveling-kaart |
ORDER_CARD | Bestelling-tracking-kaart met status en verzendlink |
WELCOME_MESSAGE | Welkomstbericht bij eerste opening van de chat |
GOODBYE_MESSAGE | Afscheidsbericht aan het eind van een gesprek |
HEADER | Bovenste balk van de widget (titel, ondertitel, knoppen) |
FOOTER | Branding-balk onder het invoerveld |
QUANTITY_TIERS | Aantalsprijzen-blok voor het product |
MESSAGE_USER | Berichtballon van de klant |
MESSAGE_ASSISTANT | Berichtballon van de assistent |
PRODUCT_MODAL | Volledig productdetail-popup geopend bij klik op een kaart |
RATING_MODAL | Gespreksbeoordeling-popup met sentimentknoppen |
HANDOFF_UI | Overdracht naar agent-schermen (wachten / verbonden / fallback-kanalen) |
STYLES | Volledige CSS-bundel van het thema |
Slots verwijzen naar gedeelde variabelen — theme.primaryColour, phrases.viewProduct, product.salePrice — dus zelfs als u alle markup herschrijft, blijft de widget automatisch productdata, kleurinstellingen en vertalingen koppelen.
Systeemthema's vs eigen thema's
Upsellic levert systeemthema's (default, minimal, editorial) — die zijn als ontwerp alleen-lezen, zodat onze updates nooit per ongeluk iemands aanpassingen overschrijven. Om een widget aan te passen, kloont u eerst een van de systeemthema's naar een privé eigen thema dat alleen aan uw account toebehoort. Vanaf dat moment is het thema van u en kunt u het vrij bewerken.
Een systeemthema klonen
Voordat u een sjabloon kunt bewerken, hebt u een eigen thema nodig — een kopie van een systeemthema die alleen in uw account bestaat.
Open de themalijst
Klik in het zijmenu van het dashboard op Thema's. U ziet alle beschikbare thema's — systeemthema's worden apart gemarkeerd van eigen thema's die u eerder hebt gemaakt.
Klik op "Klonen" bij het systeemthema dat u als startpunt wilt gebruiken
Er verschijnt een modaal venster met de vraag naar de naam van uw nieuwe thema. Kies een naam die het merk of doel weerspiegelt (bijv. Kerst-editie, NL-shop, Mobile-first).
Na bevestiging verschijnt het nieuwe eigen thema in de lijst — alle 15 slots zijn vooraf gevuld vanuit het gekloonde systeemthema. Ook de kleuren worden gekopieerd, maar alles is nu bewerkbaar.
Het gekloonde systeemthema blijft ongewijzigd en is in de editor beschikbaar als referentie via "Vergelijken met bron" — handig als u precies wilt zien wat u hebt gewijzigd.
Een slot bewerken
Open de sjabloon-editor
Klik op de kaart van een eigen thema op Code-editor. De editor toont links een lijst van alle 15 slots, in het hoofdgebied de Monaco-editor, en rechts een live preview-paneel dat de widget rendert vanuit het huidige concept.
Kies een slot om te bewerken
Klik op een slotnaam in de zijbalk — de editor laadt de inhoud van die slot en de preview ververst. De actieve slot wordt gemarkeerd, en slots met onopgeslagen concepten (zo dadelijk meer) zijn aangegeven, zodat u ziet wat is gewijzigd.
Voer uw wijzigingen door
De editor is volwaardige Monaco (dezelfde engine als VS Code) met syntax highlighting voor HTML / Nunjucks (in slot-sjablonen) en CSS (in de STYLES-slot). Haakjeskoppeling, regelnummers, multi-cursor, zoeken & vervangen, sneltoetsen — alle functies die u nodig hebt om code te bewerken.
Elke toetsaanslag wordt automatisch opgeslagen als een concept. Concepten blijven privé in de editor en hebben geen enkel effect op de productiewidget — uw klanten blijven de eerder gepubliceerde versie zien tot u op Publiceren klikt.
Gebruik de live preview
Het preview-paneel rechts rendert de widget telkens opnieuw als het concept verandert. Het gebruikt voorbeeldproduct- / inhoud- / besteldata, dus u ziet hoe kaarten, ballonnen, modals en prijzen eruitzien zonder echte chats te sturen. Klik op een productkaart in de preview om de modal te controleren die u zojuist hebt bewerkt.
Wijzigingen publiceren
Concepten laten u veilig experimenteren. Om uw wijzigingen te publiceren, ziet de workflow er zo uit:
Vergelijken met bron
Klik op Met bron vergelijken bij de bewerkte slot. De editor schakelt naar een naast-elkaar diff-modus (de ingebouwde diff-editor van Monaco) — links de originele systeemsjabloon, rechts uw concept. Elk verschil wordt regel voor regel gemarkeerd, zodat u precies ziet wat er verandert vóór de live-gang.
Publiceer één slot — of alle tegelijk
Klik op Publiceren om het concept van de actieve slot naar productie te duwen. Of klik op Alles publiceren in de werkbalk om alle slots met onopgeslagen wijzigingen te publiceren — dit wist tegelijk de cache van het thema, wat sneller is bij het bewerken van meerdere slots.
Publiceren stuurt intern een theme.updated-event. De widget-bundel voor elke actieve widget die dit thema gebruikt, wordt herbouwd en de CDN-cache wordt geleegd. De volgende paginalading aan klantzijde levert de verse versie.
Concept verwerpen of resetten als er iets misgaat
- Concept verwerpen — herstelt het concept van de slot naar wat momenteel is gepubliceerd, waarbij niet-gepubliceerde wijzigingen worden teruggedraaid.
- Resetten — herlaadt de slot vanuit de oorspronkelijke systeemsjabloon (de systeemversie waarvan dit thema is gekloond). Handig als u een slot vanaf nul opnieuw wilt bewerken.
Widget-cache legen
Meestal hoeft u de cache niet handmatig te legen — het publiceren van een slot doet dat al automatisch. Voor de zeldzame gevallen waarin u een herbouw wilt forceren, beschikt de werkbalk van de editor over een knop Widget-cache wissen.
De knop leegt zowel de in-memory bundel-cache op onze API als de CDN-cache voor elke actieve widget die dit thema gebruikt. Het volgende verzoek herbouwt de bundel uit de huidige gepubliceerde sjablonen.
Thema's exporteren en importeren
Thema's zijn draagbaar — u kunt een volledig eigen thema exporteren (kleuren + alle 15 slots, concepten en gepubliceerd, in één JSON-bestand) en het later weer importeren, op hetzelfde account of een ander.
Exporteren
Klik op de kaart van een eigen thema op Exporteren. Er wordt een JSON-bestand naar uw computer gedownload met een naam als MijnThema.2026-05-01T12-34-56.theme.json. Bewaar het op een veilige plek — het is een volledige snapshot van het thema.
Systeemthema's kunnen niet rechtstreeks worden geëxporteerd. Kloon eerst het systeemthema en exporteer dan het gekloonde thema.
Importeren
Klik op Thema importeren in de werkbalk bovenaan de themalijst en selecteer een JSON-bestand. Het geïmporteerde thema landt altijd als een nieuw eigen thema — de naam is de oorspronkelijke naam met daarachter de import-tijdstempel, bijv. MijnThema (import 2026-05-01 14:22:08).
Importeren overschrijft nooit een bestaand thema. Dit betekent dat u kunt:
- Een aanpassing terugdraaien door een oudere snapshot te importeren — de vorige versie komt binnen als een geheel nieuw thema dat u in de widget-instellingen selecteert.
- Experimenteren — een snapshot importeren en aanpassen zonder het origineel te raken, A/B-testen door het widget-thema te wisselen.
Om een geïmporteerd thema live te zetten voor een widget, ga naar Widgets, bewerk de widget die u wilt bijwerken en kies het geïmporteerde thema uit de themalijst. De omschakeling is direct — de volgende paginalading aan klantzijde levert het nieuwe thema.