Add a variable to a transactional email template

Abstract

Learn how to add a variable to a transactional email template.

With Moosend's transactional campaigns, you have a variety of options for adding images, files, and other dynamic content, such as a product name.

This topic is for developers or advanced users and requires knowledge of the API.

Add an image from a public URL

You can add a image that you've stored in the cloud to the text item of a transactional campaign email. For example, a screenshot of a receipt.

To add the image, you'll need to add the image URL to the API and add the image variable to the campaign:

In the API payload, format your JSON like this example:

"Personalizations": [ 
        { 
            "To": [ 
                { 
                    "Email": "john_doe@example.com", 
                    "Name": "John Doe" 
                } 
            ], 
            "Substitutions": [ 
                { 
                    "product": "value1", 
                    "image": "https://urlexample.com" 
                } 
            ] 
        }
    ]

In Moosend, in the transactional campaign editor:
1. Add a text item and place the cursor where you want to add the image.
2. Enter the image variable using the format #image# or {{image}}.

The image will appear in the body text of the transactional campaign email when you send it.

Embed a file as an attachment through the API

From the API, you can add a file of any format, including PDF, TXT, or an image, as an attachment to your transactional campaign email.

To add the file:

In the the API payload, enter the file in the attachments object as a key-value pair, following the format "Filename": "filename.extension":

"attachments": [
    {
      "content": "iVBORw0KGgoAAAAAfcAYDAAAAADQB4zBAAAAAAB9wBgMAAAAANAHjMEAAAAAAH3AGAwAAAAA0AeMwQAAAAAAfcAYDAAAAADQB4zBAAAAAAB9wBgMAAAAANAHjMEAAAAAAH3AGAwAAAAA0AeMwQAAAAAAPe+T+J/nnNIPnRqhbwAAAABJRU5ErkJggg==",
          "Type" : "application/pdf",
          "FileName" : "example.pdf",
          "Disposition" : "attachment",
          "ContentId" : "exampleattachment"            
        }
    ]

The file will be added as an attachment to the transactional campaign email when you send it.

Add an inline image

You can add a inline image in the content of a transactional campaign email. For example, screenshot of a receipt.

For this, you need a Base64-encoded image.

To add the inline image, you'll need to add the Base64 code in the API and enter an API reference to the image in the campaign email:

In the API payload, enter the attachments parameter using this format, where the value of "content" is the Base64-encoded image:

"attachments": [
    {
      "content": "iVBORw0KGgoAAAAAfcAYDAAAAADQB4zBAAAAAAB9wBgMAAAAANAHjMEAAAAAAH3AGAwAAAAA0AeMwQAAAAAAfcAYDAAAAADQB4zBAAAAAAB9wBgMAAAAANAHjMEAAAAAAH3AGAwAAAAA0AeMwQAAAAAAPe+T+J/nnNIPnRqhbwAAAABJRU5ErkJggg==",
          "type": "image/PNG",
          "filename": "imageexample.png",
          "disposition": "inline",
          "contentId": "image-a"
        }
    ]

In Moosend, in the transactional campaign editor:
1. Add a text item and place the cursor where you want to add the inline image.
2. Enter the text cid:, followed by the contentId (cid ) value from the attachment parameter in the API. For example, #cid:image-a#.

The image variable will be replaced by the actual image in the transactional campaign email when you send it.

Add text

You can add dynamic text in the transactional campaign email. For example, a product variable.

To add the dynamic text, you'll need to define the variable in the API and add the variable in the campaign email:

When the email is sent, the dynamic text variable is replaced by the value.

In the API payload, define the value of the "product" variable in the Personalization parameter using this format:

"Personalizations": [ 
        { 
            "To": [ 
                { 
                    "Email": "john_doe@example.com", 
                    "Name": "John Doe" 
                } 
            ], 
            "Substitutions": [ 
                { 
                    "product": "value1", 
                    "image": "https://urlexample.com" 
                } 
            ] 
        }
    ]

In Moosend, in the transactional campaign editor:
1. Add a text item and place the cursor where you want to add the dynamic text.
2. Enter a word surrounded by hashtags using the format #product# or {{product}}, corresponding to the "product" parameter in the API payload.

Add iterations

You can use the {{#each}} helper function to iterate or loop through data, enabling dynamic content generation within your templates.

To add an iteration you'll need to add an HTML item in the transactional campaign editor:

On the campaign editor page, in the left pane under Items, click HTML.
Drag the HTML item to an empty layout.
Click the item to display the HTML settings in the right-hand pane of the editor.
In the HTML content field, copy and paste the HTML code snippet you want to use in the design and then press Enter on your keyboard. Format your code like this example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Abandoned Cart Notification</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
        }
        .product {
            display: flex;
            margin-bottom: 20px;
        }
        .product img {
            width: 150px;
            height: auto;
        }
        .product-details {
            margin-left: 20px;
        }
        .checkout-button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin-top: 20px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
    {{#each order.products}}
        <div class="product">
            <a href="{{this.link}}">
                <img src="{{this.img}}" alt="product image">
            </a>
            <div class="product-details">
                <h2>{{this.name}}</h2>
                <p>Characteristics: {{this.valiant.name}}</p>
                <p>Quantity: {{this.quantity}} - Total {{this.price.grossValue}}</p>
            </div>
        </div>
       {{/each order.products}}
     <a href="https://www.shopify.com/blog/abandoned-cart-emails" class="checkout-button">Checkout Now</a>
    </div>
</body>
</html>