Canvas Builder – Personyze Wiki

De Canvas Builder is het vrije ontwerpoppervlak van Personyze. In plaats van te beginnen met een
kant-en-klare template en de tekst ervan te bewerken, stel je een pop-up, banner of inline blok samen uit elementen
— een kop, een foto, een aftelklok, een formulier, een aanbevelingsstrook — en schik je ze zoals je wilt.

Een pop-up die in de Personyze Canvas Builder wordt samengesteld — Het canvas in het midden, de blokkenstructuur links en de eigen instellingen van het geselecteerde element rechts — Content en Stijl, de link die het opent en of de kliks meetellen. Klik om te vergroten.

Voeg hem toe zoals elke andere actie: kies in de stap Content van een campagne voor Canvas Builder.
Hij heeft drie stappen: Ontwerp je banner of pop-up, Waar de data naartoe gaat (alleen als je
ontwerp een formulier bevat) en Weergaveregels en plaatsing instellen.

In die laatste stap kies je waar hij verschijnt en wanneer hij opent — inclusief exit intent op zowel desktop als telefoon. De triggers zijn voor elke pop-upactie hetzelfde en staan beschreven in Triggers — wanneer de pop-up opent.

Canvas Builder of Pop-up-, banner- en HTML-builder?

Beide acties maken hetzelfde soort content en delen alles na de ontwerpstap — plaatsing, weergave-
regels, containers en rapportage zijn identiek. Ze verschillen alleen in hoe je ontwerpt.

	Canvas Builder	Pop-up-, banner- en HTML-builder
Je bouwt door	Elementen toe te voegen en te schikken	Een template te kiezen en in te vullen
Het beste als	Je een specifieke lay-out wilt — een gesplitste foto, aftelklok, rad, aanbevelingen, regels per apparaat	Je snel een afgewerkte look wilt, of ruwe HTML plakt en onderhoudt
Templatebibliotheek	15 startontwerpen	Honderden klassieke templates
Te bewerken in het oude panel	Nee	Ja

Canvas Builder-acties kunnen alleen in het nieuwe panel worden bewerkt. Werkt je team nog in de
oude interface, dan opent een hier gebouwde actie daar niet.

Begin met een ontwerp, of met niets

Een nieuwe actie opent op Beginnen met een ontwerp. Er zijn er 15, waaronder Showcase (de hele
gereedschapskist in één kaart), Welkom bij het eerste bezoek, Kortingscode, Aankondiging van een sale,
Gepersonaliseerde begroeting, Aankondigingsbalk, Exit-intent-redding, Minimaliseerbare teaser,
Aanbevolen voor jou, Beeld naast de pitch, Volledig scherm, Social proof,
Nieuwste artikelen en Leeg. Elk ervan is na het invoegen een normaal ontwerp — er zit niets op slot.

De elementenbibliotheek

Elementen zijn gegroepeerd als Tekst · Media · Formulier · Lay-out · Dynamisch in de balk Element toevoegen. Klik
om toe te voegen, of sleep naar het canvas — zet het neer op de rechterrand van een element om de twee naast
elkaar te plaatsen.

Tekst

Chip / Pil — een kleine badgeregel, bijv. “★ Speciale aanbieding”.
Kop en subkop — de hoofdkop plus een optionele ondersteunende regel.
Alinea — een blok lopende tekst.
Checklist — een lijst voordelen met een titel en gekleurde opsommingstekens.
Wisselende tekst — toont berichten één voor één, met crossfade of omhoogschuiven.
FAQ / Accordeon — een lijst met vragen en antwoorden die ter plekke uitklapt. Gebouwd op het eigen uitklapelement van de browser, dus hij opent ook met JavaScript uitgeschakeld.
Genummerde stappen — een reeks “zo werkt het” met automatisch genummerde cirkels, als rij of als kolom.
Testimonials — geciteerde klantgetuigenissen.

Media

Afbeelding — een afbeelding met maximale hoogte, afronding en uitlijning.
Icoon — één icoon, met grootte en kleur.
Video — sluit een kijklink van YouTube of Vimeo in.
Afbeeldingsslider — een veegbare carrousel; een tweede dia voegt pijlen toe.
Logorij — een rij logo’s van klanten of partners.

Formulier

CTA-knop — de call-to-action.
Formulier — velden die in kolommen van het bezoekersprofiel worden opgeslagen, onder of naast elkaar, met een
bedanktbericht dat de velden vervangt bij succes.

Lay-out

Scheidingslijn — een horizontale lijn.
Sluitknop (×) — een sluitknop die je overal kunt plaatsen, los van de eigen × in de hoek van de pop-up.
Media + tekst — aan de ene kant een afbeelding, aan de andere kant tekst, met een instelbare verdeling.
Menu — een navigatielijst, als rij of kolom, eventueel achter een ☰-icoon.
Vergelijkingstabel — een tabel met twee kolommen, “wij tegenover zij”; cellen die je met ja of nee vult, worden weergegeven als vinkje of kruisje.
Minimaliseertab — klapt de hele pop-up in tot een tab met een label (zie hieronder).

Dynamisch

Aftelklok — een vaste datum, of per bezoeker / per sessie, in de stijl Blokken, Pillen of Minimaal.
Coupon — een kortingscode die met één klik te kopiëren is.
Productaanbevelingen / Contentaanbevelingen — live keuzes per bezoeker, als slider of raster.
Social proof — echte tellers of regels over “recente kopers”, nooit verzonnen, verborgen onder een drempel die je instelt.
Voortgangsbalk — voortgang naar een doel uit een profielveld, zoals het winkelwagentotaal of punten.
Rad van fortuin — een gewogen draai-en-win met prijzen en codes per segment.
HTML / Embed — willekeurige HTML, geleverd zoals geschreven.
Sterbeoordeling — een rij sterren die breuken eerlijk toont (4,3 ziet eruit als 4,3, niet als 4), eventueel gelezen uit een catalogus-kolom.
Voorraadurgentie — een badge “nog maar 3 over”, gestuurd door een catalogus-kolom of profielveld, met een drempel zodat hij alleen verschijnt als de voorraad echt laag is.
Personyze Placeholder — een lege plek die door een andere actie wordt gevuld, zodat een ontwerp uit meerdere acties kan worden opgebouwd in plaats van één enorm document.
Aangepaste JavaScript — code die draait als de pop-up wordt getoond; geeft niets zichtbaars weer.

Datagestuurde elementen tonen een voorbeeld met voorbeelddata — je catalogus, profielvelden en
statistieken vullen ze op de echte site. Een Social proof-element zonder geschiedenis erachter wordt voor
die bezoeker gewoon niet weergegeven.

De container vormgeven

Het paneel Container bepaalt het kader waarin alles staat: breedte (passend bij de plaatsing,
volledige breedte of een vaste maximale breedte), achtergrondkleur of -afbeelding, hoekafronding, opvulling, en wat er gebeurt
als hij hoger is dan het scherm — van het scherm aflopen, of binnen de pop-up scrollen.

Splitsen met een fotopaneel zet een foto aan één kant, met een instelbare paneelbreedte en een
focuspunt in beeld houden zodat gezichten niet worden bijgesneden. Op telefoons wordt het automatisch gestapeld.

Lettertypen komen uit een samengestelde lijst die niets downloadt — systeem, Helvetica/Arial, humanistisch, geometrisch, Georgia, slab
serif of monospace, plus wat de pagina ook gebruikt. Dat laatste is juist voor inline blokken en meestal fout
voor een zwevende pop-up, die er bewust uit moet zien tegen een onbekende pagina.

Controle per element

Een element opmaken in de Personyze Canvas Builder — Het tabblad Stijl voor een kop: voorinstellingen bovenaan, daarna elke eigenschap afzonderlijk — en een knop **Variaties** naast elke eigenschap, zodat één waarde per doelgroep kan verschillen zonder het ontwerp te dupliceren. Klik om te vergroten.

Als je een element selecteert, opent rechts een eigen paneel, met twee tabbladen:

Content — wat het zegt en doet. Een aftelklok telt af naar een vaste datum, een cookie per bezoeker of elk bezoek, en kiest wat er bij nul gebeurt; een knop heeft een label, een link en een instelling voor het meetellen van kliks. Het label van een knop, de link die hij opent of de JavaScript
die hij uitvoert, en of zijn kliks meetellen voor deze actie.
Stijl — eerst voorinstellingen (een kop biedt Vet gecentreerd,
Redactioneel links, Statement), daarna elke eigenschap afzonderlijk: kleuren, groottes, letterdikte,
uitlijning.

Bijna elk veld heeft een knop Variaties. Zo bedient één ontwerp meerdere
doelgroepen — een andere kopkleur of een ander label per segment, op hetzelfde element, in plaats van een
gedupliceerd ontwerp dat je gelijk moet houden.

Onderaan het paneel staan dezelfde drie acties die de structuur ook biedt: Dupliceren,
Verbergen (het blijft in de structuur en wordt bij het weergeven overgeslagen) en Verwijderen.

Apparaten — toon een element op alle apparaten, op desktop en tablet, of alleen op telefoons.
Animatie — een binnenkomst (vervagen, opkomen, zoomen, inschuiven) en een optionele aandachtsanimatie
(pulseren, af en toe schudden). Bezoekers die om minder beweging vragen, zien het stilstaand.
Grootte en positie — breedte, uitlijning, witruimte, en naast het vorige
element plaatsen om een rij te bouwen.
Achtergrond en rand — achtergrond, opvulling, rand, afronding, schaduw en hoverkleuren per element.
Geavanceerd — eigen CSS, plus aparte CSS voor telefoons, voor schermen tot 767px.

De minimaliseertab

Voeg een minimaliseertab toe en de pop-up klapt in tot een tab met een label in plaats van te sluiten — altijd één
klik verwijderd van terugkeren. Je bepaalt het label en het icoon in beide toestanden, waar de tab staat, of hij geminimaliseerd begint,
en of die toestand over pagina’s heen wordt onthouden.

Het tabblad Content van een aftelklokelement in de Personyze Canvas Builder — Content voor een aftelklok: waarnaar hij telt — een vaste datum, een cookie per bezoeker, of opnieuw bij elk bezoek — en wat er bij nul gebeurt: op nul blijven staan, een bericht tonen of verdwijnen. Klik om te vergroten.

Variaties — één ontwerp, meerdere doelgroepen

Bijna elk veld in beide tabbladen heeft een knop ⚡ Variaties, met een badge die telt hoeveel
alternatieven erin zitten. Zo bedient één ontwerp meerdere doelgroepen zonder een tweede ontwerp dat je gelijk moet houden: een
andere kop voor terugkerende bezoekers, een ander knoplabel in één land, een andere afbeelding voor mensen die
al hebben gekocht.

Als je hem opent, krijg je een lijst met cases. Elke case is een doelgroep — gebouwd met dezelfde regel-
bouwer als de targetingstap, dus op alles waarop je kunt targeten, kun je variëren — plus de content die die doelgroep krijgt.
Daaronder staat de standaard: wat iedereen ziet die bij geen enkele case past.

Cases worden op volgorde geprobeerd, en de eerste match wint. Een brede case boven een smalle maakt
de smalle dood — die wordt nooit bereikt, en niets in de lijst zegt dat. Zet je meest specifieke
doelgroepen bovenaan.

Omdat dat makkelijk misgaat als je een stapel editors leest, vat het dialoogvenster de set samen in gewone taal:
“wat elke bezoeker werkelijk krijgt”, in de volgorde waarin de engine ze probeert, afgeleid van de waarden
zelf. Het signaleert ook de vier valkuilen:

Een case zonder voorwaarde wordt weggegooid als je op Klaar drukt — geef hem er een of verwijder hem.
Een case met lege content betekent dat die doelgroep niets ziet. Juist als je het
element voor hen wilde verbergen; anders een vergissing.
Een lege standaard betekent dat iedereen die bij geen enkele case past, niets ziet.
Een voorwaarde in ruwe SQL kan hier niet worden gecontroleerd. Hij draait nog steeds precies zoals geschreven.

Het veld dat je in het paneel ziet, is altijd de standaard, zodat een variërend veld nooit leeg
oogt. De alternatieven zitten achter de knop, en de badge is het enige teken dat ze er zijn — de moeite waard om even naar te kijken
voordat je je afvraagt waarom een wijziging iemand niet heeft bereikt.

Versies en bewerken met AI

De versiebalk bouwt ontwerpen per doelgroep in één actie: een Standaard die iedereen ziet,
plus benoemde versies die eerst-match-wint worden geëvalueerd tegen je volledige doelgroepvocabulaire — bezoekerskenmerken, geografie,
gedrag, CRM-velden, de huidige pagina.

Deze pop-up met AI bewerken herschrijft of restylet het ontwerp op basis van een instructie in gewone taal. Klik eerst op een
element op het canvas om de AI daarop te richten, en daarna op AI-wijzigingen toepassen.

Goed om te weten

Een knop telt alleen kliks als het een echte call-to-action is. Knoppen uit de ontwerpen zijn
aangesloten op de rapportage; bouw je zelf een link en verschijnen de kliks nooit, dan is dit de reden.
De rapportage wordt bepaald door het actietype, niet door wat je erin zet. Een formulierelement in een
gewone Canvas Builder-pop-up rapporteert inzendingen als kliks. Formulierspecifieke rapportage — het formulierenrapport,
doelgroepen “heeft een formulier ingediend”, opvolgmails — komt van het speciale leadformulier-actietype.
Video sluit YouTube en Vimeo in. Andere hosts worden niet ingesloten.
Eigen CSS wordt opgeschoond. Declaraties met aanhalingstekens, punthaken, accolades of
javascript: worden weggelaten. Een regel die “niets doet”, is meestal dit.
Verborgen is niet verwijderd. Het oogicoon houdt een element in je ontwerp maar slaat het over voor bezoekers.
Alle content wissen vraagt twee keer, en ongedaan maken kan het nog terughalen.

Gerelateerd

Handleiding voor de actie Pop-up & banner — de builder op basis van templates.
Dynamische variabelen invoegen — personaliseer de tekst in elk element.
A/B-testen — vergelijk twee ontwerpen.