Dynamic Creatives

A comprehensive guide to HTML creative formatting

Dynamic creatives (designs featuring variable or personalized data) using Merge Tags or Liquid Template logic, must be uploaded in HTML file format. 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 static PDF.

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

Templates by Use Case

Below are a some HTML template files, designed by use case to get you started. If no one on your team has HTML design knowledge, but you want to utilize our default or custom merge tag features, reach out to support@heypoplar.com to discuss your options with an account manager.

HTML/CSS Best Practices

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, and implementing -webkit- prefixes for more complex CSS properties such as transform:

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

URLs and File Paths

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

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

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.

<link>ing 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 <style> 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");
      }