
Creating leaderboard or ranking images can be a repetitive and time-consuming job. You need to find or create a template, add the data, and then export the image. And then repeat on different occasions. Or even worse, create such an image manually every time. If you create many leaderboard images, it can be a tedious task. 

In this tutorial, we will show you how to automate the process of creating leaderboard and ranking images using RenderForm template editor and a simple spreadsheet. With that information, you will be able to create a new leaderboard image in just a few seconds!

## Create leaderboard image template

First, we need to **create a template** for our leaderboard or ranking image. For that, log in to RenderForm and create a template of your choice.

The canvas editor will give you all the options that you can use in your leaderboard image template. Add background, player names, photos, and their score or even star rating!

![Leaderboard template created in RenderForm](/blog/leaderboard-template.png)

When creating a template, name the elements of your image so that you can easily identify them later. For example, you can name the player's name as `player_name` and the player's score as `player_score` instead of `text_1`, `text_2`, etc.  

Save your template and that's all, you won't have to create the same image manually never again. Now, you are ready for automatic image generation!

## Generate new leaderboard image from a template

When your template is ready, now you can easily generate an image with different data. It will take just a few seconds!

Go to **Image Preview**, which shows the image and all elements that can be edited. It is a sort of form which you can use to quickly generate new images from your template.
Next, edit the template elements in the form. Simply replace the default text, e.g., `player_1_text` with the real player name, `Jon Snow`. Proceed with the rest of the elements and add the data for all the players.

![Leaderboard image preview](/blog/leaderboard-image-preview.png)

Once you added all the data, click **Render Now** at the bottom of the list. The image will be generated instantly, and you can see how the new data looks like in your template.

![Leaderboard rendered image from preview](/blog/leaderboard-image-preview-rendered.png)

And that's all, you can now **download the image or share it with your team**. To do that:
- right-click on the rendered image and use the *Save image* option
- use **Copy as browser link** option under the Render now button. This option will generate a link for your image and let you use it online!

## Generate multiple images with spreadsheet

If you need to create **multiple leaderboard or ranking images with different data at once**, then you can use the Spreadsheet automation. It allows you to generate multiple images at once with a few simple steps. 

### Create a spreadsheet with data

Our leaderboard template is ready, so now, we just need to create a spreadsheet with the data we want to display in it.

In the header row of your Spreadsheet, add the **names of the columns** that match the IDs of the elements in the template and their property type. You can copy all the names from the template preview.

For example, in my template I will use `player_1_text.text` where `player_1_text` is the ID of the text element and `.text` is the property of the element that we want to change.

![Spreadsheet with data](/blog/leaderboard-spreadsheet.png)

For a better overview, you can add a column with the image name (`_name`). This will be the **name of the image file** that will be generated.

In the next rows, add the data you want to display in the leaderboard images, so the players' names, photos, and scores. You can add as many rows as you want, each row will be a separate leaderboard image.

> Check out our [video tutorial about image automation using spreadsheet](https://www.youtube.com/watch?v=5jy9xteruno).

### Automate the image generation

Now, go to **Plugins** in RenderForm and choose **Spreadsheet** automation. There, choose the template you created to use it as a base for the leaderboard images.

![Spreadsheet automation plugin](/blog/plugins-spreadsheet.png)

Then, click on **Import** and pick the XLSX file with the data. Once it is loaded, you will see the preview of the images that will be generated with the data from your spreadsheet. In this step, you can check and confirm if everything is correct.

![Preview of auto-generated images](/blog/leaderboard-imported-spreadheet.png)

Finally, click on **Render** and wait for the images to be generated. Once they are ready, you can download them as a zip file with **Download** button.

![Ready to use ranking images with player details and scores](/blog/leaderboard-images.png)

## Conclusion

In this tutorial, we showed you how to automate the process of creating leaderboard or ranking images. With just a few clicks you can generate a new image from your template or multiple images with different data using a simple spreadsheet. Automate your workflow with image generation and save time for more important tasks!

Leaderboard and ranking image automation with RenderForm


The internet is flooding with all kinds of different websites. It can be difficult to get noticed— after all, there could be thousands of similar sites to yours. But don’t worry! There are ways to ensure yours will stand out and get the attention you want. See below for tips to ensure your success!

## Why Should Your Website Stand Out?

It is important to create a website that stands out from the rest. This will help you to promote your business and reach more customers. But how do you make your website unique and different from all the others?

Creating a standout website can involve many different things:

- Using colors that match the message 
- Creating an engaging and attractive design 
- Using graphics and illustrations that are appealing and informative
- Including information about yourself, your business, services, products, or anything else you want people to know

## Tip 1: Create your Website’s Own Unique Identity

In this first tip, we will explore one way to create a website that is unique and stands out from the crowd. Creating a **distinctive identity** is one of the most important steps for any company because it helps establish **credibility** with potential customers.

You want to make sure that when your website is competing in the digital space, it’s not just seen as another site that "happens to exist." You want it to **be recognized for its originality, creativity, and uniqueness.** So how do you do this? The answer is simple: by establishing your own unique identity.

Think of your product, service, or whatever else it is that you’re trying to promote. **What makes it special? How is it helping your customers solve their problems? How is it changing their everyday life?**

Once you have all the answers, it will be easier to create your unique identity and build it around those values. Cherish what makes you different, and your audience will recognize you from thousand other brands.

## Tip 2: Add Bright and Vivid Colors to Boost User Engagement & Arousal Level 

The right **color combination** can change a mood, provide a sense of calm, or increase arousal.
Different colors have different effects on people. For example, blue is an excellent color for creativity while green is good for relaxation.

Bright colors have been shown to stimulate higher brain activity and can help people feel more creative.

You need to think about what kind of **reaction** you want to get from your customer and match your colors accordingly. This small change can make a big difference!

### Tip 3: Create Emotion with Intriguing Imagery on your website

Imagery is one of the most important tools in web design. It can be used to create a certain mood, convey an emotion or describe an object more effectively. Images are also better at grabbing someone's attention instead of using text alone.

It is important to create a website with the right imagery to **intrigue and interest your visitors**. The images should **tell a story** or show the **personality** of the website. Images can do wonders for your website and, most importantly, makes it more memorable with their captivating nature.

There are many times when we visit a site and we remember what we saw rather than what we read. That’s because, with all the information out there, people often have too much to consume, so they only remember the more interesting bits from websites they have been on. Use it to your advantage!


Make Your Site Stand Out With Those 3 Tips!


Email marketing is a powerful tool for engaging customers and growing your business. Perhaps unsurprisingly, 
[99% of email users check their inbox every day](https://optinmonster.com/email-marketing-statistics/). By sending out an email newsletter, you can form a personal connection 
with your customers, increase brand loyalty, encourage repeat business, recapture abandoned shopping carts, and ensure 
your customers remember and think about your business regularly. Email is one of the best ways to communicate with
 your customers directly. What are you waiting for? Here are some of our top tips to help you craft an effective 
 email newsletter campaign!

## Use Modern Email Tools

Today, business owners have access to several valuable [email marketing tools](https://www.wpbeginner.com/showcase/best-email-marketing-services/). These tools can help you write 
and design engaging emails, keep track of your contacts, plan email sequences, and schedule your newsletters 
in advance. You can even use email tools to segment your email list based on customer shopping behavior 
or individual interests, creating highly targeted newsletters that resonate with each and every reader.

[RenderForm](https://renderform.io), for example, is great for generating unique email images that are personalized for every customer. 
You can use this tool with Mailchimp to include the customer’s name or other personal details within 
[personalized images in your emails](https://renderform.io/blog/posts/personalized-emails-mailchimp/). Tools like these make it easy to create emails that 
capture the attention of your customers and compel them to take action!


## Avoid Common Email Marketing Mistakes
As you start planning your first email newsletter, be careful to avoid common email mistakes. 
One of the biggest mistakes you can make in email marketing is to purchase mailing lists. 
While buying an email list may sound a lot easier and faster than collecting email addresses 
from website visitors, this can damage your reputation, hurt your email deliverability rates, 
and violate GDPR laws. Plus, most reputable email marketing services ban the use of purchased email lists.

Another common email mistake is to include more than one call to action (CTA) in a single email. 
A single strong CTA tells readers exactly what you want them to do next. For example, you 
might ask your reader to make a purchase, use a promotional code, enter a contest, or register for an event. 
Multiple CTAs will muddle your message and confuse your readers.

## Learn How to Write Engaging Newsletters

Are you struggling to write engaging, attention-grabbing newsletters? Privy.com suggests thinking carefully 
about the newsletters you read and why you enjoy some over others. Your favorite email newsletters 
likely offer some form of value, whether it’s entertainment, information, a sense of connection, or unbeatable deals. 
Try to keep your emails casual by writing as you talk. Pretend you’re writing to a friend rather than a boss at 
a corporate job, and don’t be afraid to let your personality come out!

## Follow Email Best Practices to Boost Your Open Rates

Email open rates describe the percentage of email recipients who actually open an email. 
[An average email open rate of about 21% is considered good](https://blog.hubspot.com/sales/average-email-open-rate-benchmark). If your emails are seeing much lower open rates, 
employ a few best practices to get more clicks. Campaign Monitor suggests several tricks to get your customers 
in the habit of opening and reading your emails:

- Stick to a consistent frequency, such as twice monthly or once a week.
- Send your emails during a time of day when your customers are likely to read them.
- Use a familiar ‘from’ name based on who your customers expect to hear from.
- Send out a welcome email every time someone subscribes to your email list.

Email newsletters can be great for growing your business. Because they’re so inexpensive, sending out 
a regular newsletter is a risk-free marketing strategy that can offer a very high return on your 
investment over time. Learn how to design and write engaging emails and get started on your first newsletter today!

Including high-quality, informational images in your newsletter can help you get your point 
across and compete with your readers’ shrinking attention spans. Use RenderForm to generate 
personalized email images that will resonate with each customer. 

[Register](/register/) for your free trial today!


> Photo via [Pexels](https://www.pexels.com/photo/person-using-macbook-374720/)


How to Grow Your Business With an Email Newsletter


Email campaigns are one of the most popular ways to reach subscribers and customers. Generic emails are useful for general announcements or new product updates, but they don't create any emotional connection between you and the email recipient. 

**Personalized images** are a powerful way to connect with your customers on a personal level. Tailoring the images of your emails to include the recipient's name, organization name or other personal details allows you to give them an experience that they are sure to enjoy. 

Check how to send **personalized email campaigns with Mailchimp and RenderForm.io** image generator in 3 simple steps!

![Email template with image](/blog/mailchimp-template.jpg)

## Create personalized images for your Mailchimp email campaign

RenderForm.io's easy template editor lets you create nice image templates and use them in your Mailchimp email campaign without any coding skills. Automate your email campaigns and improve your relations with your customers with those 3 easy steps.

### Create image template

First, log in to RenderForm.io and create an **image template**. You can also use any image you like from our template base.

![Image template created in RenderForm editor](/blog/image-template.png)

Our tips:
- think about where you want the image to be in the email (e.g., in the email header, as a sticker or promo banner)
- for email **header image** in Mailchimp, use a template with **600 pixels width**
- create space for the recipient's name, company name or other element you want to personalize
- have a photo of the recipient or a company logo? Use it to personalize the content!

### Create the image link

When your image template is ready, create its unique link that you will use in your email campaign.

![Template Link Builder tool](/blog/template-link-builder.png)

1. Open **Plugins** tab,
2. Go to **Link Builder** plugin to generate your image link.
3. Choose your template from selector.
4. Click **Generate AuthCode** option to create a unique code for your image.
5. In **Image Changes**, select which image component will be modified. In this case, we will modify the component named *Header*. Enter your text and to insert your recipient's name to the image, use **`*|FNAME|*`** key from Mailchimp.
6. Click on **Create and Copy link** button to generate your image link.

### Add image to Mailchimp email template

Create a new email template in Mailchimp or use an existing one and drag **Code** block section to the template. 

![Personalized Email Image](/blog/mailchimp-code-block.png)

In the Code editor, paste the following code, **replacing YOUR_IMAGE_LINK with the image link** created in RenderForm.

```html
<div class="mcnTextContent">
   <img src="YOUR_IMAGE_LINK"/>
</div>
```

Save the template and it's ready to go!

## Personalized Email with Mailchimp

With those 3 steps, your audience can receive interesting and tailored emails that stand out from the mass of generic emails they receive daily.

![Personalized Email Image](/blog/personalised-email.jpg)

Thanks to personalized image links, you can send customized messages in your Mailchimp Campaigns! Create custom and interesting texts and add them to your emails as images. 





Personalized Emails with Mailchimp in 3 minutes



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/template-properties/) 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)



What is Image Generation?


## How it started?

I realized how much time I spent to creating blog post covers, and I realized that publishing a blog posts is blocked very often because of lack a proper blog post cover. 
Not every team member of my team has access to the designer tools or a knowledge how to use them. 
Not everyone has a Content Management System to take care of everything. 😄 Even if you are using one you are still just relying on an image to represent your content.

## What is RenderForm.io?

**RenderForm.io is a web-based design editor with automation features.** You can create an image for your social media, blog post cover or advertising banner.

![Online Editor for Image Generation](/blog/simple-online-design-editor.png)

But the greatest feature of RenderForm is that you can **connect it with other online tools** in order to replicate your
image and create thousands of unique images with different images, texts and more!

![Layout plus Data equals your image](/blog/image-generation-api.jpg)

RenderForm offers easy to use **integrations with no-code platforms** like [Zapier](https://zapier.com) and [Make.com](https://make.com).

![no-code automation for image generation](/blog/no-code-banner-automation.png)

But you can use RenderForm with Google Sheets, Microsoft Excel, Apple Numbers, [Rows.com](https://rows.com), [Airtable](https://airtable.com) and more!

![generate images with text in Google Sheets](/blog/generate-unique-images-with-google-sheets.png)


## Use cases

- marketing automation
- automatic social images generation
- better email personalization
- multi-language blog posts image generation
- QR code sticker generation
- post card generation
- ecommerce product previews
- Instagram images generation
- archive blog post images generation

## Where to start?

Everything starts from [creating a free account](/register/). Next steps depend on that what you want to do, in RenderForm dashboard you will find
automation guide which will help you with integrating next tools.



What is RenderForm?


In this blog post I will present you how to quickly generate many images for an online session, video course or a conference.
I will use [RenderForm](/) to create a template, load data from a spreadsheet and generate images.

## Create a template

I used a predefined template from 'Templates' tab and adjusted it to my needs. RenderForm offers a great number of templates in many categories.
You can also create your own templates from scratch with an easy-to-use template editor.

In this blog post I will modify texts in two places and change the image (you can see component names on the left side panel).
 - `author_photo` - author image on the right side,
 - `author_name` - author name under the image,
 - `title` - session title.

![template in canvas editor for marketing automation](/blog/template-in-canvas-editor.png)


## Create a spreadsheet

I created a spreadsheet in Numbers, which is a default spreadsheet app for macOS, but you can use Excel or any other spreadsheet program.

In the first row, I put component names with properties I wanted to change, and separated them with a dot.

Property is a variable of component that you want to modify, for example, text, source url, background color or opacity.
Check our docs for more details about [components and their properties](/docs/general/template-properties/). Here is my sample spreadsheet:

- `author_photo.src` - change image source of `author_photo` component,
- `author_name.text` - change `text` of `author_name` component,
- `title.text` - change `text` of `title` component.

![data in spreadsheet](/blog/data-in-spreadsheet.png)

## Generate images

Now, head to the 'Extensions' tab in RenderForm and open 'Spreadsheet' extension. Import created spreadsheet using 'Import from file' button,
and select the template you want to use on left side.

![RenderForm extensions](/blog/bannerly-extensions.png)

If all properties are loaded properly in your file (they must correspond to your selected template), you are ready to start a generation.
To start generating images click 'Generate' button on top of the list, and do not close the window until the generation process is completed.


![list with generated images in spreadsheet extension](/blog/list-with-generated-images.png)

Once the generation is done, you will be able to download the images using 'Download' button.

![generated images from template for marketing automation](/blog/generated-images.png)

With 'Spreadsheet' extension you are able to quickly generate multiple images with one template and customized content.
With image generation and simple image editor, you can create images, post covers or marketing brochures, that match your company, website or app unique style!

<Vimeo/>


How to create many images from a spreadsheet?


Social media is an unstoppable force that has changed the way we communicate and engage with each other. The next years will see lots of changes in the way we use social media platforms to connect with one another, consume information, and collaborate on projects.
But how will it change exactly and what does it mean for your business? Read this article to find out!

## First Trend: New Brand Strategy

So far, one of the most common ways to promote your product was to pay a huge, widely recognized influencer to promote it on their channels. After all, isn’t the best way to get the attention you need?

![Social Media influencer](/blog/social-media-infuencer.jpeg)

Well, turns out this idea might soon become outdated. While popular influencers with lots of followers can attract attention to your product, they won’t give it **authenticity**. To normal users, those people are unreachable. Their problems and needs seem to be different than those of “everyday” people. 

That’s why, in 2022, it’s wise to **collaborate with smaller, more authentic influencers**. They can spend time answering questions and doubts people might have, building **trust and credibility** for your brand. Your audience will feel more in touch with those influencers, in return trusting them more when they say your product is worth their attention— and money.

## Second Trend: New Social Ads

TikTok, Facebook, YouTube, Instagram… Each social media has its audience, culture, and language. This is why the “one size fits all” approach is already risky— and soon it will become useless.

![E-commerce ad](/blog/e-commerce-ad.jpg)

In 2022, social media marketers will have to spend more and more time creating **creative, memorable ads that match each audience**. While a beautiful picture with a short, catchy caption is good for Instagram, this approach won’t work for TikTok, known for its viral trends and funny videos. 

However, it’s worth trying to understand and match each platform’s audience. If your company masters the art of attracting the attention of potential customers to each of them, you will see a great boost in sales!

## Third Trend: Social Commerce on the Rise

The post-pandemic world changed the way we do things. From communication to purchasing, people are changing their habits, and you need to follow them too!

![E-commerce shoes ad](/blog/e-commerce-image.png)

Owners of small or medium businesses should **focus heavily on e-commerce and social media**. In 2022, it’s expected that more and more people will turn from brick-and-mortar stores to **online shopping**. 

If you’re still trying to catch up on this trend, your time is running out! To get the most of this opportunity, you should understand how to match your customers’ expectations— and then exceed them.

## Fourth Trend: Customer Care is the Key

Times, where you forgot about your customer after they bought from you, are long gone. In 2022, you should **pay attention to their needs, both pre-and post-sale**.

![Customer service](/blog/customer-service.jpg)

Problems with the global supply chain, shortages in staff, and economic crisis are things that won’t make your average customer very likely to buy unnecessary stuff. Trying to catch their attention with exceptional customer care is one way to work a solution. 

Prepare for lots of text conversations with your customers— **[64% of them](https://hootsuite.postclickmarketing.com/research/social-trends/customer-care-1894-284JZ.html?_ion_target=embed-1.0) claim they prefer to message a business, rather than call**. But most importantly, pay attention to what they say and how. That’s how you’ll figure out what they need from you!

## Images in Social Media and E-commerce

Creating engaging and compelling content for a blog or website is often a challenging task. What if images for your products could have been created automatically?

![Image editor](/blog/image-editor.jpg)

**RenderForm.io** in an **online image editor** which will help you creating blog post covers, product images and much more! It comes with a**utomation features** that generate images for your website. Personalize your emails to clients that to image editor with easy intgration with Mailchimp and other popular tools.

Where to start? Everything starts from [creating a free account](/register/). Next steps depend on that what you want to do.


4 Social Media Trends for 2022


Are you wondering how your product link looks like when shared on iMessage? Check our free iMessage link preview tool to see how your link will look like when sent in Apple communicator!

## How to check the iMessage link preview online?

**Apple automatically generates the link preview** that is sent through iMessage. By default, the link is just a gray bubble with basic information. However, with the right **metadata** (like title, description, and photo) your link can look really cool when shared on iMessage.

![iMessage links](/blog/imessage-link.jpg)

If you are not sure how your website metadata is set and if it displays your link details correctly, use our free tool to test it.

You can access the app from this link: **[iMessage Link Preview Tool](https://renderform.io/tools/imessage-link-preview-tool/)**

Simply **enter the link to your product in the app and click Preview** button. Wait a second and check the final result!

![iMessage link preview tool](/blog/imessage-preview-tool.png)

With this link preview tool, you don't need a Mac or iPhone with iMessage to check how your links will look like when sent in a text message. 

[RenderForm.io](https://renderform.io/) will help you create great and interesting images for your metadata to encourage users to click on the product link. **Create appealing and informative images, and automate them** for your website, blog post and social media! [Start for free now!](/register/)






iMessage Link Preview Tool


## 1. Great Product Description
Hire a professional copywriter to write an amazing product description instead of a content writer.
We have seen a huge sales boost as soon we change the description from a generic one to a storyline.
If you have a lot of products, then maybe do it for the top 10 selling products, and you will see a difference.

## 2. Right Keywords
Other than having keywords in the product description, you can name the product with a keyword and have longer
(Low searched keyword) in the meta title. For example, if your product name is "Brown leather boots,"
then the meta title can be "brown leather boots for men".

You can also use [Google Trend](https://trends.google.com/trends/) to find more trendy keywords/phrases.
For example, "color" is a more popular word than "colour". This may seem small change,
but also impactful when adding up.

## 3. Image Tags
This is where your related keywords and LSI keywords of your primary keyword go. You can expect massive traffic
and sales from Google Images.

- Add `alt` attribute to your `img` tags. The `alt` tag helps Google to recognize what is on the image.
- Use proper image names. Example: `blue-newbalance-shoes.jpg` is much better name than `IMG_8463.jpg`.

## 4. Image Sizes

Image optimization is a technique that can help improve the loading speed of a webpage and improve search engine optimization.
If we optimize our images, then we can reduce the amount of time spent resizing them and this will also make our pages load faster, improving overall user experience and making them more attractive to search engines.

You can optimize your product images using our [Image Optimization Tool](/tools/image-optimization-tool/).
Select all of your images and download optimized image versions.

## 5. Product Images
Product in-use images increase your conversion rates. If you regularly have customers (or paid brand ambassadors)
posting photos of your products on social media, you may be able to repurpose that content on your product details page.
Being creative and generating images every day to keep everybody updates is not a easy task! You can use [RenderForm](https://renderform.io)
 in order to generate many product images at once.

![Example Shoe Product Banners](/blog/example-product-social-images.jpg)

## 6. Highlight Points
We all have the urge to buy something online, but it is always a risk because you can't physically hold the item in your hands. However, using free shipping, returns, warranties and guarantees can help build trust between buyer and seller.
Highlighting items that are free shipping, free returns, warranties and guarantees are good for building trust between buyers and sellers.

Highlight points like:
- free shipping,
- free returns,
- warranties,
- and guarantees.

## 7. Schema
Use advanced schema markups for your product page. It definitely increases your CTR, it will help Google and other websites
to promote your page in their search listings.

Check [example New Balance product page](https://www.newbalance.com/pd/fresh-foam-x-860v12/M860V12-36745.html) in our
[Website Metadata Reader Tool](https://renderform.io/tools/website-metadata-preview-tool/?url=https://www.newbalance.com/pd/fresh-foam-x-860v12/M860V12-36745.html)


## 8. Social Proof
Banners like "Watch of the year by GQ" or "Awarded as best leather boot 2019," etc. increases will increase the conversion rates. It's not very hard to get your product reviewed by different bloggers or participate in such awards.

## 9. Product Reviews
Product reviews helps in SEO, trustworthiness and if your schema is done right can also increase your CTR.


## 10. Live Chat Options
Sometimes, the customer just wants to know how good your reply times are by asking very basic questions.

## 11. FAQs
Make a list of all the questions which keep coming on the chat and convert them into faqs.
If you mark up FAQs with [JSON-LD structured data](https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data),
 it makes them eligible to appear in Google's "rich results".


11 Actionable Tips to Create Perfect Product Page


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


## Create Integromat webhook

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

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


## Send request on click

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

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

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

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

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




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

## Edit image template

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

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

## Configure Integromat scenario

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

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

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

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

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



## Test 

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


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

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


Send Personalized E-mail from React Application


Images are one of the most important components on Instagram. When it comes to post on Instagram, size does matter.

We have to take into account that it's an app that focuses on mobile devices, which are usually smaller than desktop screens.

Because of this, next to well-composed photos with good lighting and focus, you should also pay attention to your image size.

Here are some simple rules for uploading photos or videos on Instagram.

## Instagram Photos and Videos dimensions

In the beginning, Instagram users could only post square photos (1:1 ratio). Thankfully, that changed in the next few years. Now, Instagram photo posts focus on three main types: portrait, square, and landscape images.

### Photo posts size

Instagram is a great platform for brands to show off their products and for people to share their creativity with the world. One way for you to take your Instagram account to the next level is by picking the right photo dimensions.

**Portrait photos (4:5)**  

Portrait posts are vertical photos with aspect ratio is 4:5 and **the ideal vertical photo size is 1080px x 1350px**.

[comment]: <> (![Instagram portrait photo size]&#40;&#41;)

**Square photos (1:1)**

Square photos were the standard for an Instagram layout a few years ago. Although new formats are now available, square photos are still popular among Instagram users.

Ideal size for traditional square photos for Instagram is **1080px by 1080px**.

[comment]: <> (![Instagram square photo size]&#40;&#41;)

**Horizontal photos (1.91:1 or 16:9)**

Horizontal photos are the best for showing off the contents of the frame, instead of just framing people or objects. This is especially true for things like food, interiors, and art spaces.

The landscape (horizontal) photo aspect ratio is 1.91:1 with **ideal dimensions of 1080 x 608 pixels**. It is encouraged that all uploaded photos be in this format and aspect ratio for the best viewing experience.

Note that if you add a photo to an aspect ratio of 16:9, Instagram will automatically add a border to make it fit nicely in the frames.

[comment]: <> (![Instagram landscape photo size]&#40;&#41;)

**The best Instagram image sizes for posts are:**
- 1080px x 1350px (Vertical/Portrait)
- 1080px x 1080px (Square) 
- 1080px x 608px (Horizontal/Landscape).

### Profile photo size (320 x 320 px)

Instagram's profile picture size is 320 x 320, but note that the **uploaded image will be cropped to a circular shape**. When uploading a profile picture or logo, make sure the image will fit the circular Instagram frame.

[comment]: <> (![Instagram profile photo size]&#40;&#41;)

### Instagram video dimensions

Instagram videos have the same aspect ratio as photo posts. Here are the ideal dimensions:

- 1080px x 1350px (Vertical/Portrait - 4:5 aspect ratio)
- 1080px x 1080px (Square and carousel - 1:1 aspect ratio)
- 1080px x 608px (Horizontal/Landscape - 1.9:1 or 16:9 aspect ratio)

Extra requirements for Instagram videos:
- 30 frames per second
- 60 seconds in length
- File size of 4 GB

### Instagram Stories dimensions

Instagram stories are the most popular of the Instagram features. They're used by over 200 million people every day and can come in handy for marketers and businesses of all sizes. Instagram's users say that they find stories extremely effective because they can engage with followers on a more personal level than other social media sites like Twitter or Facebook. Therefore, the right image or picture size is extremely important for the best viewing experience.

**Ideal Instagram Stories size to fill the entire story screen is 1080 x 1920 px, when aspect ratio may vary from 1:9:1 to 9:16.**

[comment]: <> (![Instagram stories dimensions]&#40;&#41;)

### IGTV Post and Video dimensions

The recommended aspect ratio for IGTV vertical videos is **9:16 and 16:9** for horizontal videos. That means that the ideal size is **1080px x 1920px for vertical and 1920px x 1080px for horizontal** videos.

Ideal **cover photo** size for IGTV videos is 420px x 654px.

**Instagram Reels** aspect ratio is 9:16 and optimal size is 1080px x1920px.

## Ready to use templates for Instagram

A banner or a nice photo post is an important marketing tool that you can use in order to get more attention on social media platforms like Instagram, Facebook or Twitter. At RenderForm.io we can help you create **suitable banners for your personal or business profile** by providing **ready-made, customizable templates** with well-suited dimensions. 



Instagram Image Dimensions - 2021 Update


Images are the most effective way to captureResponse attention on social media. They are also one of the best ways to convey emotions, moods, and meaning. 

Facebook images not only benefit us to share our memories with friends and family, but also help marketers to get more engagement from their target audiences. The use of Facebook images is a common marketing strategy for businesses. It helps to create a personal connection with the customers and increase conversion rates by building trust.

Below we listed the recommended image sizes for Facebook posts, stories or videos to help you choose best images for the best experience.

## Profile and Cover Photos

It is not uncommon for people to have difficulties when uploading a profile picture or cover photo to Facebook. In this article we listed for you the size of these pictures and the dimensions that they should have.

### Facebook profile picture size: 170 x 170

Profile picture size is **170 x 170** but note that the image you upload is cropped to a circular shape. While uploading a profile picture or your logo, make sure the image will fit the circle Facebook frame. **Recommended and safest photo dimensions for Facebook profile picture is 400 x 400px**. 

[comment]: <> (![Facebook profile picture size]&#40;&#41;)

### Facebook cover photo size: 820 x 312

Your Facebook cover photo is the first thing your friends and followers see when they visit your profile. A quality cover photo can make a positive impression on people who might not know much about you or your business. As such, it’s important to put some thought into what you’re going to use your cover photo for and how it will be displayed.

The cover photo you upload should be **at least 820 pixels wide and 315 pixels high** (while 640 x 360 on mobile) – but if it is close to those dimensions, we will automatically resize it for display on Facebook.

**Recommended and safe dimensions of cover photo for best quality on all devices are 851 x 315 pixels**.

[comment]: <> (![Facebook cover photo size]&#40;&#41;)

Facebook requires different image dimenstions for different type of covers: 

- **Facebook Group cover image**: 1640 x 856 px
- **Facebook Business Page cover photo**: 820 x 312 px
- **Facebook Event cover photo**: 1200 x 628 px

Facebook cover photos are in **16:9 aspect ratio**.


## Posts, Link Shares and Stories

### Facebook image post: 1200 x 630 px
Actually, Facebook supports many dimensions for image posts, they can be 1200 x 1200 square or Instagram’s recommended dimensions of 1080 x 1350. Keep the recommneded width of 1200 pixels and your posts will fit every time! Aspect ratio for Facebook image posts is 9:16 to 16:9.

[comment]: <> (![Facebook image post size]&#40;&#41;)

### Share Link with Image: 1200 x 630 px
When you share e.g. a website or app on Facebook, the post contains the thumbnail image, title and description. Thumbnail recommended size is 1200 x 630 (min width width is 600 pixels).

[comment]: <> (![Facebook share link image size]&#40;&#41;)

### Facebook Stories image size: 1080 x 1920 px 
with standard 9:16 aspect ratio

[comment]: <> (![Facebook stories image size]&#40;&#41;)

## Facebook Videos

 Facebook video has to be at least 1080 x 720 pixels to be eligible for autoplay on desktop and laptop computers. It should also be at least 480 x 270 pixels in order to be viewed full screen on mobile devices.

The recommended size is 1280 x 720, but 1440x1080 is also an option.

Facebook videos guide:
- Size: **1280 x 720 landscape,  720 x 1280 portrait** (recommended)
- Maximum Facebook video length: 240 minutes (we recommend shorter videos with max 15-30 seconds length)
- Minimum width is 600 pixels
- Max file size is 4GB
- Recommended video formats are .MP4 and .MOV.

[comment]: <> (![Facebook video size]&#40;&#41;)

Facebook 360 guide:
- Maximum dimensions 4096 x 2048 pixels
- Minimum width is 600 pixels
- 2:1 aspect ratio
- Recommended video format is .MP4

The recommended size for **Facebook video ad** is 1080 x 1350 (ratio 4:5)with the minimum of 1080 x 1080 pixels. Ratios from 16:9 to 9:16 are also supported.


## Image Ads

Ad size and dimensions are essential to know when running Facebook ads. All types of images should have **at least 1080 x 1080 pixels**. **Ideal image ratio is 1.91:1 to 4:5**.

- Facebook feed ad size: 1200 x 628  (file size less than 100 KB)
- Facebook Story ad size: 1080 x 1920 
- Facebook Messenger image ad size: 1200 x 628 

## Facebook Image Templates

Images are essential to the success of a Facebook page. However, choosing a perfect image size for different post types can be challenging. 

At **Bannery.io** we are here to help you create nice and professional looking templates with predefined or customizable image dimensions for all image types. You can choose between **3 easy options - choosing a template, customizing the template or starting from scratch**. Our ready to use templates are designed in a way to help you create content in 5 minutes or less. When you are done, you can share your finished project directly to your Facebook feed!


Zapier

Make.com

Integrately

WordPress Plugin

Mailchimp

Airtable Extension

Google Sheets

Excel/CSV file

REST API

RenderForm CLI

Webhooks

HTML to Image

Marketing