
Email campaigns are one of the most popular ways to reach subscribers and customers. Generic emails are useful for general announcements or new product updates, but they don't create any emotional connection between you and the email recipient. 

**Personalized images** are a powerful way to connect with your customers on a personal level. Tailoring the images of your emails to include the recipient's name, organization name or other personal details allows you to give them an experience that they are sure to enjoy. 

Check how to send **personalized email campaigns with Mailchimp and RenderForm.io** image generator in 3 simple steps!

![Email template with image](/blog/mailchimp-template.jpg)

## Create personalized images for your Mailchimp email campaign

RenderForm.io's easy template editor lets you create nice image templates and use them in your Mailchimp email campaign without any coding skills. Automate your email campaigns and improve your relations with your customers with those 3 easy steps.

### Create image template

First, log in to RenderForm.io and create an **image template**. You can also use any image you like from our template base.

![Image template created in RenderForm editor](/blog/image-template.png)

Our tips:
- think about where you want the image to be in the email (e.g., in the email header, as a sticker or promo banner)
- for email **header image** in Mailchimp, use a template with **600 pixels width**
- create space for the recipient's name, company name or other element you want to personalize
- have a photo of the recipient or a company logo? Use it to personalize the content!

### Create the image link

When your image template is ready, create its unique link that you will use in your email campaign.

![Template Link Builder tool](/blog/template-link-builder.png)

1. Open **Plugins** tab,
2. Go to **Link Builder** plugin to generate your image link.
3. Choose your template from selector.
4. Click **Generate AuthCode** option to create a unique code for your image.
5. In **Image Changes**, select which image component will be modified. In this case, we will modify the component named *Header*. Enter your text and to insert your recipient's name to the image, use **`*|FNAME|*`** key from Mailchimp.
6. Click on **Create and Copy link** button to generate your image link.

### Add image to Mailchimp email template

Create a new email template in Mailchimp or use an existing one and drag **Code** block section to the template. 

![Personalized Email Image](/blog/mailchimp-code-block.png)

In the Code editor, paste the following code, **replacing YOUR_IMAGE_LINK with the image link** created in RenderForm.

```html
<div class="mcnTextContent">
   <img src="YOUR_IMAGE_LINK"/>
</div>
```

Save the template and it's ready to go!

## Personalized Email with Mailchimp

With those 3 steps, your audience can receive interesting and tailored emails that stand out from the mass of generic emails they receive daily.

![Personalized Email Image](/blog/personalised-email.jpg)

Thanks to personalized image links, you can send customized messages in your Mailchimp Campaigns! Create custom and interesting texts and add them to your emails as images. 





Personalized Emails with Mailchimp in 3 minutes



Image generation is a technique of automated or semi-automated images creation. Creating a complete and eye-catching image with API from scratch could be a challenging task.
Great graphic designers usually don't know how to code, so they use visual editors like Photoshop, Sketch or RenderForm to create their drafts and mockup. 
Image generation software uses templates created by graphic designers and API just replaces properties like texts, colors or images to 
meet the final requirements.

## Step 1: Create a template

Add components and design your template in our [Template Editor](/docs/general/template-editor/).

![Online Editor for Image Generation](/blog/simple-online-design-editor.png)

Check every added component on canvas.

### Set image fit
Click on image and on the right side adjust image fit option. Set image fit to `cover` if it can be cropped on sides in order to fill whole space, or use `contain` option if the image must be showed without cropping. 
The contain option is useful when you add logos or brand visuals.

### Adjust text box
By default, RenderForm will scale down your text if it will be bigger than blue rectangle. 
You can set width and height of a text box to make sure your text can freely grow.

![Text alignment](/blog/text-component-alignment.jpg)

### Adjust text alignment 
Click on text and on the right side scroll down to 'Alignment' section. 
You can decide how the text will grow if it will be bigger than used placeholder on draft.  

## Step 2: Automate and scale

Now, you are ready replicate your template with different texts, images and more!
No matter which integration you will choose, the general rule of thumb is that you need to know which component you want to update and what property.
![Layout plus Data equals your image](/blog/image-generation-api.jpg)


General format of change looks as follows: 

`YOUR_COMPONENT_ID.PROPERTY=YOUR_VALUE`

Example:

`myNameComponent.text=This is my name`


Check [list of properties](/docs/general/components/) which you can edit with any integration.


![Example of generated image from Image Generation API](/blog/example-of-generated-image-from-image-generation-api.jpg)



Zapier

Make.com

Airtable

Google Sheets

Excel/CSV file

Mailchimp

REST API

HTML to Image

Personalization

Personalized Emails with Mailchimp in 3 minutes

What is Image Generation?