
Benefits of personalizing email content are that they are more likely to be opened by recipients, recipients are
more likely to read them in full, and they are often shared with other people - because they show up as more personal emails.
Personalized e-mails are not new, but it is time to take those personalized e-mails to the next level.
One of the newest technologies that can be used for this purpose is image generation. In this article
I will show you how to send an e-mail with personalized image to your customer once he makes some action
in your application or website. I will use [Make.com (Integromat)](https://make.com) to take advantage from no-code automations.


## Create Integromat webhook

I started from creating a scenario in Integromat and adding a webhook module. The module generates an unique
webhook URL where I can send my requests from server or from frontend application. The CORS won't be a problem here because
Integromat accepts requests from frontend applications.

![Integromat webhook configuration](/blog/integromat-webhook-configuration.png)


## Send request on click

Let's go to the code part! I started from creating a simple `<a href=""/>` tag in my React application.
It looks pretty standard I added `href` attribute with link to some article and custom `onClick` method.

[comment]: <> (![Send request from ReactJS application to Integromat with axios]&#40;/blog/send-personalized-email-image-on-click.png&#41;)

```tsx
<a href="https://renderform.io/blog/posts/multi-language-image-variants/"
   target="_blank"
   onClick={onLearnMoreClick}
   className="btn btn-link d-flex align-items-baseline">
    <span>Learn how to quickly generate multi-language images</span>
    <i className="far fa-arrow-right ms-2"/>
</a>
```

The `onLearnMoreClick` method will be invoked once somebody clicks the link. The `onLearnMoreClick` will send a
POST request to endpoint generated by Make.com (Integromat). I used [axios](https://github.com/axios/axios) but you can use
any other library to do this. If you don't want to use any library check [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).

```tsx
const onLearnMoreClick = () => {
axios("https://hook.integromat.com/your-webook-url",
  {
    method: "POST",
    data: {
      firstName: account.firstName,
      email: account.email
    }
  });
}
```




We are passing two values which we will need in next steps:
- `firstName` - user first name,
- `email` - user e-mail to send him personalized e-mail.

## Edit image template

I used existing template from RenderForm template library. However, if you want, you can create
your own template using template editor in RenderForm.
We will edit the top component with 'Hey Jakub!'
text, and we use Integromat to replace the text for every webhook request.

![Example template for coupon code and image generation](/blog/personalized-image-template.png)

## Configure Integromat scenario

Below you see a whole Integromat scenario where I connected everything together. The scenario is self-explanatory, we have 4 modules:
- Webhooks module - receive requests from application
- RenderForm - generate image based on data from request
- HTTP - download the image from RenderForm
- Email - send e-mail to a customer

![Integromat scenario with image generation and SMTP](/blog/integromat-personalized-image-flow.png)

![Add text to image using RenderForm module](/blog/add-changes-bannerly.png)

HTTP module is only for downloading image from received URL from RenderForm module.
![Download generated image with text using HTTP Integromat module](/blog/http-module-download-image.png)

Thanks to the HTTP module we can add the image itself instead just the URL.
![Send attachment using Integromat email module](/blog/e-mail-module-add-attachment.png)



## Test

Click **'Run once'** button in created Integromat scenario and then click link to open the article from which we created
in the first section. Now the request from our frontend application should be sent Integromat Webhook module, after that
data will be passed to RenderForm module where a new image will be generated. RenderForm will take your template
and replace title on the image and return a link with ready to download image. Next, HTTP module will download
the image generated by RenderForm module and add it as an attachment in the last step. In E-mail module we composed a simple
e-mail message which we sent to the user who clicked the link!


![example email with personalized image](/blog/example-email-with-personalized-image.png)

Presented Integromat scenario is just a simple example what you can do with batch image generation. Possibilities are
unlimited! Your flows can be much more complex, you could generate an image for every occasion with RenderForm, for example
you could add user avatar to make it more engaging. Image that your customer gets a personalized image with his name and
profile image! Have fun with RenderForm!


Send Personalized E-mail from React Application



## Hakei App

Haikei is a web-based design tool to generate unique SVG design assets for websites, social media, blog posts, desktop and mobile wallpapers, posters, and more!

[haikei.app](https://app.haikei.app/)


![Hakei App - SVG Generator](/blog/svg-generator-hakei.png)


## Blobmaker App

You can't find a design that you like? We got you covered with Blobmaker's neat web-based interface. Generate the type of quality designs you've been dreaming about with just a few clicks.

[blobmaker.app](https://www.blobmaker.app/)

![BlobMaker App - SVG Generator](/blog/blob-maker-svg-generator.png)


## GetWaves App

Get Waves App, a web-based tool to generate unique SVG design assets for your digital creations, like websites, social media posts, blog posts, desktop and mobile wallpapers, posters, and more.

[getwaves.io](https://getwaves.io/)

![Get Waves App - SVG Generator](/blog/get-waves-svg-generator.png)


## Squircley!

Design beautiful, sharp, professional vector rectangle with curved corners.

[squircley.app](https://squircley.app/)

![Squrcleay App - SVG Generator](/blog/squircley-svg-generator.png)

## SVG Noise Pattern Maker

Noise Pattern Maker is a Codepen code, but it generates great SVG patterns which can be used as backgrounds to your digital assets.

[codepen.io/georgedoescode](https://codepen.io/georgedoescode/full/dyNVNjG)

![Noise Pattern Generator on CodePen](/blog/svg-noise-pattern-generator.png)

## MagicPattern

Visualize your data in a new and exciting way! MagicPattern can generate two types of SVG charts. Bar chart and area chart. You can import your data in JSON.

[magicpattern.design](https://www.magicpattern.design/tools/svg-chart-generator)

![Magic Pattern - Svg Generator](/blog/svg-charts-generator.png)

## Pattern Monster


Ever wished you could make beautiful patterns for your website, branding, or clothes without the heavy lifting? Say hello to PatternMonster. With no coding required, it's never been easier to make beautiful, scalable patterns. 

[pattern.monster](https://pattern.monster/)

![Pattern Monster - Svg Generator](/blog/svg-pattern-waves-generator.png)

## WowPatterns

WowPatterns is a unique resource of SVG patterns which are free to use. These patterns will fit best in home decor branding templates. 

[wowpatterns.com](https://www.wowpatterns.com/free-vector-art)

![Wow Patterns - Free to use SVG Patterns](/blog/wow-patterns-free-to-use-svg-patterns.png)

## Hero Patterns

Create beautiful patterns for your design instantly with Hero Patterns. Forget about tedious hours of design - you can now make any pattern you want in seconds. 

[heropatterns.com](https://www.heropatterns.com/)

![Hero Patterns - SVG Patterns Generator](/blog/hero-patterns-svg-patterns-generator.png)


## SVG Color Matrix Mixer

SVG Color Matrix Mixer is more a tool rather than a SVG generator, but it does a great job. You can create own color matrix with SVG Color Matrix Mixer. Upload your image, select your desired color matrix filter, customize each channel, and download your new filtered image!

[fecolormatrix.com](https://fecolormatrix.com/)

![SVG Matrix Mixer - Svg Image Manipulator](/blog/svg-color-matrix-mixer.png)

## Pattern Pad

PatternPad is a beautiful, intuitive and powerful app to create unique, eye-catching patterns. It's the solution for anyone who wants to brand their product or create an original social media post with ease. No matter what you're looking for, PatternPad has the perfect pattern for you.

[patternpad.com](https://patternpad.com/editor.html)

![Pattern Pad](/blog/patternpad.png)


List of SVG Generators - 2021 Update


A social media post is a message that is created and published on one of the social media platforms. 
It may include text, images, videos, links to pages, and other content.

## Share with link

There are a number of ways to share a post and the best way depends on the type of social media and how you want to share it.
The simplest way is just by using a URL with text. 


## Post on Facebook

```html
<a href="https://facebook.com/sharer/sharer.php?u=renderform.io&quote=I love RenderForm">
  Post on Facebook
</a>
```

Example: [Post on Facebook](https://facebook.com/sharer/sharer.php?u=renderform.io&quote=I%20love%RenderForm)

![Share to Facebook Example](/blog/share-to-facebook-example.png)


## Post on Twitter

```html
<a 
  href="https://twitter.com/intent/tweet?text=RenderForm is great!"
  data-size="large">
  Post on Twitter
</a>
```

Example: [Post on Twitter](https://twitter.com/intent/tweet?text=RenderForm%20is%20great!)

![Share to Twitter Example](/blog/share-to-twitter-example.png)

## Post on LinkedIn

```html
<a href="https://linkedin.com/sharing/share-offsite/?url=https://renderform.io">
  Post on Linkedin
</a>
```
Example: [Post on LinkedIn](https://linkedin.com/sharing/share-offsite/?url=https://renderform.io)

![Share to LinkedIn Example](/blog/share-to-linkedin-example.png)

## Post on Reddit

```html
<a href="https://www.reddit.com/submit?url=https://renderform.io&title=Try RenderForm!">
  Post on Reddit
</a>
```

Example: [Post on Reddit](https://www.reddit.com/submit?url=https://renderform.io&title=Try%20RenderForm!)

![Share to Reddit Example](/blog/share-to-reddit-example.png)


## Share with E-mail

```html
<a href="mailto:jakub@renderform.io?subject=RenderForm is great!&body=Hey Jakub!">
  Send with E-mail
</a>
```

Example: [Send with E-mail](mailto:contact@renderform.io?subject=RenderForm%20is%20great&body=Hey%20Jakub!)

![Share with Email Example](/blog/share-with-email-example.png)

## How to open post sharing in a new tab?

To tell web browser to open a sharing post in a new tab you need to use `target='_blank'` in `<a>` tag. See example below:

```html
<a href="https://renderform.io" target="_blank">Open in new tab</a>
```


How to share a post with link?


Have you ever wondering if you could quickly take a screenshot of a webpage using just a single request?

RenderForm API allows you to not only create images using templates and API but also take a screenshots using REST API.

There are plenty use cases of that:
- Post it on social media
- Make a list of websites
- Detect branding based on colors
- Test or health-check your webpage
- Read texts from screen


## How to take a screenshot with API?

Generate your API key in RenderForm by signing up to the system. Get the API key from your account section and then you can make a request like below.

```shell
curl 
    --location 
    --request POST 'https://api.renderform.io/api/v1/screenshots' \
    --header 'X-API-KEY: <API_KEY>' \
    --header 'Content-Type: application/json' \
    --data-raw '{
        "url": "https://renderform.io"
        "width": 1366,
        "height": 768,
    }'
```

RenderForm API will respond after a couple of seconds with link where you can download the screenshot. Example successful response is shown below.

```json
{
  "requestId": "ed39c85ac41f4c54b95e4caaad4ebff8",
  "href": "https://cdn.renderform.io/.../image.png",
  "request": {
    "width": 1366,
    "height": 768,
    "url": "https://renderform.io"
  }
}
```

## Screenshot API parameters

As you seen above we passed `url` of the website, `width` and `height` of the screenshot. These parameters are required but you can add more options:

- `url` (required) - website URL of which RenderForm should take a screenshot
- `height` (required) - screenshot height
- `width` (required) - screenshot width,
- `expires` (optional) - add expiration time in seconds for the image, available values from `1` to `604800`
- `waitTime` (optional) - add wait time in milliseconds before taking a screenshot, available values from `500` to `5000`
- `webhookUrl` (optional) - send response to the given webhookUrl as POST request

## Does it integrate with other tools?

Yes! RenderForm is integrated with Zapier and Make.com (Integromat). Soon we will add more integrations like n8n.io. Please also notice that 
every request supports a webhook. Taking a screenshot takes time because it's very resource demanding and complex process for servers.
You can pass a URL in `webhookUrl` field, thanks to that RenderForm API will accept your request and immediately
 return you a response. Once RenderForm finish processing your request a new request will be sent to the given URL in `webhookUrl`. 

## Can I set an expiration date?

Yes, you can set expiration date on every screenshot from 1 second up to 7 days. Add a field `expires` and put there
an expiration value in seconds. RenderForm API return you a link in `href` field which will be valid for requested period of time.


Zapier

Make.com

Integrately

WordPress Plugin

Mailchimp

Airtable Extension

Google Sheets

Excel/CSV file

REST API

RenderForm CLI

Webhooks

HTML to Image

Developer

Send Personalized E-mail from React Application

List of SVG Generators - 2021 Update

How to share a post with link?

Taking screenshots using REST API