hat
Boomtrain University
BME Guide

Inserting Dynamic Images

If you’re using Boomtrain Marketing Engine, you have two ways to import dynamic content into your email campaign. The first option is through the Advanced Editor. You can design a mobile friendly, adaptive layout that includes both static and dynamic content. From there, you can push the template to your campaign in BME and it will render the dynamic content when you test or push the campaign live.

Instructions for using the BME Advanced editor (including how to add dynamic content) can be found here: http://knowledgebase.boomtrain.com/using-the-advanced-template-editor-boomtrain-marketing-engine/

 

Option 2 for creating Dynamic Content is through our Dynamic Image tool. You can design your DI in your Boomtrain Station account using HTML and CSS, grab the generated DI snippet, and paste it into your campaign template. In order to create the Dynamic Image, check out this article: http://knowledgebase.boomtrain.com/creating-dynamic-image-for-email/.

This article will cover how to actually get your Dynamic Image into your email campaign. You’ll want to have your dynamic image already created, so go ahead and get that.

 

Ready? Alright, here we go:

Inserting Into HTML

If you’re using Dynamic Images, chances are you already have an HTML template that you’ve created outside of BME. However, you can also drop a Dynamic Image into a template that you created in the BME advanced editor. Either way, once you have the HTML in your campaign editor, here’s how to insert the Dynamic Image snippet:

  1. Take the DI you created in the builder:
    Screen Shot 2016-02-12 at 12.38.51 PM
    (Nevermind that this looks like a video. It’s just an image)
  2. Grab the code snippet that was used to create this Dynamic Image:<a href=”http://api.boomtrain.com/dynlink/<APP_ID>/<EMAIL>/<MODEL>/<RECNUM>/<CAMPAIGN_ID>?bt_ts=<TIMESTAMP>” target=”_blank”><img src=”http://api.boomtrain.com/dynimg/<APP_ID>/<EMAIL>/<MODEL>/<RECNUM>/<CAMPAIGN_ID>.png?bt_ts=<TIMESTAMP>”/></a>
  3. We want to drop this snippet into the email template in the exact spot that will make it look exactly like the static content. Let’s see what that currently looks like:
    Screen Shot 2016-02-12 at 12.37.17 PM
  4. When viewing your HTML template in a browser or editor, find the block that defines the content that your DI will replace.
    Screen Shot 2016-02-12 at 12.53.47 PM
  5. In this example, the template is built using tables (a common practice when creating email templates). This works well because it means we can drop Dynamic Image right beneath the <td> tag. Be sure to delete all of the content between the opening and closing <td> tags before dropping in your DI snippet. We also recommend wrapping your Dynamic Image in <div> tags.<tr>
    <td>
    <div><a href=”http://api.boomtrain.com/dynlink/<APP_ID>/<EMAIL>/<MODEL>/<RECNUM>/<CAMPAIGN_ID>?bt_ts=<TIMESTAMP>” target=”_blank”><img src=”http://api.boomtrain.com/dynimg/<APP_ID>/<EMAIL>/<MODEL>/<RECNUM>/<CAMPAIGN_ID>.png?bt_ts=<TIMESTAMP>”></a></div>
    </td>
    </tr>
  6. To make sure it looks correct, load up the HTML template in your browser:
    Screen Shot 2016-02-12 at 12.37.43 PMSuccess!

 

 

Shares
Share This