Design Your Canvas Messages – Help Center

If you are not using Wunderkind's design services and are composing your own templates, this page will teach you how to render API payload content within your Canvas messages.

Grant Wunderkind Access to Your Braze Account
Connect Your Braze Workspace to Wunderkind Platform
Review New Braze Assets
Design Your Canvas Messages 👈 You are here
Complete Canvas Setup
Test and Launch Signals for Braze

Pre-Build Considerations

If you plan to test Wunderkind AMP against other vendors, we ask that you wait to apply cross-vendor suppression logic to Canvases until we complete final testing. This will help us to test efficiently and catch any issues specific to Wunderkind settings. Wunderkind will complete final testing once you have built out your Canvas messages following the steps in the next section.
Wunderkind provisions all Canvases and individual message steps with standardized naming conventions expected by our automated reporting. If you must rename these assets, please stay within the rules outlined here, so that data will not be missing or mis-categorized in your Wunderkind reports.

Design Canvas Messages

Open your first Wunderkind Canvas to begin configuring content, design and settings.

Within each message component:

Select Email as the message channel
Choose any of the three options: Drag-and-drop editor, HTML code editor, or Templates
- If choosing Drag-and-drop editor, follow these instructions
- If choosing HTML code editor, follow these instructions
- If choosing a template, follow the instructions that correspond to the template Type

Drag-and-Drop Editor

In the editor view, click Settings in the top right corner
Scroll down to the Custom Head HTML section, and paste the below code snippet:
- ```
<style type="text/css">
  @media screen and (min-device-width:10px) and (max-width:600px) {
    .wknd-full {width:100%!important;height:auto!important;}
    .wknd-box-lg {width:95%!important;}
    .wknd-box {width:90%!important;}
    .wknd-half {width:49%!important;}
    .wknd-prodCopy {padding:10px 0!important;font-size:16px!important;line-height:1.2!important;}
    .wknd-prodCopy-sm {font-size:14px!important;}
    .wknd-imageCol {width:35%!important;}
    .wknd-textCol {width:64%!important;}
  }
</style>
```
- This style tag contains all CSS classes required to support mobile responsiveness across Wunderkind's provided Content Blocks. For example, the wknd-full class is used to bring containers to 100% width, making content appear “stacked” on mobile devices.
- Wunderkind's Content Blocks rely on these classes being prefixed with wknd-. The prefix ensures that these styles stay scoped to the Wunderkind content rather than interfering with Braze-generated template CSS. As a best practice, we still recommend confirming the final rendering using the previewing steps later in this guide.
In the right panel, in the Content tab, scroll down to the Advanced section and drag an HTML block into the template.
Choose which Wunderkind Content Block you’ll use to display dynamic products to the recipient, referring to the visual reference. In the HTML block, overwrite the HTML Properties input by pasting the Liquid tag corresponding to the desired block.
Build out the rest of your drag-and-drop template as desired.
- See our Developer Portal to learn how canvas_entry_properties can be used to create dynamic shopping experiences within messages.
- If using multiple Wunderkind-provided product blocks in one email template (e.g., Wunderkind_Hero_Product above a Wunderkind_Product_Grid), follow these instructions on leveraging Liquid's offset parameter to ensure that the same product does not render twice.
- Make sure to insert a legally-compliant unsubscribe link per Braze’s documentation.
Preview your drag-and-drop creative with sample products by following the instructions at the bottom of this page.
Go to Link Management settings. In the top right dropdown, select the template Wunderkind Signals. Add additional parameters as needed.
After completing your template, ensure Subject, Preheader and sender details are correct.
Repeat the above steps to set up each message component within the Canvas, then repeat per Wunderkind Canvas.

HTML Code Editor

In the text editor, compose your HTML email and include all standard elements required for a full HTML document, such as <html>, <head> and <body>

Provided below is Wunderkind’s best practice email boilerplate, which includes a <style> tag containing all CSS classes required to support mobile responsiveness across the provided Content Blocks. For example, the wknd-full class is used to bring containers to 100% width, making content appear “stacked” on mobile devices. Use this as your starting point, making adjustments as needed:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>
    <style>
        body, table, td, a {-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
        table, td {mso-table-lspace:0pt;mso-table-rspace:0pt;}
        body {margin:0!important;}
        a {text-decoration:none;} 
      @media screen and (min-device-width:10px) and (max-width:600px) {
        .wknd-full {width:100%!important;height:auto!important;}
        .wknd-box-lg {width:95%!important;}
        .wknd-box {width:90%!important;}
        .wknd-half {width:49%!important;}
        .wknd-prodCopy {padding:10px 0!important;font-size:16px!important;line-height:1.2!important;}
        .wknd-prodCopy-sm {font-size:14px!important;}
        .wknd-imageCol {width:35%!important;}
        .wknd-textCol {width:64%!important;}
    }
    </style>
    <!--[if (gte mso 9)|(IE)]><style>
    * {font-family: sans-serif;}
    </style><![endif]-->
    <!-- high dpi outlook fix --><!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
</head>
<body style="margin:0;padding:0;background-color:#ffffff;" class="body">

{{content_blocks.${Wunderkind_Product_Grid_2_Column}}}

<div><a href="{{${set_user_to_unsubscribed_url}}}" target="_blank" style="text-decoration:none;">Unsubscribe</a></div>

</body>
</html>

In the <body> section, include the Liquid tag that corresponds to the desired Wunderkind Content Block, referencing the visual reference.
- See our Developer Portal to learn how canvas_entry_properties can be used to create dynamic shopping experiences within messages.
- If using multiple Wunderkind-provided product blocks in one email template (e.g., Wunderkind_Hero_Product above a Wunderkind_Product_Grid), follow these instructions on leveraging Liquid's offset parameter to ensure that the same product does not render twice.
- Be sure to insert a legally-compliant unsubscribe link per Braze’s documentation. We’ve included example Liquid snippets in the above boilerplate for your convenience.
Preview your HTML creative with sample products by following the instructions at the bottom of this page.
Go to Link Management settings. In the top right dropdown, select the template Wunderkind Signals. Add additional parameters as needed.
After completing your template, ensure Subject, Preheader and sender details are correct.
Repeat the above steps to set up each message component within the Canvas, then repeat per Wunderkind Canvas.

Previewing Creatives with Dynamic Products

Reference Braze’s article for assistance: Testing campaigns personalized with user attributes

To preview mock dynamic products:

Before beginning, make sure the template you’re viewing displays Wunderkind products using the standard Items array structure and field names.
In the Preview & Test tab, in the Preview as a User tab, select Custom User
Scroll down to the Context section of the panel. This is where Braze lets you override dynamic properties that are expected by the creative. In the Items input, paste the code block at the bottom of this page. If you need to preview custom properties, adjust the code block accordingly.
To make sure all email content works as intended, please send a test to your live inbox. Carefully check each link, focusing especially on dynamic content, and proof design rendering across desktop and mobile.
- We encourage testing through Braze’s built-in Inbox Vision testing feature, or separate render software (e.g. Litmus, Email on Acid), if available.

Mock Product JSON

[
  {
    "WkCopy": "Lorem ipsum dolor sit amet",
    "WkImageUrl": "https://assets.bounceexchange.com/assets/uploads/users/2518/wknd/ei/2022/test1.png",
    "WkUrl": "https://www.wunderkind.co/",
    "WkId": "12345"
  },
  {
    "WkCopy": "Lorem ipsum dolor sit amet consectetur",
    "WkImageUrl": "https://assets.bounceexchange.com/assets/uploads/users/2518/wknd/ei/2022/test5.png",
    "WkUrl": "https://www.wunderkind.co/",
    "WkId": "12345"
  },
  {
    "WkCopy": "Lorem ipsum dolor sit amet consectetur adipiscing elit",
    "WkImageUrl": "https://assets.bounceexchange.com/assets/uploads/users/2518/wknd/ei/2022/test3.png",
    "WkUrl": "https://www.wunderkind.co/",
    "WkId": "12345"
  },
  {
    "WkCopy": "Lorem ipsum dolor sit amet, consectetur",
    "WkImageUrl": "https://assets.bounceexchange.com/assets/uploads/users/2518/wknd/ei/2022/test2.png",
    "WkUrl": "https://www.wunderkind.co/",
    "WkId": "12345"
  }
]

Related to