How to Send a Dynamic Personalized Welcome Image to Each New User

Don't send the same boring email to everyone! Here's how to create some easy personalized content for your SaaS welcome emails
by Jon Yongfook · December 2020

Contents

    Don't send the same boring email to everyone! Here's how to create some easy personalized content for your SaaS welcome emails.

    If you sign up for Bannerbear you get a welcome email with an image like this:

    The image has a few elements that are unique to each user including:

    • Today's date
    • User name
    • User photo

    This image is generated automatically when a user opens the welcome email.

    Why send a Welcome Email?

    For a SaaS company or other B2B company, a welcome email is a great opportunity to:

    • Let the user know who they can contact for support
    • Point the user to the first step they need to take
    • Provide additional links and documentation for the user to explore
    • Say something about who you are as a brand!

    Make it memorable!

    To achieve all of the above, personalization is not required of course. But personalization does make the email more memorable, and in today's competitive world anything you can do to make your experiences more memorable is something you should invest in.

    How to send a Welcome Email

    The actual process of sending a welcome email is quite easy but it will depend entirely on what app framework you are using.

    At Bannerbear we use Ruby on Rails which has a callback interface which triggers actions on events that you specify.

    Many other frameworks will have a similar feature, so you will need to apply this methodology to the framework you are using.

    In Rails, we can trigger an action on our user model whenever a new User is created with code like this:

    class User < ApplicationRecord
      after_commit :send_welcome_email, :on => :create
      def send_welcome_email
        #send email!
      end
    end
    

    That's the basics of sending a welcome email when a user signs up… so how do we create a dynamic image for each user?

    Creating dynamic images with Bannerbear

    Creating a dynamic, personalized image to insert in this welcome email is quite a simple process.

    With the Signed URL feature of Bannerbear you can generate a unique, secure image URL to insert into your email. Then when the user opens the email, the URL is pinged by the browser and Bannerbear generates the image on the fly. Image generation speed depends on the complexity of the image but you can expect around 3 seconds to generate and display the image synchronously.

    The principle of generating dynamic images is simple. You set up a template design in Bannerbear, and the template gives you an API to use.

    Update: Bannerbear now has official SDKs for Ruby, NodeJS and PHP to perform URL signing so we will use that in the example below

    Here's some example code of what it looks like to generate a "Hello (name)" image from a simple template in Bannerbear:

    def welcome_image_url
      bb = Bannerbear::Client.new(ENV['KEY'])
    
      url = bb.generate_signed_url("XXXXX", 
        :modifications => [
          {
            :name => "image", 
            :image_url => self.avatar.url
          },
          {
            :name => "message", 
            :text => "Hello #{self.name}"
          }
        ]
      )
      return url
    end

    The final email template

    Once you have understood the principles of creating dynamic images using Bannerbear it is then very easy to put this into practice.

    We send our email from the User model on signup:

    class User < ApplicationRecord
      after_commit :send_welcome_email, :on => :create
      def send_welcome_email
        ApplicationMailer.user_welcome_email(self.id).deliver
      end
    end
    

    In ApplicationMailer we create the User instance:

    class ApplicationMailer < ActionMailer::Base
      def user_welcome_email(id)
        @user = User.find(user_id)
        mail(to: @user.email, subject: "Welcome to Bannerbear")
      end
    end
    

    And then finally in the email template we include the dynamic signed url for that User:

    <img src="<%= @user.welcome_image_url %>" />

    Signed URL documentation

    Signed URLs are an extremely powerful way to use Bannerbear, offering simple on-demand image generation in a way that is safe and secure to be used in publicly-facing front end code.

    There is also a more traditional REST API if you prefer to use that!

    About the authorJon Yongfook@yongfook
    Jon is the founder of Bannerbear. He has worked as a designer and programmer for 20 years and is fascinated by the role of technology in design automation.

    How to Make a Device Mockup Generator for Websites using Bannerbear

    Device mockups are a valuable tool to display website designs across multiple devices as they offer a realistic preview of a website. This tutorial demonstrates how to build a device mockup generator using Bannerbear, allowing the automatic generation of device mockups by entering a website's URL.

    FFmpeg 101: Top 10 Command Options You Need to Know (with Examples)

    FFmpeg is a complete, cross-platform solution to edit media files programatically. With hundreds of command options available, it is easy to feel overwhelmed. In this article, we’ll go through 10 essential FFmpeg options you should know.

    How to Create an Image Slider in HTML, CSS, and Javascript

    Many JavaScript image slider libraries are available but which is the best for your project? Instead of using an external library, let's create one from scratch using simple HTML, CSS, and JavaScript.

    Follow the Journey

    Sign up for our once a fortnight newsletter update on new Bannerbear features and our business journey

    How to Send a Dynamic Personalized Welcome Image to Each New User
    How to Send a Dynamic Personalized Welcome Image to Each New User