Automate image generation
Save time on creating similar images with different texts and brandings!
Create account
Share article

Send Personalized E-mail from React Application

Published October 30, 20214 min read

Send Personalized E-mail from React Application

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

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.

<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 but you can use any other library to do this. If you don't want to use any library check Fetch API.

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

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

Add text to image using RenderForm module

HTTP module is only for downloading image from received URL from RenderForm module. Download generated image with text using HTTP Integromat module

Thanks to the HTTP module we can add the image itself instead just the URL. Send attachment using Integromat email module

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

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!

Relevant posts

Image Generation with Zapier

Image Generation with Zapier

Jakub PomykałabyJakub PomykałaAugust 17, 2022

Automate image generation using Zapier and RenderForm. Create mutiple images with your templates, or take website screenshot using Zapier.

Read more
Make Your Site Stand Out With Those 3 Tips!

Make Your Site Stand Out With Those 3 Tips!

Kinga WojciechowskabyKinga WojciechowskaJuly 22, 2022

If you’re looking for a way to make your website stand out from others, this article is a great way to start! Learn 5 different tips and tricks to boost your website’s visibility. 

Read more
How to Grow Your Business With an Email Newsletter

How to Grow Your Business With an Email Newsletter

Kinga WojciechowskabyKinga WojciechowskaJuly 19, 2022

Email marketing is a powerful tool for engaging customers and growing your business. Perhaps unsurprisingly, 99% of email users check their inbox every day.

Read more
Image Generation with Airtable

Image Generation with Airtable

Jakub PomykałabyJakub PomykałaJune 17, 2022

Automate image generation using Airtable. Create images using your templates, or take website screenshot with Airtable.

Read more
Image Generation with Google Sheets

Image Generation with Google Sheets

Jakub PomykałabyJakub PomykałaJune 04, 2022

Automate image generation using Google Sheets. Create images using your templates, or take website screenshot with Google Sheets.

Read more
Personalized Emails with Mailchimp in 3 minutes

Personalized Emails with Mailchimp in 3 minutes

Kinga WojciechowskabyKinga WojciechowskaJune 04, 2022

Check how you can create outstanding personalized images and how to use them in your Mailchimp email campaigns.

Read more

Design. Automate. Scale.

Free plan • No credit card required • Get started in minutes