
## Introduction

In this tutorial, you will learn how to embed RenderForm image generator into any website into which you can add HTML code.
This is useful if you want to allow your users to generate images directly from your website, or you want to simplify your workflow by generating images directly from your website.
The integration uses the Live Preview sharing feature and `iframe` HTML tag to embed the image generator in your website.

![Live Preview](/blog/embed/live-preview.jpeg)

## Enable Live Preview sharing

First, you need to enable Live Preview sharing for your template. To do this, find the template you want to embed in your website and open the **Preview popup**, then click on the **Settings** tab and enable the **Live Preview** sharing.

![Enable Live Preview](/blog/embed/enable-live-preview-sharing.png)

Copy the link from the **Live Preview** section. This link will be used to embed the image generator in your website. **Remember to save the changes.**

> You can verify if the Live Preview sharing is enabled by opening the link in your browser. You should see the image generator with the template you want to embed in your website.

## Embed the image generator in your website


To embed the image generator in your website, you need to use the following HTML code:

```html
<iframe
  src="https://renderform.io/share/live-preview/?i=XXXXXXXXXXXXXXXXX"
  width="100%"
  height="500px"
  frameborder="0"
>
</iframe>
```

Put the HTML code in the place where you want to embed the image generator in your website.
Replace the link for the `src` attribute with the link that you copied from the **Live Preview** section.

## Image generator embedded in website

As a result, you will see the image generator embedded in your website. You and your users can use the image generator to generate images for the given template.

![Embed Image Generator on website](/blog/embed/rendering-images-on-website.png)

Your API Key is not exposed to the public, so you can safely embed the image generator in any public website to allow your users to generate images for the given template.
> Please be aware that anyone who has access to the link can generate unlimited images for the given template, and this can lead to excessive usage of your RenderForm credits until the Live Preview sharing is disabled.

## Customizing the Live Preview properties

To make your Live Preview more user-friendly, you can hide some properties from the Live Preview. This is useful if you want to allow your users to customize only specific parts of the template and hide the complexities of the template from them.

![Lock component](/blog/embed/locking-components.png)

To hide a property from the Live Preview, you need to lock the component in the template editor. Open the template editor and click on the property you want to hide, then click on the **Lock** button to lock the component, and save the changes.

## Conclusion

In this article, you learned how to embed RenderForm image generator thanks to a Live Preview sharing feature. It's extremely useful if you want to improve your or your users' workflow by generating images directly from your website.
Integrations via `iframe` are simple and can be used in any website that allows you to add HTML code. You can also customize the Live Preview properties to make the image generator more user-friendly.

If you have any questions or need help with the integration, feel free to contact us at [contact@renderform.io](mailto:contact@renderform.io)!


How to generate images on your website


[Zapier](https://zapier.com/) is a leading no-code automation platform that allows you to connect your favorite apps and automate repetitive tasks. Whether it’s sending emails, updating databases, or generating images—Zapier helps you build powerful workflows without writing a single line of code.

It supports [hundreds of app integrations](https://zapier.com/apps), making it a great solution for automating marketing, sales, and admin tasks. One such use case? **Automated image generation** using RenderForm.

With just a few clicks, you can set up a Zap that generates images dynamically using your own templates—or even take a screenshot of a website.

<ZapierPlugin/>

---

## Quick Start: Create a Custom Image with Zapier

To get started, search for **RenderForm** in the Zapier App Directory and select the **"Create Image"** action. Choose the template you'd like to use, and in the *Changes* section, define which elements should be replaced dynamically.

![Render image with Zapier](/blog/zapier/render-image-with-zapier.jpeg)

To find the list of editable properties for your template, open the template preview in RenderForm and switch to the **Form Editor** tab.

![Get template properties for image rendering](/blog/zapier/get-image-properties-for-image-rendering.jpeg)

For a complete guide to template properties, check out the [RenderForm docs](/docs/general/template-properties/).

---

## Why Automate Image Generation?

If you're manually creating dozens of similar images—like product cards, social banners, or personalized emails—automation can save you hours of repetitive work. Just set up a template once and let Zapier take care of generating images for new data entries.

The basic idea is to automatically **replace parts of your image template with new content**, such as names, prices, images, or dates. This is perfect for:

- Personalized email campaigns
- E-commerce product visuals
- Blog or social media graphics

Let’s walk through an example using RenderForm + Zapier + Tally forms.

---

## How to Automate Image Generation with Zapier

Zapier makes automation easy. In this case, we’ll set up a three-step workflow:

1. Set a trigger (e.g. a new form submission),
2. Create an image template in RenderForm,
3. Configure the image generation in Zapier.

Let’s go through it step by step.

### Step 1: Set the Trigger Event

We’ll start by creating a **trigger** that will launch the image generation process. This can be anything—from a new lead or calendar event, to a form submission or database update.

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

In this example, our trigger will be a **new form submission from [Tally](https://tally.so)**.

1. In Zapier, create a new Zap.
2. Set **Tally** as the trigger app.
3. Connect your Tally account and select the form you want to use.
4. Let Zapier test the connection to make sure data can be pulled correctly.

**What’s the use case?** I created a simple Tally form that gathers details needed to create a hotel offer for a client—like hotel name, dates, price, and availability.

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

---

### Step 2: Design Your Image Template in RenderForm

Next, we’ll create an image template in RenderForm. Each editable field in your template—like `price`, `title`, or `image`—will act as a dynamic component that Zapier can update automatically.

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

In this example, I’ve created components for the hotel name, price, availability, and main image. Each time the form is submitted, these fields will be replaced with the corresponding values from Tally.

---

### Step 3: Create the Image in Zapier

The final step is to connect **RenderForm** to your Zapier workflow and configure the image generation.

1. Add a new action to your Zap.
2. Choose **RenderForm** and select the **"Create Image"** action.
3. Connect your RenderForm account using your [API key](https://renderform.io/console/api-keys/).

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

Now configure the image generation:

- **Component Name** – On the left side, enter the component name and type, e.g. `price.text` (to target the `price` component of type `text`).
- **Form Field** – On the right side, choose the corresponding Tally field that should populate the image component.

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

Repeat this process for each element you want to update dynamically in your image.

---

### Test and Run the Automation

Once your Zap is configured, save it and let Zapier run a test. If everything is set up correctly, you’ll get a **new image generated from your form submission**—complete with all the personalized details.

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

Don’t forget to **turn on your Zap** so it actively listens for new submissions.

That’s it! The entire setup takes just a few minutes, and the results can dramatically speed up your workflow.

---

## Ideas & Use Cases

Once you’ve got image generation working, here are a few creative ways to expand your workflow:

- Automatically generate social media graphics for new blog posts
- Create custom product cards with prices from Google Sheets or Airtable
- Generate dynamic banners for newsletter emails
- Use screenshots to document website changes or generate content previews

You can even **chain Zapier actions** together to upload generated images to Google Drive, send them via Slack, or publish them online.

---

## Resources

- [List of RenderForm Template Properties](/docs/general/template-properties/)
- [Dynamic OG Image Documentation](/docs/general/dynamic-og-images/)
- [Zapier – Official Website](https://zapier.com)

**Ready to try it out?** Head over to [Zapier](https:/)


Image Generation with Zapier


[Make.com](https://www.make.com/) (formerly known as Integromat) is a versatile automation platform that helps simplify and orchestrate your workflows. It serves as a central hub that connects hundreds of apps, making complex automation feel intuitive and accessible—even for non-technical users.

With an ever-growing library of [integrations](https://www.make.com/en/integrations)—including Google Workspace, Mailchimp, Shopify, Facebook, Etsy, Tally, and many more—Make.com allows you to seamlessly link tools you already use. Among these is **RenderForm**, which you can use to generate dynamic, personalized images automatically as part of your workflow.

Whether you're running marketing campaigns or sending personalized emails, **automated image generation** can save you time, boost consistency, and add a professional touch to your communication.

## Automating Images with Make.com

Make allows you to build custom workflows by chaining together multiple apps and services. In just three simple steps, you can set up a process to automatically create personalized images:

1. Define a trigger event (e.g. a submitted form),
2. Design an image template in RenderForm,
3. Set up your Make scenario to generate the image and deliver it.

Let’s walk through a practical example to show how it works.

### Step 1: Define the Trigger – Tally Form

First, you need to choose an **event that will trigger the automation**. This could be anything: a new user sign-up, a new entry in your Airtable base, a submitted Google Form, or in this case—a filled-out form in **Tally**.

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

For this example, I built a simple Tally form that collects all the data needed to create a hotel offer for a client: hotel name, travel dates, price, availability, and so on.

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

Once the form is submitted, the automation kicks in and sends the client a personalized email—including a dynamically generated image built from the submitted data.

### Step 2: Create an Image Template in RenderForm

Next, design your image template using the [RenderForm editor](https://renderform.io). Each editable field (like hotel name, price, or availability) becomes a **template component** that can be dynamically updated via automation.

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

In this case, I created template components such as `title`, `price`, and `availability`, all of which will be filled in automatically using data from the Tally form. For example, the "Price" field submitted in the form will replace the `price` component in the RenderForm template.

### Step 3: Configure Image Generation in Make.com

Now it’s time to tie it all together. Add the **RenderForm module** to your Make scenario.

Start by searching for **RenderForm** in Make’s app library and add it to your scenario. To connect your account, you’ll need your API key, which can be found in your [RenderForm account settings](https://renderform.io/console/api-keys/).

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

With the module connected, configure the image generation step:

- **Select Template** – Choose the image template you created earlier.
- **Changes Section** – Map form inputs (from Tally) to the appropriate components in your RenderForm template.

Each template component (like `title` or `price`) must be assigned a corresponding value from the form submission.

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

For example, if your template has a component named `price`, you would link it to the `Price` field from your Tally form submission. This ensures that each form entry results in a fully customized image.

### Step 4: Run the Automation

Once everything is configured, it’s time to run your automation.

**Each time someone submits the Tally form**, Make.com will send the data to RenderForm, which generates an image using your predefined template. The image can then be sent automatically via email or used in any number of follow-up actions.

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

You can download the generated image, save it to the cloud, or attach it directly to your email—all as part of your automated scenario.

**Imagine generating hundreds of images, all from a simple form!**

## Use Cases for Automated Image Generation

Automated image generation is especially useful for teams and creators who need to generate many consistent visual assets quickly. Here are some practical examples:

- **Marketing campaigns** – Create dynamic visuals personalized for each recipient.
- **Email personalization** – Automatically generate unique images for email campaigns. [Learn how it works with Mailchimp](/blog/posts/personalized-emails-mailchimp/).
- **Dynamic blog covers** – Use templates to create visually coherent post covers. You can even [generate images from a spreadsheet](/blog/posts/how-to-create-many-images-from-spreadsheet/).
- **Image hosting** – Automatically store and serve your generated images.

Whether you're a solo entrepreneur or part of a larger marketing team, automating image generation saves time, reduces manual work, and improves consistency across your brand visuals.

---

**Try RenderForm for free** and explore how it can revolutionize your image workflows with simple tools and powerful automation features.


Image Generation with Make.com


Being consistent with blog post featured images can be a challenging task. Creating and uploading images for every blog post can take a lot of time unless you use a predefined template and image automation tools.

RenderForm offers a WordPress plugin that automatically generates a featured image for any post or page on your site. It's simple to use, and you can generate high-quality images with just a few clicks.

## Create your template

To get started, create your image template in RenderForm. You will use it as a template for featured images throughout your WordPress posts and pages.

I created a simple image template with 3 components: main text, overlay and image. They will be changing for different posts. Main text will show the post title and image present the post character in the background.

Let's name our main text as `title` and image as `image`. This is just a template, so the actual text and image are not relevant here, but make sure you name each element correctly. You will need to identify the components while generating new images with different values.

![RenderForm: sample image template](/blog/wordpress/wordpress-featured-photo-template.jpeg)

[Learn more about creating great blog post covers.](/blog/posts/tips-for-great-blog-post-covers/)

## Install RenderForm plugin

Once your template is ready, it is time to set up the image automation in WordPress.

First, [download the plugin](/blog/wordpress/wordpress-plugin.zip).
Next, go to **Plugins** section in WordPress admin and **Add new**. Finally, choose the downloaded .zip on **Upload plugin**, and install the plugin.

![RenderForm plugin installation in WordPress](/blog/wordpress/install-wordpress-plugin.gif)

Activate the plugin and then the installation process in completed.

Next, you need you add your **API Key** to the plugin settings. You will find it in your RenderForm account under your profile or in template details.

![RenderForm API Key](/blog/wordpress/renderform-api-key.png)

Paste your API key into RenderForm plugin settings and save it. You can find this option in **Settings / RenderForm**.

![RenderForm plugin setting](/blog/wordpress/wordpress-api-key-settings.jpeg)

## Render image in WordPress

Now it is time to render an image for your blog post. Open a blog post that you want to create an image for, and in **Post** section on the right side, scroll down to see RenderForm plugin.

Follow the steps below to generate a featured image for your blog.

1. From the list of RenderForm templates, select the template you want to use in your blog post.
2. In Changes, choose elements that you would like to replace. Select properties like our `title.text` and enter new text as value. The same with `image.src` that will replace the image with URL value.

![RenderForm image properties](/blog/wordpress/wordpress-properties-featured-photo-sidebar.jpeg)

3. Click **render image** to see the results. **Use as featured image** will apply the image as main post image.

![RenderForm rendered image](/blog/wordpress/wordpress-rendered-featured-photo-sidebar.jpeg)

Publish your post to see your beautiful, hassle-free automatically generated image.

![RenderForm rendered image preview](/blog/wordpress/wordpress-rendered-featured-photo-preview.jpeg)


## Automate your image generation

With RenderForm plugin created specifically for WordPress, you can generate beautiful images for your blog post covers. Create consistent, template-based images in your page style without time-consuming manual tasks.

Have fun with our image generation tool and create beautiful cover images for your WordPress site. [Get started for free](/register) and automate your image generation for blog post and more with RenderForm.


Featured photos for WordPress blogs


[Integrately](https://integrately.com/) is a no-code integration platform that allows you to automate your workflows, similarly to Zapier and Make.com. You can connect your apps and services, and create workflows that will automate your tasks. You can also create your own apps and services, and share them with other users.

In the following article, we will show you how to use Tally and Integrately to generate images. But you can replace Tally with any other service from app directory.

## Prepare a Tally form

Tally is a no-code form builder that allows you to create forms and collect data. You can use Tally to create a form that will be used to generate images.
For this example, we created a form that will allow users to enter hotel name, price, rating, distance and availability date. 
We will also add a file upload field that will allow users to upload the hotel image.

![Sample Tally form](/blog/integrately/tally.png)

## Prepare a RenderForm template

In this example, we will use one of a public RenderForm template named 'Hotel card'. You can find all public templates [here](/console/templates/).

![Hotel card](/blog/integrately/image-template.jpeg)

The selected template comes with a set of properties to change. You can use these variables to populate the template with data from your form. You can edit or add your own components to the template 
using Template Editor.

![Template properties](/blog/integrately/template-properties.png)

## Connect RenderForm via Integrately

In Integrately, start with selecting your trigger of your choice and as a second app choose '**RenderForm**' in and select '**Create image in RenderForm**' action. 

![Render image with Integrately](/blog/integrately/apps-selector.png)

Next, put **Template Identifier** to **Template** input, you can find it in '**Preview**' -> '**Template Details**' tab in RenderForm. 
In **Changes** section, put values for the selected template properties. In this example, we used values from Tally form created previously.  

![Integrately configuration](/blog/integrately/integrately-configuration.png)

List of template properties you can find in '**Preview**' -> '**Form Editor**' tab in a template preview window. 

![Get template properties for image rendering](/blog/integrately/template-properties.png)

Now, you can enable automation and test it!

### Create image from Tally submission

Now you can fill the Tally form and submit it. You will see the image has been rendered and saved in your RenderForm account.

![Rendered image in RenderForm](/blog/integrately/my-requests.png)

And voilà! We are done!

![Rendered Hotel Card](/blog/integrately/rendered-image-background.jpg)

You can try to create other workflows 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.


Image Generation with Integrately


Airtable is a powerful no-code platform for building collaborative apps that let you customize workflows, streamline teamwork, and deliver ambitious outcomes—without writing a single line of code. While it’s best known for its spreadsheet-style data management, Airtable also supports a wide range of integrations and scripting tools that can help automate even the most complex workflows.

In this guide, you’ll learn how to automate **image generation** using Airtable, which is especially useful when creating many visual assets based on similar content structures. Rather than editing images one by one, you can automatically generate them in bulk using a combination of **RenderForm** and Airtable.

If you're comfortable with JavaScript, check out our [Airtable Script to gain full control over image and PDF rendering](/blog/posts/image-generation-with-airtable/). You can also try it out hands-on using this [sample Airtable base for image generation](https://airtable.com/app5hKEJ44tNj56PE/shrleyl74FtcanXfd).

## Create Your Image Template

Before diving into the Airtable setup, you'll first need to prepare your image template using [RenderForm](https://renderform.io). Your template acts as a visual blueprint—each editable element (like a text box or image placeholder) can be dynamically updated through Airtable.

![Create image template in RenderForm](/blog/airtable-extension/renderform-hotel-card.png)

## Step 1: Add the RenderForm Extension

Open your Airtable base and navigate to the **Extensions** panel in the top-right corner. Click the '**Add an extension**' button and search for '**RenderForm**'. Select it, click '**Add**', and confirm the installation to proceed.

![Find Airtable RenderForm extension](/blog/airtable-extension/find-renderform-airtable-extension.png)

You can now close the full-screen introduction window to begin configuring the extension.

## Step 2: Configure the RenderForm Extension

After installing the extension, the next step is to connect your RenderForm account. Copy your **API Key** from the [RenderForm API Console](https://renderform.io/console/api-keys/) and paste it into the Airtable extension settings.

![Copy RenderForm API Key](/blog/airtable-extension/renderform-api-key.png)

Click the small cog icon in the extension panel, paste your **API Key**, and hit '**Done**'.

![Paste image generation script to Airtable](/blog/airtable-extension/renderform-airtable-extension-settings-button.png)

Once connected, you’ll be prompted to configure the extension by choosing the following:

- **Image Template** – Select the template you created in RenderForm.
- **Table** – Choose the Airtable table that contains the data for your images.
- **Output Field** – Select or create a field where the generated image URLs will be stored.

The **Changes** section lets you map specific fields from Airtable to components in your template—for example, linking a 'Hotel Name' column to a text field in the image.

![Configured RenderForm extension for Airtable](/blog/airtable-extension/configured-renderform-extension-for-airtable.png)

## Step 3: Generate Your Images

With everything set up, it’s time to generate your images. Simply click the '**Render**' button in the extension panel. RenderForm will process your records and automatically populate the output field with links to the generated images.

![Click render to generate images](/blog/airtable-extension/click-render-to-generate-images-in-airtable.png)

For easier viewing, you can switch to a '**Gallery**' view in Airtable to browse through your image set in a visual layout.

![Airtable Records for Image Generation](/blog/airtable-extension/created-images-in-airtable.png)

## Troubleshooting Tips

If you run into issues during image generation, here are a few common troubleshooting steps:

- **Insufficient credits**: Make sure your RenderForm account has enough credits. Check your usage in the [RenderForm dashboard](https://renderform.io/console/).
- **Invalid API Key**: Double-check that you've copied and pasted the correct API Key from RenderForm.
- **Invalid or incomplete data**: If the script fails unexpectedly, the issue may be with the data in your table. Try excluding fields one by one to isolate and fix the problem.

You can also open the script editor’s **console logs** to view detailed error messages for each failed render attempt.

---

By integrating RenderForm with Airtable, you unlock a scalable way to generate branded visuals, marketing assets, or even personalized user content—without leaving your Airtable workspace. Whether you're working solo or collaborating across teams, this workflow can save countless hours and bring consistency to your creative output.


Image Generation with Airtable Extension



Airtable is a popular low-code platform for building collaborative apps, customize your workflow, collaborate, and achieve ambitious outcomes. Besides its main feature, which is a spreadsheet-like data management, Airtable offers many integrations and scripts which can help you automate your workflows.

In the following article, I will show you how to automate image generation using Airtable. Automation of image generation is a great solution when you have to create multiple images with similar content, based on a template. **Instead of editing each image manually, you can create them automatically in bulk**, with RenderForm and Airtable help.

Here you can get a data set used in this tutorial: [Airtable Image Generation Data Set](https://airtable.com/app5hKEJ44tNj56PE/shrleyl74FtcanXfd)
If you know how to code you may also want to use our [Airtable Script to get a full control over image and PDF rendering process](/blog/posts/image-generation-with-airtable/).

## Create image template

Before we start with Airtable configuration, prepare your image template in RenderForm. Remember that one element in your image template, for example text, is one component that can be editable via Airtable automation.

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

## Step 1: Add an Airtable script

In Airtable, open 'Apps' tab in the top-right corner and click 'Add an app' button.

![Open Airtable apps tab](/blog/airtable/open-airtable-apps.png)

Search for 'script' in the popup and add new 'Scripting' app.

![Find blank script](/blog/airtable/choose-blank-script.png)

### Script for image generation.

Copy and paste the script below into the script editor.

```javascript
let config = input.config({
    title: 'RenderForm settings',
    description: 'Configure your API Key, Template identifier, an output field for rendered images and your change field columns. The script takes changes from fields that start with "rf." prefix. Field names must also contain component and property, e.g.: "rf.my_text.text", "rf.my_image.src", "rf.my_component.property".',
    items: [
        input.config.text('apiKey', {
            label: "RenderForm: API Key"
        }),
        input.config.text('templateId', {
            label: "RenderForm: Template ID",
            description: "You can override a template for each record with 'rf._template' column with template identifers."
        }),
        input.config.table('selectedTable', {
            label: 'Your table with data'
        }),
        input.config.field('imageUrlField', {
            label: 'Your field where to put rendered Image URLs',
            parentTable: 'selectedTable',
        })
    ]
});

const table = config.selectedTable;
const rootQuery = await table.selectRecordsAsync();
const baseUrl = "https://get.renderform.io/img/";
const apiKey = config.apiKey;
let templateId = config.templateId;

let renderedImagesCount = 0;

for (let record of rootQuery.records) {
    const recordValue = rootQuery.getRecord(record.id);

    let requestParams = {
        apiKey,
        output: "json"
    };
    for (let field of config.selectedTable.fields) {

        if (field.name === "rf._template") {
            const recordTemplateId = recordValue.getCellValue(field.name);
            if (recordTemplateId) {
                templateId = recordTemplateId;
                continue;
            }

        }

        if (field.name.startsWith("rf.")) {
            const value = recordValue.getCellValue(field.name);
            const property = field.name.replace("rf.", "");
            requestParams[property] = value;
        }
    }

    // @ts-ignore
    const params = new URLSearchParams(requestParams).toString();
    const requestUrl = baseUrl + templateId + "?" + params;
    const apiResponse = await fetch(requestUrl);
    const data = await apiResponse.json();
    const imageUrl = data.href;

    if (renderedImagesCount === 3) {
        const userConfirmation = await input.buttonsAsync(
            'We rendered 3 images so far. Please go to RenderForm and confirm that your images are rendered correctly. Click "Stop" to cancel rendering and fix your template or Airtable data or "Continue" to continue images rendering.',
            [
                { label: 'Stop', value: 'stop', variant: 'danger' },
                { label: 'Continue', value: 'continue' },
            ],
        );
        if (userConfirmation === 'stop') {
            break;
        }
    }
    renderedImagesCount++;

    if (!imageUrl) {
        console.error("Error during render.", requestUrl);
        continue;
    }
    console.log("Rendered:", imageUrl);
    await table.updateRecordAsync(record, {
        [config.imageUrlField.name]: imageUrl,
    });
}
```

After pasting the code above, you can close the popup and click 'Finish editing'.

![Finish editing](/blog/airtable/click-finish-editing.png)

Now, you can follow the script configuration.
Add your **RenderForm API Key and Template ID**, select table with your data and choose field where to put rendered image URLs.

![Paste image generation script to Airtable](/blog/airtable/paste-renderform-script.png)

You will find your RenderForm API Key in [your account](https://renderform.io/console/api-keys/) section. Template ID is the identifier on the right panel of your template editor.

## Step 2: Configure your data

The script takes changes for your images from fields that start with `rf.` prefix.
Field names must also contain component name and its property, e.g.:

| Template Editor Component ID | Component Type | Airtable column name |
|------------------------------|----------------|----------------------|
| my_image                     | Image          | rf.my_image.src      |
| my_text                      | Text           | rf.my_text.text      |
| my_rating                    | Rating         | rf.my_rating.value   |
| my_qr_code                   | QR Code        | rf.my_qr_code.value  |

If you use HTML Templates, then you can skip the component part and use only properties, e.g.: `rf.my_property`.

![Airtable Records for Image Generation](/blog/airtable/airtable-records.png)

## Step 3: Run script to generate the image

Once you have your data, you can start the script! Click 'Run' and see how your images are generated! The links to the images will appear in the selected column of your spreadsheet.

![Airtable Records for Image Generation](/blog/airtable/generated-images-in-airtable.jpeg)

## Troubleshooting

If you encounter any issues with the script, you can check the console logs in the script editor. The script logs information about each rendered image, and in case of an error, it will be displayed in the console.
- The most common issue is having not enough credits on your RenderForm account. You can check your credits in the [RenderForm console](https://renderform.io/console/).
- The second most common issue is a wrong API Key. Make sure you copied the correct values from RenderForm.


Image Generation with Airtable Script


Google Sheets is a web-based online spreadsheet editor with multiple options and customization features that help you automate your workflow. Using simple scripts, we can add external automations to your Google Sheet spreadsheet, which is a great option to improve your data management.

Today, I will show you how to **automate image generation using Google Sheet spreadsheet and a custom image generation script**.

## Create image template

Before we start with Google Sheets script configuration, **prepare your image template in RenderForm**. Remember that one element in your image template, for example text, is one component that can be editable via Google Sheets automation.

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

## Step 1: Add Google Apps script

In Google Sheets, open 'Extensions' menu in the top and click 'Apps Script' option.

![Open Google Sheets extension](/blog/google-sheets/open-apps-script.png)

Google Sheets will redirect you to a script editor in a new window.

### Script for image generation.

Copy and paste the script below into the script editor.

```javascript
function onOpen() {
  var spreadsheet = SpreadsheetApp.getActive();
  var menuItems = [
    { name: 'Render images...', functionName: 'generateImages' }
  ];
  spreadsheet.addMenu('RenderForm', menuItems);
}

String.prototype.addQuery = function(obj) {
  return this + Object.keys(obj).reduce(function(p, e, i) {
    return p + (i == 0 ? "?" : "&") +
      (Array.isArray(obj[e]) ? obj[e].reduce(function(str, f, j) {
        return str + e + "=" + encodeURIComponent(f) + (j != obj[e].length - 1 ? "&" : "")
      },"") : e + "=" + encodeURIComponent(obj[e]));
  },"");
}


function generateImages() {
  var apiKey = Browser.inputBox('RenderForm API Key', 'Please enter the RenderForm API Key', Browser.Buttons.OK);
  try {
    checkApiKey(apiKey);
  } catch (e) {
    Browser.msgBox("Incorrect API Key", "Please check again if your API Key is valid.", Browser.Buttons.OK);
    return;
  }


  try {
    var sheet = SpreadsheetApp.getActiveSheet();
    var sheetData = sheet.getDataRange().getValues();
    var renderFormElements = [];
    var renderFormUrlIndex = sheetData[0].indexOf('rf.image_url');

    if (renderFormUrlIndex === -1) {
      Browser.msgBox("Missing output column", "Please add column named 'rf.image_url' in order to get image results.", Browser.Buttons.OK);
      return;
    }


    var template = Browser.inputBox('RenderForm Template', 'Please enter the RenderForm Template Identifier', Browser.Buttons.OK);

    var firstRow = sheetData[0];
    for (var columnIndex = 0; columnIndex < firstRow.length; columnIndex++) {
      var columnName = sheetData[0][columnIndex];
      var isRenderFormColumn = columnName.startsWith("rf.");
      var isRenderFormImageUrlColumn = columnName === "rf.image_url";
      if (isRenderFormColumn && !isRenderFormImageUrlColumn) {
        var renderFormElement = {
          columnIndex: columnIndex,
          name: columnName
        };
        renderFormElements.push(renderFormElement);
      }
    }
  } catch (e) {
    Browser.msgBox("Invalid spreadsheet", "Please check again your spreadsheet column.", Browser.Buttons.OK);
    return;
  }

  Browser.msgBox("Rendering is starting", "Images render will take a while, please do not edit spreadsheet until the script finish.", Browser.Buttons.OK);
  for (var rowIndex = 1; rowIndex < sheetData.length; rowIndex++) {
    try {
      var row = sheetData[rowIndex];
      var requestParams = {
        apiKey,
        output: "json",
      };

      for (var element of renderFormElements) {
        var columnIndex = element.columnIndex;
        var name = element.name;
        var value = row[columnIndex];
        var property = name.replace("rf.", "");
        requestParams[property] = value;
      }

      var renderFormUrlCell = sheet.getRange(rowIndex + 1, renderFormUrlIndex + 1);
      renderFormUrlCell.setValue("Loading...");
      var imageUrl = renderImage(template, requestParams)
      console.log("Rendered:", imageUrl);
      renderFormUrlCell.setValue(imageUrl);
    } catch (e) {
      if (renderFormUrlCell) {
        renderFormUrlCell.setValue("Error: " + e);
      }
    }
  }
  Browser.msgBox("Completed", "RenderForm finished rendering your images.", Browser.Buttons.OK);
}



function checkApiKey(apiKey) {

  var request = {
    'method': 'get',
    'contentType': 'application/json; charset=utf-8',
    'headers': {
      'x-api-key': apiKey
    }
  };

  var response = UrlFetchApp.fetch('https://get.renderform.io/api/v1/organization', request);
  var json = response.getContentText();
  var responseBody = JSON.parse(json);
  return responseBody.name;
}

function renderImage(templateId, requestParams) {
  var baseUrl = "https://get.renderform.io/img/";
  var requestUrl = (baseUrl + templateId).addQuery(requestParams);
  var response = UrlFetchApp.fetch(requestUrl);
  var json = response.getContentText();
  var responseBody = JSON.parse(json);
  return responseBody.href;

}
```

![Paste image generation script to Google Apps](/blog/google-sheets/paste-image-generation-google-script.png)

After pasting the code above you click 'Run' and follow the Google instructions which may appear.

## Step 2: Configure your data

Let's go back to the tab with your data in Google Sheets. Create a new column in your spreadsheet called `rf.image_url`. RenderForm will generate image URLs basing on your data, and put the links there.

The script will retrieve data from columns that start with `rf.` prefix, and it will replate them in selected components while generating images.

Column names must also contain image component and its property, e.g.:

| Template Editor Component ID | Component Type | Google Sheets column name |
|------------------------------|----------------|---------------------------|
| my_image                     | Image          | rf.my_image.src           |
| my_text                      | Text           | rf.my_text.text           |
| my_rating                    | Rating         | rf.my_rating.value        |
| my_qr_code                   | QR Code        | rf.my_qr_code.value       |

![Google sheets for Image Generation](/blog/google-sheets/image-generation-data.png)

If you use HTML Templates, then you can skip the component part and use only properties, e.g.: `rf.my_property`.

## Step 3: Run your script

Once your data is ready, you can **start the script**! Click 'RenderForm' and click 'Render images...'.

![Start image rendegin in Google Sheets](/blog/google-sheets/start-rendering.png)

RenderForm script will ask you for your **API Key and Template Identifier**. You will find your RenderForm API Key in [your account](https://renderform.io/console/api-keys/) section. Template ID is the identifier on the right panel of your template editor.

![Start image generation in Google Sheets](/blog/google-sheets/put-api-key.png)

Thereafter, the script will start generating images and put the image links to the `rf.image_url` column. This process may take a while, please do not edit the spreadsheet until the script finish.

![Generated images in Google Sheets](/blog/google-sheets/rendered-images.png)


Image Generation with Google Sheets

Meta Link is a way of accessing and generating images on demand without using any fancy tools. You only need to
edit your HTML code. Add a few magic links to your `<head/>` and you are good to go.

![Automatic blog post generation for social media](/docs/automatic-cover-generation-for-blog-posts.jpg)

## How to configure?

Configuration is simple and does not require any special skills nor WordPress plugins.

1. Open Wordpress admin panel
2. Expand Appearance menu on the left side
3. Open Theme Editor
4. On the right side choose 'header.php' file
5. Paste your configuration code into editor
6. Click 'Save changes' on the bottom


![Wordpress: Automatic Social Image Previews](/docs/instructions/wordpress-automatic-social-image-previews.png)

> Configuration code must be pasted between `<head>` and `</head>` tags.


## Test configuration

Open our [Open Graph Preview Tool](https://renderform.io/tools/twitter-card-preview-tool/) and paste url to your
blog post and see if the image is correctly generated.


### General Meta Link Example
```html
<head>
  <meta
    property="og:image"
    content="https://get.renderform.io/og/TEMPLATE_ID.jpg?url=YOUR_BLOG_POST_URL">
  <meta
    name="twitter:image"
    content="https://get.renderform.io/og/TEMPLATE_ID.jpg?url=YOUR_BLOG_POST_URL">
    
</head>
```


### Resources

- [Documentation: Dynamic og:images](/docs/general/dynamic-og-images/)

Dynamic Social Images for Wordpress


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 template properties](/docs/general/template-properties/)
- [Make.com](https://make.com)


Posts tagged #integration