Dynamic Creative Guide
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.
The address block is not considered variable or personalized, since it is always auto-applied by the platform during the upload process.
IN THIS ARTICLE
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.
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:
| 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.
<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 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");
}