Introducing

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.

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 Laravel 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 Laravel (PHP), we can trigger an action on our user model whenever a new User is created with code like this:

public function store(Request $request)
{
	// User validation logic...
        $user = User::create($request);
        UserRegisted::dispatch($user);
}

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 Code2Image

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

With the Signed URL feature of Code2Image 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 Code2Image generates the image on the fly. Image generation speed depends on the complexity of the image but you can expect around 2-3 seconds to generate and display the image synchronously.

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

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

public function welcome_image_url($name)  
{  
  #get this from Code2Image  
  $base_url = "https://on-demand.code2image.com/signedurl/[project_id]/image.jpg";  
  
  #modifications: grab this JSON from your template API Console and modify as needed  
  $modifications = ["text" => "hello ${name}"];  
  
  #create the query string  
  $query = "?modifications=" . base64_encode(json_encode($modifications));  
  
  $signature = OpenSSL::HMAC.hexdigest("SHA256", api_key, base + query);  
  
  #Signed URL  
  return $base_url . $query . "&s=" . $signature;  
}

The final email template

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

We send our email from the User model on signup blade view file:

<a href="{{ welcome_image_url($username) }}"></a>

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