
## 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 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.


<ZapierPlugin/>



## Quick Start: Create custom image with Zapier

Search for 'RenderForm' in Zapier app directory and choose 'Create Image' action.
Choose your template and in 'Changes' section put properties which would you like to change.

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

List of template properties you can check in **Form Editor** tab in a template **Preview** window.
To open **Form Editor** tab, click **Preview** button on your template and switch tab to **Form Editor** on the top.

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

See [the list of all template properties](/docs/general/template-properties/).

## 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 template properties](/docs/general/template-properties/)
- [Documentation: Dynamic og:images](/docs/general/dynamic-og-images/)
- [Zapier](https://www.zapier.com)


Image Generation with Zapier


[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.

- **Template Property** - here you put [template property](/docs/general/template-properties/) from RenderForm template
- **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


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 no-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.

The following article 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.

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/).
Get a sample data set for RenderForm and Airtable to test your image or PDF rendering workflow here: [Airtable Image Generation Data Set](https://airtable.com/app5hKEJ44tNj56PE/shrleyl74FtcanXfd).

## 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 edited via Airtable automation.

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

## Step 1: Add Extension

In Airtable, open '**Extensions**' tab in the top-right corner and click '**Add an extension**' button. Search for '**RenderForm**' in the popup, click '**Add**' button and confirm that you want to add a new app to your Airtable base.

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

You can close the initial full-screen popup window and continue with the configuration.

## Step 2: Configure Airtable extension

After adding the extension, you will need to copy your **API Key** from RenderForm. You can find it in the '[API Keys](https://renderform.io/console/api-keys/)' tab in RenderForm.

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

Click a small cog button, paste your **API Key** and click '**Done**' button.

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


Now, you can choose:
- **Image Template** used for image generation,
- **Table** from which you want to take data,
- **Output Field** where you want to save images.

**Changes** section allows you to choose which fields you want to update in your image template.

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

## Step 3: Run script to generate images

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

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

You can now create a '**Gallery**' view to see all generated images in a larger format.

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


## 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.
- Occasionally, the extension may fail due to incorrect data in your table. If you encounter any issues, you can try to exclude field by field to find the problematic one and fix it.


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 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)


Zapier

Make.com

Integrately

WordPress Plugin

Mailchimp

Airtable Extension

Google Sheets

Excel/CSV file

HTML Embed

REST API

RenderForm CLI

Webhooks

HTML to Image

Posts with #integration