Table of Contents

1. Why?

2. Design Template.

3. Personalized Greeting Card.

 

1. Why?

There are many reasons to send a welcome email when a new user signs up for a free trial of your SaaS product or a new user suscribes to your newsletter. Typical ones include:

  • Increase engagement by telling about the next step they need to take to start using the product.
  • Reduce support requests by letting user know how they can contact your support, share feedback or find a solution to a common problem.
  • Build relationships by telling your story and presenting yourself as a brand.

But these are the basics that you probably already do. 

How else can you use this contact opportunity to strengthen relationship? How to make this touchpoint with the brand memorable?

With DynaPictures you can create a personalized memorable experience for your brand by generating a personalized greeting card for a user. This helps not only tell your story visually, but also customize it for the user in a way she doesn't expect to. Exceeding expectations is the result we all strive for. Users will be more likely to memorize your brand and find time to test your product during a free trial period. This works especially well when they evaluate and test multiple products simultaneously.

Here is the card that we send when user signs up for a free trial at DynaPictures:

 

This card includes:

  • Name of the recipient.
  • Our location in the signature
  • Photo of our location. We plan to dynamically rotate our location photos depending on the season, holidays, etc. You can also change it dynamically depending on the country where the client is served, or even show a photo of the country the client comes from.
  • Team members - you can change this dynamically, depending who is doing support at the moment, or feature best performing employees.

Here are some additional ideas that could be implemented here:

  • Make it look more like a post card by adding an envelope image on the background, stemp, etc.
  • Include date and time when the image was produced.
  • Include photo of the client in the recipient area
  • include personal signature of the CEO

We will show you how to build the same card and will use URL Parameters so that the image is generated when client opens an email. You could also generate an image in advance send it as an attachment using No-Code or REST API.

 

2. Design Template

Let us create our image template first and then use it in our automations. Go to Image Templates and then click on the "+ New Image Template" button:

If you are new to our concept of the layers and template editing, read this section from our Twitter tutorial. Now we need to add the following layers to the image:

1. image1 - An Image shape that covers the whole canvas and will hold our background. You can upload the 

2. message - A text shape that contains the text of the greeting card. You can put any placeholder text there for now.

3. image3 - An image shape, containing the avatar of the first team member.

4. image4 - An image shape, containing the Avatar of the second team member.

5. and so on...

Here is what we designed in our image template at the end:

 

Note the layer names listed on the left, so that we can refer to them in the next step when we generate personalized images.

Once our template is ready, we can start embedding it into our emails and generate personalized images that are based on it.

 

3. Personalized Greeting Card

A new image can be generated using URL parameters, if we compose image URL so that it contains the template ID and the new values for the layers that we want to customize.

This new image will be generated when the email is opened and the image is shown for the first time.

The dynamic image URL is built using the following schema:

 https://api.dynapictures.com/links/{TEMPLATE_ID}.png?params={PARAMS}

You need to replace the {TEMPLATE_ID} and {PARAMS} placeholders with your own values.

You can also use No-Code tools or REST API if you don't want to use URL parameters.

Now let's go over each URL parameter in detail.

TEMPLATE_ID

The template ID is a unique identifier of your image template. You can find it in the upper left corner of the template editor:

Image Template UID Location
 

PARAMS

The parameter list with custom values for the layers in the image template. The list elements are separated by <> string (two symbols, the < and the >). The individual elements of the string a represented as a trinity of layer name, parameter name, and parameter value. So we can specify the layer we want to customize the parameters for, for instance, an image, and then parameter of this layer, for instance, an imageUrl and then finally we provide the value of the image URL as a last piece. This trinity is written in the following way:

 {LAYER_NAME}---{PARAMETER_NAME}___{PARAMETER_VALUE}

The layer name can be found in the list of layers on the left or in the settings panel of a layer when it's selected:

 

For example, if we want to show another image on the background, we need to specify the following parameter for the image layer with the image1 name:

 image1---imageUrl___https://dynapictures.com/images/banners/cat1.jpeg

And if we need to personalize text content of the text layer with the message name:

 message---text___Hello Brian!

Finally, here is how the final URL will look like, if we want to customize the text of the message layer and use another image for a team member in our greeting card template with UID e26cd0daf7:

https://api.dynapictures.com/links/e26cd0daf7.png?params=message---text___Hello Brian!<>image3---imageUrl___https://dynapictures.com/images/banners/cat1.jpeg

Here is a visual mapping and explanation how the image link is built. The solid lines represent the info that we need to take from the image template, and the dashed lines show how our custom information can be shown in the layers we specify:

 

Finally, insert this dynamic image link into your welcome email template.

Pass the link directly as a parameter to your email template if you use No-Code tools, or just use the HTML code below in case you can adjust your email templates manually:

 <img alt="Your personal greeting card - allow images in your email client to see it" src="https://api.dynapictures.com/links/e26cd0daf7.png?params=message---text___Hello Brian!<>image3---imageUrl___https://dynapictures.com/images/banners/cat1.jpeg" />