
[Zapier](https://zapier.com/) is a popular platform for no-code automations for different type of workflows. It gives you an ability to orchestrate and automate many tedious tasks like sending out e-mails on some event. Zapier offers many options that can help you work more efficiently and effectively with simple workflows' automation.

Zapier offers [multiple apps and integrations](https://zapier.com/apps) that you can use to automate your workflow. It's a perfect solution for marketing automations and other repetitive task that can simply be done automatically and save your time. One of such tasks can be automatic image generation.

## How can I use image automation?

If you are creating multiple similar images manually, then image automation will be your lifesaver. Instead of creating and changing the image every time you need to save it or send it in an email, you can simply create a template and generate images with different content automatically. 

How does it work? You will see an example below with RenderForm image template and Zapier automation. The general idea is to **automatically replace selected elements from your image with new content**. Imagine that instead of re-creating the same image, you can personalize it automatically by, for example, filling up a short form or adding data to Excel. We will work on that example below.


## Image automation with Zapier

Zapier is a great choice for image automation. The setup is intuitive, and it requires no codding nor specific knowledge. There are only 3 steps here: add trigger event in Zapier, create image template, and setting up the automation. Are you ready to try it now? 

### Event trigger

We will start with creating a trigger event in Zapier. This event will trigger an action of generating an image. It can be anything, a new lead, new email received, scheduled meeting, new ticket, request. Anything you can think of. 

![Create event with Tally](/blog/zapier-trigger-event.jpeg)

Let's create a new Zap. Our trigger event will be a **new form submission from [Tally](http://tally.so)**. To connect your Tally account with Zapier, simply search in on the list in trigger block, log in and select the form you want to use. Confirm and allow Zapier to test the trigger to make sure it can retreive all data correctly. The whole trigger setup will take max 1 minute.

**How will it work?** 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)

### Create image template 

Now it's time to create our image template in RenderForm. One element in your image template, for example text, is one component that can be editable via Zapier 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)

Using Zapier automation, I will be generating a new image replacing details like price, hotel name or hotel image with details from the Tally form submission. 

### Action - Create image

The last step is to **add RenderForm image generation to Zapier**. We will use *Create image* action, meaning that we want to generate a new image when trigger event is called.

Search for RenderForm in action block in Zapier and select the action type. Log in to your account and add your API Key (you can find it in [your account](https://renderform.io/console/api-keys/) section in RenderForm).

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

When it is done, we need to configure the process of image generation, **define what and how elements should be replaced** when there is a new form submission on Tally. Those are called *Changes* in Zapier.

There are two things we are setting up:

- **RenderForm component** - on the left side, we need to type the component name (we set it in RenderForm template) and the component type after a dot. For example, `price.text` which means that we will be replacing *price* component which is of type `text`.
- **Tally form element** - on the right side, we select from which Tally form element we will take data to replace the image component.

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

### Run automation to generate image

And the automation is ready! Save the Zap and let Zapier test it for you. As a result, you will see an **image generated from a recently submitted form**. Try submitting another form with different data and check how RenderForm generates a new image for you automatically. 

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

And voilà! We are done! Remember to **turn on your Zap to make it work and listen for new submissions from Tally**.
Preparing the whole Zap took **less than 5 minutes**. This is really a great strength of no-code automations and tools like Zapier!

You can try to create other Zaps and enhance them with batch image generation with RenderForm. Sky is the limit, use your imagination to attract more customers or increase satisfaction level with image personalization.


## Resources

- [List of component properties](/docs/general/components/)
- [Documentation: Dynamic og:images](/docs/general/dynamic-og-images/)
- [Zapier](https://www.zapier.com)


Image Generation with Zapier



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

Zapier

Image Generation with Zapier

What is Image Generation?