Hoe je barcodes toevoegt aan je berichten

Wat je leert

Leer hoe je de {% barcode %} -tag gebruikt om Code 128 -barcodes te genereren in je e-mail-, mms-, RCS- en WhatsApp-berichten. De barcodewaarde kan een statische tekenreeks, een profieleigenschap, een gebeurtenisvariabele of een Klaviyo-couponcode zijn.

Snelle referentie

Voordat je van start gaat

De {% barcode %} tag werkt door een URL te genereren. Wanneer die URL wordt geladen (in een preview, een inbox of op een mobiel apparaat), rendert deze een PNG-afbeelding van de streepjescode. Dit betekent dat de barcode-afbeelding pas wordt gemaakt wanneer de URL daadwerkelijk wordt opgehaald.

De tag {% barcode %} wordt ondersteund in:

• E-mail
• mms
• RCS
• WhatsApp

Basisgebruik

De eenvoudigste manier om de barcode-tag te gebruiken is:

{% barcode 'MyCode' %}

Dit levert een URL op die een PNG-afbeelding van een streepjescode retourneert. Wanneer je de streepjescode scant, bevat deze de waarde MyCode.

Je kunt de barcode aanpassen door argumenten aan de tag mee te geven. Bijvoorbeeld:

{% barcode 'MyCode' width=200 height=100 %}

Bekijk het gedeelte met de argumentenreferentie hieronder voor alle beschikbare opties.

Barcodes gebruiken met verschillende kanalen

E-mail

Voor e-mail heb je twee opties voor hoe de barcode wordt weergegeven:

Optie 1: HTML-modus (aanbevolen voor e-mail)

Stel mode=html in zodat de tag direct een HTML-element <img> uitvoert. Dit is de eenvoudigste manier om een barcode in een e-mail op te nemen.

{% barcode 'MyCode' mode=html %}

Plaats deze tag in een tekstblok of HTML-blok in de e-mailtemplate-editor.

Optie 2: URL-modus

Laat de modus niet ingesteld (of stel mode=url in) om een URL te krijgen en plaats die URL vervolgens in het veld Afbeeldings-URL van een afbeeldingsblok. Dit geeft je meer controle over de opmaak van de afbeelding.

{% barcode 'MyCode' %}

mms

Voor mms-berichten voeg je de barcodetag toe in de sectie Dynamische afbeelding van de sms-/mms-editor, niet in de tekstbody.

1. Open je mms-bericht in de editor.
2. Klik op het pictogram Afbeelding toevoegen in het berichtvak.
3. Ga naar het tabblad Dynamische afbeelding.
4. Plak je barcodetag, bijvoorbeeld:

{% barcode person.LoyaltyId %}

1. Klik op Opslaan.

Dit volgt hetzelfde proces als het toevoegen van een dynamische afbeelding aan een mms. Bekijk voor meer informatie Hoe je een dynamische afbeelding toevoegt aan een tekstbericht.

RCS

Gebruik voor RCS-berichten mode=rcs om de barcode op te maken volgens de RCS-afbeeldingsvereisten. Deze modus stelt automatisch afmetingen in die correct worden weergegeven op zowel Android als iOS.

{% barcode 'MyCode' mode=rcs %}

Voeg de barcode-tag toe in de sectie Dynamic Image van de RCS-berichteditor, op dezelfde manier als je dat bij mms zou doen.

RCS-standaarden:

• Breedte: 600px
• Hoogte: 300px
• Opgevuld tot: 1440x720px

Deze standaarden volgen de aanbevelingen van Klaviyo voor de opmaak van RCS-afbeeldingen. Je kunt ze indien nodig overschrijven met aangepaste waarden voor width, height, padded_width en padded_height.

WhatsApp

Voor WhatsApp-berichten voeg je de barcodetag toe in de sectie Dynamische afbeelding van de berichteditor, op dezelfde manier als je dat voor mms zou doen.

{% barcode person.MembershipId %}

Er is geen speciale configuratie of modus nodig voor WhatsApp. De standaard mode=url werkt correct.

Referentie voor argumenten van barcode-tag

Barcodes gebruiken met profieleigenschappen en eventgegevens

Je kunt profieleigenschappen of gebeurtenisvariabelen gebruiken als barcodewaarde, zodat elke ontvanger een unieke barcode krijgt.

Voorbeelden van profieleigenschappen:

{% barcode person.LoyaltyId %}
{% barcode person.email %}
{% barcode person.MembershipNumber %}

Voorbeelden van gebeurtenisvariabelen (voor door meetwaarden getriggerde flows):

{% barcode event.Code %}
{% barcode event.OrderId %}

Omgaan met ontbrekende waarden:

Als een ontvanger de eigenschap niet heeft ingesteld, is de barcode-URL ongeldig en wordt de afbeelding niet geladen. Je hebt twee opties:

Optie 1: gebruik een default filter om een zinvolle terugvalwaarde in te stellen:

{% barcode person.BarcodeCode|default:'STORE-MEMBER' %}

Zorg dat de standaard een waarde is die logisch is als deze wordt gescand. Een generieke placeholder zoals "fallback" zou een scanbare maar nutteloze barcode opleveren.

Optie 2: Gebruik een voorwaardelijke instructie om de barcode volledig te verbergen wanneer de waarde ontbreekt:

{% if person.BarcodeCode %}
  {% barcode person.BarcodeCode mode=html %}
{% endif %}

Gecombineerd voorbeeld voor e-mail:

{% barcode person.LoyaltyId width=200 height=75 mode=html %}

Barcodes gebruiken met Klaviyo-couponcodes

Als je Klaviyo-beheerde couponcodes gebruikt en ze als barcodes wilt weergeven, stel je coupon=True in. Hierdoor wijst het systeem een couponcode toe aan de ontvanger en gebruikt het die code als barcodewaarde.

{% barcode 'ShopifyCoupon' coupon=True %}

Dit werkt via alle kanalen. Bijvoorbeeld: om een couponbarcode via RCS te versturen:

{% barcode 'ShopifyCoupon' coupon=True mode=rcs %}

{% barcode person.CouponCode %}

Schalen en formaat aanpassen

Standaard worden de breedte en hoogte van de streepjescode geschaald met een factor 3x. Dit betekent:

• Een width van 100 wordt gerenderd met een werkelijke breedte van 300px
• Een height van 50 wordt gerenderd op een werkelijke hoogte van 150px

Uitzondering: Wanneer mode=rcs, is de schaalfactor 1x. Dit biedt nauwkeurigere controle over de barcodedimensies, zodat deze voldoen aan de vereisten voor RCS-afbeeldingsopmaak.

Paddingwaarden worden niet geschaald. De argumenten padded_width en padded_height staan altijd voor werkelijke pixelwaarden. Omdat de binnenste barcode 3× wordt geschaald, moeten je paddingwaarden groter zijn dan 3 keer de breedte en hoogte. Bijvoorbeeld:

{% barcode 'Code' width=200 height=100 padded_width=700 padded_height=400 %}

Hier wordt de barcode weergegeven op 600x300px (200×3, 100×3) binnen een opgevuld canvas van 700x400px.

Maximale afbeeldingsgrootte: De barcodeservice genereert geen afbeeldingen die groter zijn dan 4096x4096 pixels. Deze limiet geldt voor de gerenderde grootte na schalen. Voor niet-RCS-barcodes (3x schalen) betekent dit dat het maximumargument width ongeveer 1365 is (1365 × 3 = 4095px). Voor RCS-barcodes (1x schalen) is het maximum 4096.

Breedterichtlijnen voor lange codes:

• Voor niet-RCS-barcodes: als je code meer dan 15 tekens bevat, vergroot je de breedte tot boven de standaardwaarde van 100 (die wordt weergegeven als 300 px).
• Voor RCS-barcodes: als je code meer dan 30 tekens bevat, vergroot je de breedte tot boven de standaardwaarde van 600px.

Als de breedte te smal is om de gegevens te coderen, kan de barcodeafbeelding niet worden gegenereerd.

Probleemoplossing

Bekijk altijd een voorbeeld voordat je verstuurt

Omdat de {% barcode %} -tag tijdens het renderen een URL genereert en de afbeelding pas wordt gemaakt wanneer die URL wordt opgehaald, zie je eventuele fouten mogelijk pas als je een voorbeeldweergave bekijkt of het bericht verzendt. Volg deze stappen om problemen vroegtijdig op te sporen:

1. Bekijk een voorbeeldweergave van het bericht. Als de barcode niet wordt geladen in de voorbeeldweergave, wordt deze ook niet geladen wanneer het bericht wordt verzonden.
2. Scan de streepjescode. Gebruik een tool om streepjescodes te scannen (zoals imagetotext.info/barcode-scanner) om te controleren of de streepjescode de verwachte waarde bevat.
3. Stuur een testbericht naar jezelf voordat je het naar je doelgroep verstuurt.

Veelvoorkomende problemen

De barcode-afbeelding wordt niet geladen

De meest voorkomende oorzaak is een lege barcodewaarde. Dit gebeurt wanneer de tag verwijst naar een profieleigenschap of eventvariabele die de ontvanger niet heeft. Bijvoorbeeld:

{% barcode person.BarcodeCode %}

Als de ontvanger geen BarcodeCode -waarde heeft, ontbreekt de gegenereerde URL de code en wordt de afbeelding niet weergegeven. Los dit op door een default -filter toe te voegen:

{% barcode person.BarcodeCode|default:'defaultCode' %}

De streepjescode-afbeelding wordt niet gegenereerd, maar de URL lijkt correct

De breedte van de streepjescode is waarschijnlijk te smal om alle gegevens in je code te coderen. Probeer de waarde width te verhogen. Vuistregel:

• Codes van meer dan 15 tekens hebben een grotere breedte nodig dan de standaard 100 (300 px gerenderd).
• RCS-codes van meer dan 30 tekens hebben een breedte nodig die groter is dan de standaard 600px.

De barcode wordt niet weergegeven in een tekstblok (e-mail)

Controleer of er show/hide-logica is toegepast op het tekstblok. Als een voorwaarde het blok verbergt, wordt de barcode niet weergegeven, zelfs als de tag juist is. Open de instellingen van het blok om dit te controleren.

Extra hulpbronnen

• Aan de slag met couponcodes in Klaviyo – Leer hoe je couponcodes maakt en beheert, inclusief hoe je de oudere {% barcode_code %} tag gebruikt voor couponbarcodes in e-mail.
• Hoe je een dynamische afbeelding aan een tekstbericht toevoegt — Leer hoe je dynamische afbeeldingen aan mms-berichten toevoegt, inclusief waar je de sectie Dynamische afbeelding in de editor kunt vinden.
• Referentie voor berichtpersonalisatie — Referentie voor alle personalisatietags die beschikbaar zijn in Klaviyo, inclusief profieleigenschappen, eventvariabelen en filters.
• Inzicht in best practices voor mms-afbeeldingen en GIF’s – Best practices voor de afbeeldingsgrootte en -opmaak in mms-berichten.