Use the notes below as a guideline to create email notifications with more complex layout than using Email Builder. This requires file hosting, basic knowledge of HTML editing and graphics creation knowledge in order to create image mapping.
- Use HTML tables as the backbone of the email, this will hold and contain all images in one robust HTML email.
- The Recommended image width is 700px, which will provide the email with a consistent behavior on the majority of email clients.
- The maximum per image height is 1700px, as email clients tend to not display images more than 1700px tall. Images should be segmented for this reason.
- Images must have an absolute path to the file hosted on a server. Email clients will not display images with relative paths.
- Display images as ‘block’ and don’t apply a border to avoid unnecessary spaces between images.
- Location of <map name> should be inside the table tag for mapping to work in most email clients.
Get it Now! button
- Use the PLAYMPE_RELEASE_URL token for the “Get it Now!” button
Code samples:
<table>
<tr>
<td>
<img src="http://plaympe.com/image.jpg" alt="1" usemap="#Map1" style="display:block; border:none;" />
</td>
</tr>
<map name="Map1" id="Map1">
<area shape="rect" coords="8,103,695,722" href="PLAYMPE_RELEASE_URL" />
</map>
</table>
Segmented Image (Image more than 1700px)
<!- -mage Segment 1>
<table>
<tr>
<td>
<img src="http://plaympe.com/image-1.jpg" alt="1" usemap="#Map1" style="display:block; border:none;" />
</td>
</tr>
<map name="Map1" id="Map1">
<area shape="rect" coords="8,103,695,722" href="PLAYMPE_RELEASE_URL" />
</map>
</table>
<!- -mage Segment 2>
<table>
<tr>
<td>
<img src="http://plaympe.com/image-2.jpg" alt="1" usemap="#Map2" style="display:block; border:none;" />
</td>
</tr>
<map name="Map2" id="Map2">
<area shape="rect" coords="6,555,854,752" href=" http://plaympe.com/" />
</map>
</table>