Met NiftyImages toon je per ontvanger een unieke afbeelding in je e-mail — bijvoorbeeld met de voornaam of het bedrijf van de contactpersoon erin verwerkt. In deze handleiding lopen we stap voor stap door de opzet.
Inhoud
Hoe werkt het principe #
NiftyImages genereert de afbeelding pas op het moment dat de ontvanger de e-mail opent, op basis van parameters in de afbeeldings-URL. De personalisatie gebeurt dus niet in de MyMIP e-mail builder zelf, maar in de URL die MyMIP bij verzending per ontvanger invult met de juiste persoonlijke gegevens.
De flow:
- Je bouwt in NiftyImages een template (achtergrond + tekstlagen die je later dynamisch kan invullen).
- NiftyImages geeft je een URL met parameters, zoals:
?voornaam={$ContactData.firstName} - Deze URL plaats je als HTML-blok in je MyMIP e-mail.
- Bij verzending vervangt MyMIP
{$ContactData.firstName}door de echte voornaam van elke ontvanger. - Wanneer de ontvanger de e-mail opent, rendert NiftyImages de gepersonaliseerde afbeelding.
Stap 1Template opzetten in NiftyImages #
- Log in op je NiftyImages-account.
- Maak een nieuwe Personalized Image aan.
- Upload de gewenste achtergrondafbeelding.
- Voeg een tekstlaag toe waar de gepersonaliseerde tekst moet komen. Positioneer en style deze zoals gewenst (lettertype, kleur, uitlijning).
Stap 2Merge Tag configureren #
Nadat je op de tekstlaag klikt, opent het configuratievenster voor de merge tag. Vul dit als volgt in:
| Veld | Wat vul je in | Voorbeeld |
|---|---|---|
| Merge Tag | Een simpele parameternaam zonder spaties. Dit is hoe NiftyImages de waarde herkent in de URL. | voornaam |
| Tag Type | Type inhoud van de merge tag. | Text |
| Fallback Text | Wat NiftyImages toont als de waarde ontbreekt. Vul altijd iets neutraals in. | Beste klant |
| Design Value | Enkel voor de preview in de editor. Heeft geen invloed op de live-afbeelding. | Kris |
| ESP Merge Tag | De MyMIP-persoontag die de waarde levert bij verzending. | {$ContactData.firstName} |
{$ContactData.firstName} voor de voornaam. Andere veelgebruikte tags zijn {$ContactData.lastName}, {$ContactData.company} en {$ContactData.email}. Raadpleeg hier de volledige lijst van de merge-tags in je MyMIP-omgeving.
Stap 3URL genereren en testen #
Klik op Save en genereer vervolgens de URL van je template. Deze ziet er zo uit:
https://img1.niftyimages.com/xxxx/yyyy/zzzz?voornaam={$ContactData.firstName}Test de template eerst rechtstreeks in je browser door de merge tag te vervangen door een echte waarde:
https://img1.niftyimages.com/xxxx/yyyy/zzzz?voornaam=KrisZie je de afbeelding met "Kris" op de juiste plek? Dan werkt de template correct en kan je door naar de volgende stap. Zie je nog steeds de designwaarde of fallback? Controleer dan of de Merge Tag-naam in NiftyImages exact overeenkomt met de parameternaam in je URL (hoofdlettergevoelig).
Stap 4HTML-blok toevoegen in de MyMIP e-mail builder #
Open je e-mail in de MyMIP e-mail builder en volg deze stappen:
- Sleep een HTML-blok naar de gewenste plaats in je e-mail. Gebruik dus geen standaard afbeelding-blok — die interpreteert de merge tag anders en breekt de personalisatie.
- Klik op het HTML-blok en plak onderstaande code in het bewerkingsveld. Vervang de URL door jouw eigen NiftyImages-URL.
<img src="https://img1.niftyimages.com/xxxx/yyyy/zzzz?voornaam={$ContactData.firstName}"
alt="Welkom"
width="600"
style="display:block; width:100%; max-width:600px; height:auto; margin:0 auto; border:0;" />{$ContactData.firstName} letterlijk in de HTML-code. Gebruik niet de merge-tag-picker van de e-mail builder om deze in te voegen — die genereert een interne codestructuur die de NiftyImages-URL onbruikbaar maakt.
Stap 5Afmetingen en responsive weergave #
De HTML uit de vorige stap zorgt ervoor dat je afbeelding netjes meeschaalt op elk schermformaat. Dit is wat elk deel doet:
| Attribuut / stijl | Functie |
|---|---|
width="600" | HTML-attribuut voor Outlook-versies die geen CSS-width lezen. |
width:100% | Afbeelding vult de beschikbare kolombreedte. |
max-width:600px | Op desktop nooit groter dan 600px (standaard e-mailbreedte). |
height:auto | De beeldverhouding blijft behouden bij het schalen. |
margin:0 auto | Centreert de afbeelding als de container breder is. |
border:0 | Verwijdert de default border die sommige clients tonen. |
alt="Welkom" | Toont beschrijvende tekst als afbeeldingen geblokkeerd zijn. |
Andere breedtes gebruiken #
Wil je een smallere of bredere weergave? Pas dan zowel width als max-width aan. Voor een halve breedte bijvoorbeeld:
width="300"
style="display:block; width:100%; max-width:300px; height:auto; margin:0 auto; border:0;"Eindtest via een testverzending #
De preview in de e-mail builder toont de persoontags niet als echte waarden — dat is normaal. Je ziet dus de fallback-tekst of de designwaarde uit NiftyImages. Om de echte personalisatie te controleren:
- Verstuur een testmail naar jezelf via de testverzending-functie van MyMIP, gekoppeld aan een contact met een ingevulde voornaam.
- Open de ontvangen e-mail en controleer of de voornaam correct in de afbeelding staat.
- Test ook een contact zonder ingevulde voornaam om te verifiëren dat de fallback-tekst correct verschijnt.
Veelvoorkomende problemen #
De afbeelding toont de fallback-tekst in plaats van de voornaam #
De parameternaam in je URL komt niet overeen met de Merge Tag in NiftyImages. Controleer dat beide exact hetzelfde zijn geschreven (hoofdlettergevoelig). Ook: test met een contact waarvan de voornaam effectief is ingevuld in MyMIP.
De persoontag verschijnt letterlijk in de afbeelding (bv. {$ContactData.firstName}) #
MyMIP heeft de tag niet vervangen bij verzending. Dit gebeurt meestal omdat de tag verkeerd is ingetypt of omdat de accolades zijn omgezet naar URL-codes (%7B, %7D). Verwijder het HTML-blok en typ de code opnieuw in — plak zo nodig eerst via een tekstbestand (kladblok) om verborgen opmaak weg te filteren.
De afbeelding staat vervormd of te groot op mobiel #
De height-attribuut in je HTML zorgt voor vervorming bij schaling. Verwijder deze en laat de browser de hoogte proportioneel berekenen via height:auto in de style.
De afbeelding wordt geblokkeerd door de e-mailclient #
Sommige mailclients (bv. Outlook, gmail-app) blokkeren standaard externe afbeeldingen. De ontvanger moet dan handmatig op "afbeeldingen tonen" klikken. Zorg daarom altijd voor een zinvolle alt-tekst zodat de e-mail ook zonder afbeelding leesbaar blijft.
De preview in de e-mail builder toont geen personalisatie #
Dit is normaal en geen fout. De preview vervangt persoontags niet — je ziet de fallback-tekst of designwaarde. Alleen bij een echte (test)verzending zie je het gepersonaliseerde resultaat.
