Kortingscode automatisch toepassen bij de checkout

Een van de grootste lekken bij promotieaanbiedingen is de kloof tussen “de gebruiker zag de kortingscode” en “de gebruiker vulde de code echt in bij de checkout”. Automatisch toepassen dicht die kloof volledig: als een bezoeker een kortingscode heeft gezien in een Personyze-campagne (of via een andere bron), kan Personyze de code automatisch in het kortingscodeveld van de checkout zetten — kopiëren en plakken is niet nodig.

Wanneer je dit gebruikt

• Sitebrede promotiecampagnes waarin de campagne zelf het aanbod toont (“15% korting op je eerste bestelling — toegepast bij de checkout”).
• Herstel van verlaten winkelwagens waarbij je een bezoeker met een korting hebt teruggehaald en zeker wilt weten dat die echt wordt toegepast.
• Gepersonaliseerde welkomstaanbiedingen voor nieuwe bezoekers of specifieke doelgroepsegmenten.
• Loyaliteits-/VIP-kortingen die stil worden toegepast voor bekende terugkerende klanten.

Hoe het werkt

De flow heeft twee helften:

1. Targeting — gebruik doelgroepen van Personyze om bezoekers te identificeren die de automatische code moeten krijgen (bijv. “zag de banner met 15% in deze sessie”, “is een terugkerende klant”, “liet de afgelopen 7 dagen een winkelwagen achter”).
2. Actie — activeer op de checkoutpagina een actie die de kortingscode in het kortingscodeveld van je checkout zet. Twee manieren om het te implementeren:

Optie 1 — HTML-actie (placeholder vervangen)

De eenvoudigste aanpak als het kortingscodeveld van je checkout een stabiele selector heeft. Gebruik een HTML-actie van Personyze die zich richt op het attribuut value van het kortingscodeveld (of de wrapper eromheen) en de code invoegt. Dit werkt goed voor standaard checkouttemplates waarin het kortingscodeveld vanaf het begin op de pagina staat.

Optie 2 — JavaScript-actie

Gebruik voor dynamische checkouts (flows met meerdere stappen zoals bij Shopify, checkouts in React/Vue die het kortingscodeveld pas laat laden) een JavaScript-actie. Het script kan wachten tot het veld verschijnt, de waarde instellen, en een “change”-event activeren zodat het framework van je checkout de wijziging ziet:

// Example: wait for the coupon field, then insert code + trigger validation
var couponCode = 'WELCOME15';
var observer = new MutationObserver(function() {
  var input = document.querySelector('input[name="discount"], input[id*="coupon"]');
  if (input && !input.value) {
    input.value = couponCode;
    input.dispatchEvent(new Event('input',  { bubbles: true }));
    input.dispatchEvent(new Event('change', { bubbles: true }));
    // Optionally click the apply button
    var btn = document.querySelector('button[name="apply-discount"]');
    if (btn) btn.click();
    observer.disconnect();
  }
});
observer.observe(document.body, { childList: true, subtree: true });

Wil je hulp om dit aan je specifieke platform aan te passen (Shopify, BigCommerce, Magento, maatwerk), neem dan contact op met support@personyze.com — we kunnen fragmenten per platform leveren.

Best practices

• Toon de kortingscode altijd eerst zichtbaar. Automatisch een code toepassen die de gebruiker nooit heeft gezien, kan vreemd aanvoelen. Toon het aanbod in een campagnebanner of pop-up, en pas het daarna automatisch toe bij de checkout.
• Bevestig het zichtbaar na het toepassen. Laat de actie ook een kleine melding tonen als “Code WELCOME15 toegepast — je bespaart €X”, zodat de gebruiker begrijpt wat er gebeurde.
• Test in een echte checkoutflow. Het visuele voorbeeld vangt geen problemen met het echte gedrag van het formulier. Gebruik de testmodus in de console met een echt product in de winkelwagen.
• Stapel geen onverenigbare kortingen. Staat je winkel niet meerdere kortingscodes toe, dan kan het automatisch toepassen ongemerkt mislukken of een bestaande code overschrijven. Target je doelgroep zorgvuldig.