Skip to content
Open Nexym

UI elements

Popups, banners, embed content en productwidgets op je eigen website, op de pagina's en momenten die jij kiest. Aanmeldingen worden direct een contact in de hub.

Updated 1 Oct 2026·Reading time 12 minbeginnermodule

Met UI elements zet je iets op of in je eigen webwinkel. Elk element is een van vier soorten:

Soort Wat het doet Bijvoorbeeld
Popup Legt zich over de pagina. Voor aanbiedingen en aanmelden. Een nieuwsbriefvraag, een rad van fortuin, een leeftijdscheck
Banner Loopt mee met de pagina en zit nooit in de weg. Een actiebalk, een afteltimer, een rij redenen om bij jou te kopen
Embed content Wordt deel van de pagina, op een plek die jij kiest. Een blok na de productbeschrijving, “Niet gevonden?” onder je zoekresultaten
Productwidget Producten uit je hub, automatisch passend bij de bezoeker. Een rij “Past hier goed bij” op een productpagina, social proof

Elke soort heeft een paar vormen (een popup kan bijvoorbeeld een modal, slide-in of zijpaneel zijn) en elk element heeft een doel: e-mailadressen verzamelen, informeren, doorklikken, één vraag stellen of producten tonen. Alle vormen staan op Soorten en vormen.

Het is voor elke webwinkel die adressen wil verzamelen, een actie wil laten zien, producten wil aanraden of een korte vraag wil stellen, zonder een losse tool met een eigen lijst en eigen script.

  • Adressen die meteen bruikbaar zijn. Een aanmelding wordt een contact en een abonnee in de hub. Je vindt hem bij je andere klanten en kunt hem in een segment zetten.
  • Eén script voor alles. UI elements draait op hetzelfde embed-script als je andere Nexym-modules. Je plakt niets extra.
  • Vier soorten, twintig vormen, van een rustige balk tot een rij producten die eruitziet als de rest van je shop. Zie Soorten en vormen.
  • Productwidgets uit echte gegevens. Wat je shop zelf aan elkaar koppelt, wat bezoekers samen kochten en wat echt verkocht wordt. Is er niets te zeggen, dan verschijnt er niets. Zie Productwidgets.
  • Precies waar en wanneer je wilt. Per element kies je de pagina’s, het apparaat, het moment (direct, na een paar seconden, bij scrollen, bij verlaten) en hoe vaak iemand het ziet.
  • Voor wie je wilt. Toon een element alleen aan nieuwe of terugkerende bezoekers, aan een segment, of op klantdata zoals prijsbewust. Dat werkt ook voor anonieme bezoekers.
  • Echte cijfers. Per element zie je weergaven, aanmeldingen of klikken, toevoegingen aan de winkelwagen en aankopen, en je kunt twee versies tegen elkaar testen.
  • Samen met je andere modules. Een knop kan de chat of de keuzehulp openen. Een banner kan tussen de resultaten van Site search staan.

Voorbeeld. Voorbeeldshop zet een slide-in rechtsonder: “Elke maand iets nieuws? Laat je e-mailadres achter.” Hij verschijnt na 50% scrollen, nooit op de afrekenpagina, en eenmaal per bezoeker. Elke aanmelding staat daarna als contact in de hub, met de toestemmingszin erbij zoals die op dat moment op het scherm stond. Ernaast draait een balk bovenaan: “Gratis verzending vanaf € 25”, met een einde zodat hij vanzelf stopt. En op elke productpagina staat na de beschrijving een rij Past hier goed bij, in de stijl van de producttegels van de shop zelf.

  1. Je maakt een element met Nieuw element: in zes stappen kies je de soort en de vorm, het doel, de inhoud, de vormgeving en wie het wanneer ziet. Rechts zie je een live voorbeeld.
  2. Je klikt op Live zetten. Het element doet pas iets als het live staat en binnen zijn start en einde valt.
  3. Een bezoeker opent een pagina van je winkel. Het embed-script vraagt Nexym welke elementen er live staan. Die lijst wordt hooguit een minuut bewaard, dus een wijziging staat binnen ongeveer een minuut op je site.
  4. Heeft een element een doelgroep (bijvoorbeeld een segment), dan beslist Nexym op de server of deze bezoeker erbij hoort. Hoort hij er niet bij, dan krijgt de pagina dat element niet eens te zien.
  5. Per element controleert het script in de browser of het hier mag: het juiste apparaat, niet op een verborgen pad, de juiste pagina, de bezoeker heeft het niet net weggeklikt en de rustperiode is voorbij.
  6. Dan wacht het script op het moment dat je koos (de trigger), bijvoorbeeld een paar seconden of de helft van de pagina. Een element met een plek in de pagina (een inline blok, een productwidget) verschijnt alleen als die plek op deze pagina bestaat.
  7. Mogen er meerdere onderbrekende popups tegelijk, dan komt er één: die met de laagste prioriteit. Staat de chat, een zoekvenster of de keuzehulp open, dan wacht een onderbrekende popup tot dat weer dicht is. Op een net verschenen cookiebanner wacht hij even.
  8. Het element verschijnt en telt een weergave. Meldt de bezoeker zich aan, dan maakt Nexym een contact en een abonnee in de hub (of vult een bestaand contact aan). Klikt hij op de knop of op een product, dan telt dat als klik.
  9. Koopt de bezoeker later iets, dan rekent Nexym die aankoop toe aan het laatste element dat hij zag of aanklikte, tot dertig dagen terug. Zie Meten en privacy.
jij maakt een element → embed-script op je site → regels en trigger in de browser
→ element verschijnt → aanmelding = contact in de hub · klik en aankoop = cijfers

UI elements deelt en gebruikt de gedeelde klantcontext.

  • Vertelt: wat dit bezoek met elk element deed (Pop-ups dit bezoek: gezien, gesloten, geklikt, aangemeld, beantwoord, en een gewonnen prijs — het label, nooit de code). Bij een bekende klant ook zijn Aanmeldingen via pop-ups: hoeveel, het laatste element en of hij nog is aangemeld. Het adres zelf staat daar nooit in. Een klik op een product in een productwidget telt als aanbeveling, net als een klik op een zoekresultaat.
  • Gebruikt: de doelgroep onder Voor wie: nieuwe of terugkerende bezoekers, klantdata zoals prijsbewust, hoge koopintentie of een verlaten winkelwagen, en segmenten. Nexym beslist op de server of de bezoeker erbij hoort, ook als hij anoniem is. De pagina hoort nooit in welk segment iemand zit. De inhoud van een element verandert nooit door wat we weten; alleen wie het ziet. Productwidgets gebruiken je catalogus, de gerelateerde producten van je shop en je orders.
  • Overdrachten: een banner, USP-balk of Shop de look tussen de resultaten van Site search, een blok onder die resultaten, een knop die de chat of de keuzehulp opent, en de nieuwsbriefkaart van de chat die hetzelfde aanmeldlog gebruikt. Een nieuwe aanmelding kan direct naar de e-mailtool van een segment.
  • De module UI elements in je abonnement.
  • Het embed-script op elke pagina van je winkel. Zie Het embed-script.
  • Je websites in de lijst onder Beheer → Setup. Een element verschijnt alleen op een site uit die lijst.
  • Voor productwidgets: producten in je hub. Voor Anderen kochten ook en Bestsellers in deze categorie ook je orders.
  • Voor een zoekbanner, USP’s in zoekresultaten, Shop de look of een blok onder de zoekresultaten: de module Site search moet aan staan. Die beheer je bij voorkeur op Site search → Banners; daar werken ze ook zonder UI elements. Hier staan ze met het label Zoeken, en als Inactief — Site search staat uit als Site search uit staat. Hun vormen biedt de wizard alleen aan als Site search aan staat.
  • Voor een element met de winkelwagen erin (bijvoorbeeld “je winkelwagen wacht op je”): de winkelwagen-events van je site onder Beheer → Bezoekers & toestemming → Wat we meten.
  • Wil je aanmeldingen ook naar je mailprogramma sturen, of een element alleen aan een segment tonen, dan heb je de module Segmenten nodig.
  • Voor een doelgroep op klantdata (ook Nieuwe bezoekers, Terugkerende bezoekers en Bekende klanten): Popups richten op klantdata aan onder Beheer → Project → Klantdata (staat standaard aan). Zie Klantcontext.
  1. Zet UI elements aan onder Modules en kies eerst Test. Dan ziet alleen jij de elementen, in debugmodus.
  2. Ga naar Toolbox → UI elements en klik op Nieuw element. Kies bij Soort een soort en een vorm, of klik onder Of begin met een sjabloon op bijvoorbeeld Welkomstkorting. Loop daarna Doel, Inhoud, Vormgeving en Wie & wanneer door.
  3. Bij Controleren zie je elke keuze in één regel, met Wijzig om terug te gaan. Klik op Live zetten, of op Opslaan als concept als het nog niet op je site mag. Daarna opent Testen op mijn site je winkel met dit ene element.

Wat elke stap vraagt, staat op Instellingen.

Het tabblad Overzicht toont vijf tegels over de periode die je kiest (7, 30 of 90 dagen): Weergaven, Aanmeldingen (met het aantal nieuwe contacten in de hub), Klikken (naar product of pagina), Live (hoeveel van je elementen live staan) en Toegeschreven door Impact: de omzet die Impact aan popups toeschrijft, hetzelfde getal als de rij Popups onder Per module op het Overzicht. Een klik op die tegel opent die rij. Daaronder wat aandacht vraagt (een element dat aan staat maar door niemand gezien wordt) en je beste elementen (meer).

Op het tabblad Elementen filter je op website (als je er meer hebt), op status (Alle, Live, Concept, Gepauzeerd) en met de chips op soort: Alles, Popups, Banners, Embed content en Productwidgets, elk met het aantal erbij.

Elk element staat als kaart met zijn soort, vorm, status en cijfers. Klik je op een kaart, dan opent het element op Controleren. Onder Meer acties vind je Bewerken, Dupliceren, Pauzeren of Live zetten, A/B-variant en Verwijderen (zie Instellingen). De laatste kaart is Nieuw element (In 6 stappen live); staat er een soortfilter aan, dan begint het nieuwe element met die soort.

Het overzicht van UI elements met weergaven, aanmeldingen en klikken, en elementen die aandacht nodig hebben.
UI elements → Overzicht: wat je elementen doen, en welke niemand ziet.
De lijst met elementen per website, met soort, status, weergaven en resultaat.
Elementen: alle popups, banners en widgets, te filteren per website en soort.

Een module heeft drie standen: Uit, Test en Aan. Zie Begrippen.

In Test zien gewone bezoekers niets. Alleen jij ziet de elementen, in debugmodus: vanaf een IP-adres onder Beheer → Debugger, of met een debuglink. Een aanmelding die je dan doet, wordt wel gelogd, maar niet als contact of abonnee opgeslagen en nergens heen gestuurd. In de lijst Aanmeldingen staat hij met het label Test · niet in de hub.

Ook als de module al live staat, kun je veilig testen:

  • Testen op mijn site opent je winkel met dat ene element, ook als het een concept is, en alleen voor jou zichtbaar. Linksonder staat dan een klein balkje Preview. In preview telt niets mee. Een nieuw element sla je eerst op; daarna werkt de knop.
  • Vanaf een adres onder Beheer → Debugger zie je ook concepten en gepauzeerde elementen.

Let op het verschil bij een doelgroep: Testen op mijn site slaat Voor wie over, zodat jij het element altijd ziet. Via de debugger geldt de doelgroep wel. Zo test je of iemand buiten het segment het echt niet krijgt.

Klopt alles, zet de module dan op Aan. Elementen met de status Live zijn vanaf dat moment voor iedereen zichtbaar.

  • Het embed-script staat op alle pagina’s van je winkel.
  • Je websites staan onder Beheer → Setup.
  • Je afrekenpagina staat bij UI-elementen blijft weg van onder Setup → Waar het draait.
  • Je hebt elk element bekeken met Testen op mijn site, op desktop en mobiel.
  • Een productwidget in Stijl van de shop heb je op je eigen site bekeken: het voorbeeld in het dashboard toont altijd de Nexym stijl.
  • Een element met een formulier heeft een toestemmingsregel die past bij wat je gaat mailen.
  • Een actie heeft een einde, en een afteltimer een eindtijd.
  • Je hebt een testaanmelding gedaan en gezien dat hij onder Aanmeldingen staat.
  • Heeft een element een doelgroep, dan heb je via de debugger gezien dat het alleen voor die bezoekers komt.
  • De module staat op Aan.

Wat de bezoeker ziet, hangt af van de soort. In het kort:

  • Onderbrekende popups (modal, rad van fortuin, bevestiging, zijpaneel, volledig scherm) liggen over de pagina. De pagina erachter wordt wat donkerder. Met Maximaal één popup per pagina aan (de standaard) komt er hooguit één per paginaweergave.
  • Slide-ins, teasers en microenquêtes staan in een hoek of aan de zijkant. De bezoeker kan gewoon verder.
  • Banners staan boven- of onderaan de pagina, of tussen je zoekresultaten. Een balk bovenaan duwt de pagina een stukje omlaag, zodat hij je menu niet bedekt.
  • Embed content staat in de pagina zelf, op de plek die je koos. Bestaat die plek op een pagina niet, dan verschijnt het daar niet.
  • Productwidgets zijn een rij producten in de pagina (vegen of bladeren met pijlen), één product in een hoek, of een kaartje met een recente aankoop.

Verder geldt:

  • Sluiten. Standaard staat er altijd een kruisje. De bezoeker kan ook op Esc drukken of naast de popup klikken (niet bij een bevestiging zoals een leeftijdscheck). Na sluiten onthoudt zijn browser dat, zodat hij het niet meteen weer krijgt.
  • Mobiel. Een scherm tot 640 pixels breed telt als mobiel. Je kunt per element andere teksten voor mobiel schrijven, of het alleen op desktop of mobiel tonen. Met Kleiner op mobiel wordt een modal op een telefoon een blad onderaan het scherm.
  • Taal. Vaste teksten zoals “Sluiten” en “Bedankt!” volgen de taal van de pagina (Nederlands, Engels of Duits). Jouw eigen teksten staan er zoals je ze schreef.
  • Rustig. Vraagt de bezoeker in zijn apparaat om minder beweging, dan zijn er geen animaties.
  • Na aanmelden. De bezoeker ziet je bedanktekst. Een element dat om een adres vraagt, komt daarna niet meer voor hem, tot hij zich uitschrijft.
  • Zonder JavaScript verschijnt er niets. Je winkel werkt dan gewoon.

Hoe UI elements omgaat met cookies en toestemming, lees je onder Meten en privacy.