# Dynamic: HTML/CSS

## 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.

<figure><img src="https://714650678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FweKl52r7fuUrhTjt6jLd%2Fuploads%2FWG98LwUYtsnuJLocyVev%2Fimage.png?alt=media&#x26;token=fa22e413-c921-43f3-a2f6-b4100d12fda4" alt=""><figcaption></figcaption></figure>

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:

{% embed url="<https://heypoplar.com/creative-translations>" %}

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**](https://shopify.github.io/liquid/) language.&#x20;

{% hint style="warning" %}
The address block is not considered variable or personalized, since it is always auto-applied by the platform during the upload process.
{% endhint %}

## **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.&#x20;

{% hint style="info" %}
Double check all column headers and Test all triggers before launch to ensure there are no merge tag data discrepancies.
{% endhint %}

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**         | {{recipient.**full\_name**}}   |
| **first\_name**        | {{recipient.**first\_name**}}  |
| **last\_name**         | {{recipient.**last\_name**}}   |
| **address\_1**         | {{recipient.**address\_1**}}   |
| **address\_2**         | {{recipient.**address\_2**}}   |
| **city**               | {{recipient.**city**}}         |
| **state**              | {{recipient.**state**}}        |
| **postal\_code**       | {{recipient.**postal\_code**}} |
| **email**              | {{recipient.**email**}}        |
| **identifier**         | {{recipient.**identifier**}}   |

## Promotions Merge Tag <a href="#promotion-merge-tag" id="promotion-merge-tag"></a>

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.

<figure><img src="https://714650678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FweKl52r7fuUrhTjt6jLd%2Fuploads%2F2VsrZ0AVmfB2bYAZhuWf%2Fimage.png?alt=media&#x26;token=9cb8623d-cf2b-45fd-9cfe-bb9cdd9d0391" alt=""><figcaption></figcaption></figure>

### 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:

<figure><img src="https://714650678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FweKl52r7fuUrhTjt6jLd%2Fuploads%2FJ95JAmkRr5vdOBc7xs0s%2Fimage.png?alt=media&#x26;token=d69b9b7d-7aa7-4365-a7c9-7714294b83e4" alt="" width="325"><figcaption></figcaption></figure>

{% hint style="warning" %}
**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.
{% endhint %}

**Background Image Example**

```
<style>
.qr-code {
 width: 200px;
 height: 200px;
 position: absolute;
 bottom: 100px;
 right: 100px;
 background-color: #fff;
 background-image: url({% qrcode text: 'https://site.com/{{promotion.promo_code}}' %});
 background-size: 100%;
}
</style>

...

<div class="qr-code"></div>
```

**Image Source Example**

```
<img src="{% qrcode text: 'https://site.com/{{custom.field-name}}' %}" class="qr-code" height="200" width="200" />
```

## Location Based Merge Tags <a href="#location-based-merge-tags" id="location-based-merge-tags"></a>

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**      | {{location.**name**}}                                  |
| **Address 1**          | {{location.**address\_1**}}                            |
| **Address 2**          | {{location.**address\_2**}}                            |
| **City**               | {{location.**city**}}                                  |
| **State**              | {{location.**state**}} or {{location.**state\_name**}} |
| **Postal Code**        | {{location.**postal\_code**}}                          |
| **Merge field 1**      | {{location.**merge\_field\_1**}}                       |
| **Merge field 2**      | {{location.**merge\_field\_2**}}                       |
| **Merge field 3**      | {{location.**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](https://docs.heypoplar.com/article/243-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**](https://heypoplar.com/articles/how-to-convert-a-static-design-to-html).&#x20;

***

## HTML/CSS Best Practices <a href="#html-css-best-practices" id="html-css-best-practices"></a>

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:

1. Pulling certain aspects of your static design together
2. Re-saving them as one element
3. Embedding the URL within an `.html` file.&#x20;

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*](https://docs.heypoplar.com/getting-started/creative-templates)*)*
* A text editor such as [Sublime](https://www.sublimetext.com/) or [Visual Studio Code](https://code.visualstudio.com/)
* A tool to preview your design as you code such as a browser window or [Codepen.io](https://codepen.io/)

{% hint style="warning" %}
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.&#x20;
{% endhint %}

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](https://css-tricks.com/almanac/properties/p/position/#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.

{% hint style="info" %}
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.
{% endhint %}

### URLs and File Paths <a href="#urls-file-paths" id="urls-file-paths"></a>

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.&#x20;

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

<table data-header-hidden><thead><tr><th width="171.75"></th><th></th></tr></thead><tbody><tr><td><em>Path Type</em></td><td><em>Example</em></td></tr><tr><td>Absolute</td><td><code>&#x3C;img src="https://www.app.heypoplar.com/logo.png"></code>  <em><strong>Correct</strong></em></td></tr><tr><td>Relative</td><td><code>&#x3C;img src="/images/logo.png"></code>  <em>Incorrect</em></td></tr></tbody></table>

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

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 <a href="#webfonts" id="webfonts"></a>

Dynamic content must use a [GoogleFont](https://fonts.google.com/) or a font with a purchased license.&#x20;

{% hint style="info" %}
**Typekit & Adobe Fonts are not accepted in HTML creatives**, but are welcome to be used in static ones.
{% endhint %}

**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 <a href="#font-face" id="font-face"></a>

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**](https://shopify.github.io/liquid/basics/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](https://jumpseller.com/support/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**&#x20;

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">
```