
[Make.com](https://www.make.com/) (formerly Integromat) is a popular automation platform that can improve your workflows by automatizing them. One central hub that connects all apps helps in controlling all workflows and makes the automation simple and intuitive. 

Make offers many [apps that you can easily integrate](https://www.make.com/en/integrations) in your workflow automation, like Google apps, Facebook, Mailchimp, Shopify, Etsy, Buffer, Tally and much, much more. RenderForm is one of them, so you can use it in Make workflow to automatize your email or marketing campaigns with automatic, personalized images that will stand out!

## Image automation with Make

You can use Make to automatize your workflow and connect multiple apps into one process. There are three simple steps to generate automated images: add trigger event, then create an image template in RenderForm, and set up automation in Make.com. Ready to try it?

### Trigger event - Tally form

Here, you can create any **event that will trigger the action of generating an image**. It can be a new sign-up to your app, new product in your store, a change in your Airtable spreadsheet, new scheduled meeting in your Calendly calendar or submitted form on Google or Tally. Anything you can imagine and think of that you use in your workflow.

![Create trigger event with Tally](/blog/make-trigger-action-l.jpeg)

I created a workflow that starts from **trigger which is form submission on Tally**.

**What is the idea?** I created a simple Tally form, where I fill all data I need to create a hotel offer for my client. In the form, I enter hotel details, trip dates, price, etc.; so everything I want to send in the offer. 

![Tally form](/blog/make-tally-form.jpeg)

Next, when I submit the form, I would like to email the client and include personalized images of hotels from my offer. The automatic images will be generated using RenderForm template.

### Create image template

Now, **create your image template in RenderForm editor**. One element in your image template is one component that can be editable via Make automation. 

I created different **components** like `price`, `title` or `availability`, and I will be replacing those elements automatically when there is a new form submitted on Tally.

![Create image template in RenderForm](/blog/make-renderform-template-l.jpeg)

For example, using my Tally's form I will be replacing the title (hotel name), hotel image and price elements.

### Action - generate image

The last step of the configuration is to **set up RenderForm module** in Make and **map the elements between Tally form and RenderForm template**.

Search for RenderForm integration in “Make” and click on Add button to connect it with your RenderForm account. You will find your API key in your [account section](https://renderform.io/console/api-keys/) in RenderForm.

![Add RenderForm event in Make](/blog/make-renderform-apikey.jpeg)

Then, we need to **configure the actual image generation**. First, select the template you want to use for this automation. In my case, it's “Hotel card” from the previous step. Next, in *Changes*, we will insert responses from Tally form into RenderForm template.

- **Component ID** - it is the component name in your RenderForm template
- **Property** - type of component, it can be for example, text or img for images
- **Value** - here you select the form element from Tally

![Set up RenderForm image generation](/blog/make-renderform-setup-l.jpeg)

In the example above, I created different items for each element I wish to replace. So, for `price` component from RenderForm image template, which is of type `text`, I assign a field from Tally form which appears as `1. Fields: Price`. Whatever price (or other text) I enter into that field in Tally form, it will replace the default *price* component in my template. 

### Run automation to generate image

Now, the automation is ready. **When I submit the form, RenderForm will generate the image** basing on the information from Tally. You can see that the image has different title, price, image and dates from the original template. 

![Image generated automatically](/blog/make-renderform-image.jpg)

**Imagine creating multiple images like that, using a simple form!**

I can download the image or send it directly to the client through the automation in Make.com, by adding the next step to the workflow. Sounds simple, doesn't it? 

## Use cases for automated image generation

Automatic image generation works great in personalized marketing campaigns and helps in creating multiple images with different content, basing on templates. What are the use cases for automated image generation?

- generating multiple images with dynamic content that you can easily download or use on your website
- [personalized images for email campaigns](/blog/posts/personalized-emails-mailchimp/)
- image hosting for your automated images
- blog post covers – if you struggle with keeping your blog post covers nice and clean, and most of all coherent, using RenderForm can help significantly. Simply create a template in the editor and [generate all images automatically with a simple Excel list](blog/posts/how-to-create-many-images-from-spreadsheet/) of your blog posts. 

**Try RenderForm for free** and check how it can help you improve your image generation with automation options and simple image editor! 


Image Generation with Make.com


Integromat is a platform for creating connections between different applications in no-code style, where achieving 
a business goal is the top priority. Integromat offers a free plan, so it makes it a great option for testing its capabilities.
[Integromat application library](https://www.integromat.com/en/integrations/) is growing every day, you will find there all popular application like Google Drive apps, Facebook Ads, Shopify, Telegram, Instagram, e-mail connectors, and more, much, much more!

Let's create a simple scenario! We will create an Integromat flow where we will watch on new customers in Shopify, then we will generate a personalized image using the customer name and e-mail them with our auto-generated, personalized image.

Whole scenario looks like this, we created 4 modules: 

- Shopify - watch new customers
- RenderForm - generate an image with customer name
- HTTP - download the image
- E-mail - send the e-mail

![Shopify: Send email to a new customer](/docs/integromat/example-scenario-personalized-customer-image-with-shopify.png)

In RenderForm, I created a simple image with 4 components. The most important one is the text component with 'Hey Joanna!' greeting. It has 'greeting' ID, which we will use in the following steps.

![RenderForm: example image template](/docs/integromat/example-thanks-for-order.png)

Next, in RenderForm Integromat module I configured a new connection using API Key. The API key can be found in your RenderForm account in your [account section](/console/api-keys/).
I selected my template and added Changes to replace 'Hey Joanna' text with a greeting with customer name. 

![Integromat: image generation module](/docs/integromat/bannerly-module-configuration.png)

The HTTP module will download the generated image with customer name. This step is required by the e-mail module.

![Integromat: download image from URL](/docs/integromat/integromat-http-module-get-a-file.png)

I configured e-mail module with my e-mail mailbox, you can put there an e-mail subject line and e-mail message. In the last field, I added an attachment with the image which I downloaded in the previous step.

![Integromat: add image attachment](/docs/integromat/e-mail-add-attachment.png)

We are done! Now, every time you get a new customer in your Shopify store, they will receive a personalized e-mail message. This will definitely make your store much more unique than others. You can use RenderForm to create much more sophisticated marketing campaigns. For example, you could generate a QR code with promo link or create a template with most popular items in your shop and send it to your customers. Possibilities are unlimited! 

Have fun with our image generation tool and if you experience any problem or need help with automatizing your workflow, we are here to help.

## Resources

- [List of component properties](/docs/general/components/)
- [Make.com (Integromat)](https://make.com)


Image Generation with Integromat


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 ml-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! 


Zapier

Make.com

Mailchimp

Airtable

Google Sheets

Excel/CSV file

REST API

HTML to Image

Integromat

Image Generation with Make.com

Image Generation with Integromat

Send Personalized E-mail from React Application