With NiftyImages, you can display a unique image in your email for each recipient—for example, one that includes the contact’s first name or company name. In this guide, we’ll walk you through the setup step by step.
Contents
How does it work? #
NiftyImages generates the image only when the recipient opens the email, based on parameters in the image URL. Personalization therefore does not take place within the MyMIP email builder itself, but in the URL, which MyMIP populates with the correct personal information for each recipient when the email is sent.
The flow:
- In NiftyImages, you create a template (background + text layers that you can fill in dynamically later).
- NiftyImages provides you with a URL that includes parameters, such as:
?voornaam={$ContactData.firstName} - Paste this URL as an HTML block into your MyMIP email.
- When shipping, MyMIP replaces
{$ContactData.firstName}by each recipient's real first name. - When the recipient opens the email, NiftyImages renders the personalized image.
Step 1: Setting Up a Template in NiftyImages #
- Log in to your NiftyImages account.
- Create a new Personalized Image.
- Upload the background image of your choice.
- Add a text layer where you want the personalized text to appear. Position and style it as desired (font, color, alignment).
Step 2: Configure the Merge Tag #
After you click on the text layer, the merge tag configuration window will open. Fill it out as follows:
| Field | What should you enter? | Example |
|---|---|---|
| Merge Tag | A simple parameter name without spaces. This is how NiftyImages recognizes the value in the URL. | voornaam |
| Tag Type | Content type of the merge tag. | Text |
| Fallback Text | What NiftyImages displays if the value is missing. Always enter something neutral. | Beste klant |
| Design Value | For the preview in the editor only. Does not affect the live image. | Kris |
| ESP Merge Tag | The MyMIP person tag that provides the value upon submission. | {$ContactData.firstName} |
{$ContactData.firstName} for the first name. Other commonly used tags are {$ContactData.lastName}, {$ContactData.company} and {$ContactData.email}. See here The complete list of merge tags in your MyMIP environment.
Step 3: Generate and Test the URL #
Click Save, and then generate the URL for your template. It will look like this:
https://img1.niftyimages.com/xxxx/yyyy/zzzz?voornaam={$ContactData.firstName}
First, test the template directly in your browser by replacing the merge tag with an actual value:
https://img1.niftyimages.com/xxxx/yyyy/zzzz?voornaam=Kris
Do you see the image with "Kris" in the right place? If so, the template is working correctly, and you can move on to the next step. If you still see the design value or fallback, check to make sure the Merge Tag name in NiftyImages exactly matches the parameter name in your URL (case-sensitive).
Step 4: Add an HTML blockin the MyMIP email builder #
Open your email in the MyMIP email builder and follow these steps:
- Drag an HTML block to the desired location in your email. Do not use a standard image block—it interprets the merge tag differently and breaks the personalization.
- Click on the HTML block and paste the code below into the editing field. Replace the URL with your own 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} literally in the HTML code. Use not the email builder's merge tag picker to insert it—which generates an internal code structure that renders the NiftyImages URL unusable.
Step 5: Dimensionsand Responsive Display #
The HTML from the previous step ensures that your image scales properly on any screen size. Here's what each part does:
| Attribute / style | Position |
|---|---|
width="600" | HTML attribute for versions of Outlook that do not recognize the CSS `width` property. |
width:100% | The image fills the available column width. |
max-width:600px | On desktop, never wider than 600px (standard email width). |
height:auto | The aspect ratio is preserved when scaling. |
margin:0 auto | Centers the image if the container is wider. |
border:0 | Removes the default border that some clients display. |
alt="Welkom" | Displays descriptive text when images are blocked. |
Using Other Widths #
Would you like a narrower or wider view? If so, adjust both width if max-width . For half a width, for example:
width="300"
style="display:block; width:100%; max-width:300px; height:auto; margin:0 auto; border:0;"
Final test via a test shipment #
The preview in the email builder does not display the personal tags as actual values—this is normal. Instead, you’ll see the fallback text or the design value from NiftyImages. To check the actual personalization:
- Send a test email to yourself using the test email feature in MyMIP, linked to a contact with a first name entered.
- Open the email you received and check to see if the first name is correct in the image.
- Also test a contact without a first name entered to verify that the fallback text appears correctly.
Common Problems #
The image displays the fallback text instead of the first name #
The parameter name in your URL does not match the Merge Tag in NiftyImages. Make sure they are spelled exactly the same (case-sensitive). Also, test with a contact whose first name has actually been entered in MyMIP.
The person tag appears literally in the image (e.g., {$ContactData.firstName}) #
MyMIP did not replace the tag when sending the message. This usually happens because the tag was typed incorrectly or because the curly braces were converted to URL codes (%7B, %7D). Delete the HTML block and retype the code—if necessary, paste it into a text file (Notepad) first to filter out any hidden formatting.
The image appears distorted or too large on mobile #
The heightThe -attribute in your HTML causes distortion when scaled. Remove it and let the browser calculate the height proportionally using height:auto in that style.
The image is blocked by the email client #
Some email clients (e.g., Outlook, the Gmail app) block external images by default. The recipient must then manually click "Show images." Therefore, always include a meaningful alt-text so that the email remains readable even without an image.
The preview in the email builder does not show any personalization #
This is normal and not an error. The preview does not replace personalized tags—you'll see the fallback text or design value. You'll only see the personalized result in an actual (test) send.