Dynamic: HTML/CSS

Leverage customer data in your CRM/ESP for a 1:1 personalized creative design.

Merge Tags & Personalization

One unique feature of the Poplar platform is the capability to print dynamic mailers. You can personalize your postcards or letters just like you can in an email with any information you have on your customers like first name, past products purchased, and unique promo codes. This personalization allows you to create designs that are statistically more likely to get the recipient’s attention since they’re tailored to each individual.

If no one on your team has sufficient knowledge of HTML /CSS, our team is happy to help! Just follow the instructions on this form to submit your design to be translated into HTML:

Creative Translation Request Submissionheypoplar.com

Poplar offers a variety of flexible and creative ways to customize mailers based on different types of collected audience data.

Personalizations can be broken down into four merge tag categories: Default, Promotion, Location-based, and Custom - all of which can be dynamically optimized by the use of Shopify’s Liquid Template language.

The address block is not considered variable or personalized, since it is always auto-applied by the platform during the upload process.

Default Merge Tags (Recipient)

Poplar will automatically populate default merge tags based on recipient data received via CSV upload or trigger integration. In your HTML creative, default merge tags are always preceded by recipient. to access the core recipient data in your mail file or API request.

The platform will NOT prompt you to set default values for recipient. merge tags. This means that in the event of a blank value or mismatched data, your creative will print with a blank.

Double check all column headers and Test all triggers before launch to ensure there are no merge tag data discrepancies.

Missing first name data will populate as Current Resident and will appear on your creative as such - if you are using the {{recipient.first_name}} merge tag, make sure first name is provided for every recipient.

Column Header or Key

Merge Tag

full_name

first_name

last_name

address_1

address_2

city

state

postal_code

email

identifier

Promotions Merge Tag

If you've created a Promotion and uploaded a list of unique codes, use a {{promotion.promo-code}} merge tag to pull in each code. Upon uploading creative, the platform will detect promotion. and prompt you to select your Promotion from a dropdown.

Unique QR Codes

Promotions can also be helpful for featuring unique QR codes. Poplar has the ability to render a unique QR code image (containing a URL or code), but it does not generate them or track scans.

A third party tool should be used to generate list of unique URLs or UTM codes - these programs typically also track scans for additional conversion metrics. The static part of the URL can be coded into the creative with a promotions merge tag where the unique UTM will appear:

https://www.heypoplar.com/?utm_source=qr&utm_content={{promotion.qr_utms}}

Next you'll want to upload the list of your unique UTMs as a Promotion list so they can be pulled into the QR code URL to generate the image:

The length of your URL affects the density of the QR code, therefore we recommend using a shortened version of your URL to avoid scanning issues when printed.

Location Based Merge Tags

Location based merge tags populate with data pulled from Saved Locations within your Poplar account. They are considered default merge tags, meaning the platform will NOT prompt you to set a default value to appear in the event of missing data. Location based merge tags provide a flexible and easy way to customize creative based on Geolocation settings.

Saved Location Field

Merge Tag

Location Name

Address 1

Address 2

City

State

{{location.state}} or {{location.state_name}}

Postal Code

Merge field 1

Merge field 2

Merge field 3

There must be at least one (1) saved location under the geo-locations tab & the saved locations suppression must be toggled on under the campaign Suppressions tab before you upload an HTML creative including {{location.merge_tag}}. Click Saved Locations to learn more.

Dynamic creatives (designs featuring variable or personalized data) using Merge Tags or Liquid Template logic, must be uploaded in HTML file format.

This article mentions common and general merge tag use cases used within our Poplar platform. If you want to learn how to add merge tags to your creative please check out How to Convert a Static Design HTML.

HTML/CSS Best Practices

Translating a static PDF design may sound intimidating, especially if you have little to no prior coding knowledge. Fortunately the process is usually as simple as:

Pulling certain aspects of your static design together
Re-saving them as one element
Embedding the URL within an .html file.

There are a few key tools and elements to have in place before you begin:

Your original InDesign or Illustrator files
All image assets and fonts
Poplar’s HTML template files (found here)
A text editor such as Sublime or Visual Studio Code
A tool to preview your design as you code such as a browser window or Codepen.io

Since Poplar is converting an HTML file to PDF, the capabilities and best practices differ slightly from a web page which uses a multitude of behind-the-scenes tools and software to render in a browser.

A browser can be used to preview your code design, but keep in mind certain elements, such as merge tags, may appear differently in the browser than they do when converted to PDF in the platform - this is why viewing the PDF proof generated by the platform is the best, most accurate way to check your work.

When formatting your HTML design, all CSS styling should appear within the <style> tag located inside the <head> tag. Additionally we recommend using absolute positioning for all elements.

Inches and Pixels are the only recommended units of measurement - relative lengths such as em, rem, vw, etc. may not render properly upon upload.

If dynamic content is only used on one side of a postcard or letter, only one file needs to be an HTML file and the other side can be uploaded as a PDF.

URLs and File Paths

A file path describes the location of a file. There are two types of file paths: Absolute and Relative.

A relative path file points to a local file relative to the current page, an absolute file path uses a URL to an internet or Bucket file.

The platform is only able to render files with an absolute path and will NOT render files sourced relatively.

Path Type

Example

Absolute

<img src="https://www.app.heypoplar.com/logo.png"> Correct

Relative

<img src="/images/logo.png"> Incorrect

When uploading HTML creatives, it's essential to ensure that all URLs within the creative are functional and visible to the public.

The best way to test the functionality of your src URL is to copy and paste it in your browser. If it's functional it will appear and if not, you may receive an HTTP Error Code.

Supported Content Types

File Type

Accepted Format

font

.otf, .ttf, .woff, .woff2

image

.bmp, .gif, .jpg, .jpeg, .png, .svg, .tiff, vnd.microsoft.icon, .webp, .xml

text

CSS

Webfonts

Dynamic content must use a GoogleFont or a font with a purchased license.

Typekit & Adobe Fonts are not accepted in HTML creatives, but are welcome to be used in static ones.

Linking Fonts

The simplest option is to link your asset in the <head> of the HTML document rather than in the in the CSS. Using this method, the platform is able to accept a maximum of 2 different font weights.

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet" type="text/css">

@font-face

This rule allows custom fonts to be loaded to the creative. Once added to the CSS in the rule instructs the printer to download the font from the URL where it is hosted. The @font-face rule should be added to the top of the CSS before any other styles.

@font-face {
        font-family: "MyWebFont";
        src: url("http://template-assets.sharelocalmedia.com.s3.amazonaws.com/MyWebFont.ttf")
        format("truetype");
      }

Liquid Logic

Tags Let you add conditional logic (using operators) to your messages. The most basic form is an if...else statement.

Filters Allow you to reformat and set consistent formatting ( ie uppercase, lowercase, or proper-case)

There's no limit on the number of ways you can get creative with Liquid Templates; below are some sample use cases and code snippets to get you started. We highly recommend testing all your Liquid templates thoroughly in order to ensure they are error free!

Test your code in a Liquid Sandbox

Rolling Expiration Date

Add an expiration date to your creative that will always show 90 days from the time of print. The Liquid filter below creates a Unix timestamp, adds the number of seconds in 90 days and then reformats the date.

<!-- Example -->
If the postcard is printed on January 1, 2020 the output will automatically calculate and show 90 days in the future. 

<!-- Code -->
<div class="terms">
  <p>
	Offer valid before {{ "now" | date: "%s" | plus: 7776000 | date: "%b %e, %Y" }}. Visit heypoplar.com/legal for additional terms.
  </p>
</div>

<!-- Output -->

Offer valid before Mar 31, 2020. Visit heypoplar.com/legal for additional terms.

Character Casing

If your audience data contains some values that appear in all caps, lowercase, or a mix of both, Liquid can be used to ensure they appear consistently formatted in your creative design. Below is an example for how to make sure all first_name data appears in proper case, with the first letter uppercase and the rest lowercase.

<!-- Example -->
If audience data contains first_name "jane" or "JANE" you want to make sure it always appears as "Jane"

<!-- Code -->

<div class="dynamic-greeting">
  <p>
	Hey {{ recipient.first_name | capitalize }}! Check out our new summer styles...
  </p>
</div>

<!-- Output -->

	Hey Jane! Check out our new summer styles...

Variable Discount

Offer a variable discount based on a customer’s purchase history, average order value, lifetime value, etc. The Liquid tag below will use a custom merge tag to display a different message based on the purchase_history value listed in your audience data.

<!-- Example -->
A value greater than or equal to $200 for purchase_history would should read: 
"In celebration of your birthday, please take 20% off your next purchase..."

A value below $200 should read:
"In celebration of your special day, take $10 off your next purchase..."

<!-- Code -->

<h1>
	We want to say thank you for your loyalty -
</h1>

{% if custom.purchase_history >= "200.00" %}
<p>
	Enjoy 20% off your next purchase!

{% else %}

	Here's $10 off your next purchase of $100 or more! 
</p>
{% endif %}


<!-- Output for purchase_history >= $200 -->

	We want to say thank you for your loyalty -
	Enjoy 20% off your next purchase!

<!-- Output for purchase_history < $200 -->

	We want to say thank you for your loyalty -
	Here's $10 off your next purchase of $100 or more!

Terms & Conditions

Dynamically alter legal text based on the recipient's city or state .

<!-- Example -->
Adjusting the legal text only on mailers sent to California to be CCPA compliant

<!-- Code -->

<p>
	Offer valid for first purchase.
</p>
<p>
{% if recipient.state == “CA” or recipient.state == "California" %}

	Under the California Consumer Privacy Act (CCPA)...

{% else %}

	Read our privacy policy at heypoplar.com/legal.

{% endif %}
</p>

<!-- Output for California residents -->

	Offer valid for first purchase. Under the California Consumer Privacy Act (CCPA)...

<!-- Output for everywhere else -->

	Offer valid for first purchase. Read our privacy policy at heypoplar.com/legal.

Behavior Dependent Images

Show a different product image based on characteristics related to the recipient’s most frequently purchased item. Below we have a custom merge tag called item-color, and the image shown in the creative features items of a similar color to those most frequently purchased.

<!-- Example -->
If a customer frequently buys red sunglasses, we want to show an image containing mostly red sunglasses.

If a customer frequently buys blue sunglasses, we want to show an image containing mostly blue sunglasses.

<!-- Code -->

<img 
{% if custom.item-color == "red" %}

	src="https://amazons3.com/my_images/red_sunglasses.png"

{% elsif custom.item-color == "blue" %}

	src="https://amazons3.com/my_images/blue_sunglasses.png"

{% else %}

	src="https://amazons3.com/my_images/mixed_sunglasses.png"

{% endif %} 
>
					 
<!-- Output for Red -->

<img src="https://amazons3.com/my_images/red_sunglasses.png">

<!-- Output for Blue -->

<img src="https://amazons3.com/my_images/blue_sunglasses.png">

<!-- Output for N/A -->

<img src="https://amazons3.com/my_images/mixed_sunglasses.png">

PreviousStatic: PDF & PNG/JPG NextPrint Troubleshooting

Last updated 20 days ago