{"id":15312,"date":"2019-11-06T21:20:45","date_gmt":"2019-11-06T21:20:45","guid":{"rendered":"http:\/\/www.glitnir.com\/?page_id=15312"},"modified":"2019-11-06T21:29:19","modified_gmt":"2019-11-06T21:29:19","slug":"dynamic-images","status":"publish","type":"page","link":"https:\/\/www.glitnir.com\/index.php\/using-the-editor\/dynamic-images\/","title":{"rendered":"Using dynamic images for countdown timers and personalized content"},"content":{"rendered":"<div id=\"pl-15312\"  class=\"panel-layout\" ><div id=\"pg-15312-0\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-15312-0-0\"  class=\"panel-grid-cell\" ><div id=\"panel-15312-0-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<p><span class=\"wysiwyg-font-size-large\">Overview<\/span><\/p>\n<p>Dynamic images are images that change depending on one or more values that are \"passed\" to the system that delivers them.<\/p>\n<p class=\"wysiwyg-text-align-center\"><img src=\"https:\/\/support.beefree.io\/hc\/article_attachments\/360005728311\/niftyimages_cupcake_niftyimages.png\" alt=\"niftyimages_cupcake_niftyimages.png\" \/><\/p>\n<p class=\"wysiwyg-text-align-center\"><span class=\"wysiwyg-font-size-small\">Image courtesy of\u00a0<a href=\"https:\/\/niftyimages.com\/?utm_source=beefreeio\" target=\"_blank\" rel=\"noopener noreferrer\">NiftyImages<\/a><\/span><\/p>\n<p>The link to the image is no longer a static URL like this one...<\/p>\n<pre>https:\/\/beefree.io\/images\/bee-logo-white.png<\/pre>\n<p>... but rather a URL that contains some variables, such as an email, a customer ID, a date, etc.<\/p>\n<pre>https:\/\/beefree.io\/images\/?imageBanner={{customer_ID}}<\/pre>\n<p>The variables are merge tags in the URL, and are replaced with actual values (e.g. the ID of a customer, the email of the recipient, the name of the person...) at the time the email is sent or the landing page is rendered.<\/p>\n<p>&nbsp;<\/p>\n<p><span class=\"wysiwyg-font-size-large\">Goals<\/span><\/p>\n<p>The main goals of this feature...<\/p>\n<ol>\n<li>Make it easy to use images as dynamic content<\/li>\n<li>Allow the designer to apply image settings as usual with any static image<\/li>\n<li>Allow the designer to work\u00a0with a sample image in the editor for design &amp; preview purposes<\/li>\n<li>Avoid the use of the Custom HTML block and Merge Content features when a dynamic image is needed, to keep things simple and eliminate the need to introduce external HTML code.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><span class=\"wysiwyg-font-size-large\">Examples<\/span><\/p>\n<p>Some cool examples of dynamic images include:<\/p>\n<ul>\n<li>personalized cards<\/li>\n<li>countdown timers<\/li>\n<li>dynamic ads<\/li>\n<li>product recommendations<\/li>\n<li>etc. etc.<\/li>\n<\/ul>\n<p>Let's take a look at a few examples.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Personalized birthday cards<\/strong><\/p>\n<p>How can you send a birthday card to thousands of customers, via email, each personalized with the customer's first name? With dynamic images, it's easy to do. There are services that can generate images \"on the fly\", personalized the customer's name, like\u00a0<a href=\"https:\/\/niftyimages.com\/?utm_source=beefreeio\" target=\"_blank\" rel=\"noopener noreferrer\">Niftyimages<\/a>.<\/p>\n<p><a href=\"https:\/\/support.beefree.io\/hc\/article_attachments\/360005686612\/bee_dynamic_image_personalized_birthday_card.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img src=\"https:\/\/support.beefree.io\/hc\/article_attachments\/360005686612\/bee_dynamic_image_personalized_birthday_card.png\" alt=\"bee_dynamic_image_personalized_birthday_card.png\" border=\"0\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Now BEE provides easy support for dynamic images, this becomes a\u00a0<em>piece of cake<\/em>\u00a0for users of the editor.<\/p>\n<p>A hardcoded name (\"Allan\") is used in the\u00a0<em>URL<\/em>\u00a0(i.e. the \"placeholder\" URL), whereas a variable (\"{{firstname}}\") is used in the\u00a0<em>dynamic URL<\/em>, to be replaced at send time (or rendering time if it's a landing page) by the name of the recipient of the image (or viewer of the page).<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Dynamic countdown timers<\/strong><\/p>\n<p>Another great application for dynamic images is countdown timers. Here you will be passing in the\u00a0<em>Dynamic URL<\/em>\u00a0the date of an event, the time of a new\u00a0store's\u00a0<em>grand opening<\/em>, the date and time a promotion expires... you name it. The system on the other side will automatically generate a GIF animation that will look like a countdown timer, signaling the time remaining to the event.<\/p>\n<p><a href=\"https:\/\/support.beefree.io\/hc\/article_attachments\/360005686592\/bee_dynamic_image_personalized_countdown_timer.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img src=\"https:\/\/support.beefree.io\/hc\/article_attachments\/360005686592\/bee_dynamic_image_personalized_countdown_timer.png\" alt=\"bee_dynamic_image_personalized_countdown_timer.png\" border=\"0\" \/><\/a><\/p>\n<p>A placeholder image can be used in the\u00a0<em>URL\u00a0<\/em>while you design the message (or page), so you know exactly how the end result will look like.<\/p>\n<p>There are many services that you can use for this purpose.\u00a0<a href=\"https:\/\/niftyimages.com\/?utm_source=beefreeio\" target=\"_blank\" rel=\"noopener noreferrer\">Niftyimages<\/a>\u00a0again, but also\u00a0<a href=\"https:\/\/www.freshrelevance.com\/features\/countdown-timers-and-live-images\/?utm_source=beefreeio\" target=\"_blank\" rel=\"noopener noreferrer\">Fresh Relevance<\/a>,\u00a0<a href=\"https:\/\/countdownmail.com\/?utm_source=beefreeio\" target=\"_blank\" rel=\"noopener noreferrer\">CountdownMail<\/a>, and many others.<\/p>\n<p class=\"info-box\">Note that until this feature was launched, we used a different approach on the Email Design Workshop blog when talking about ways to\u00a0<a href=\"https:\/\/emaildesign.beefree.io\/2016\/03\/tutorial-add-html-countdown-timer-email\/\" target=\"_blank\" rel=\"noopener noreferrer\">add a\u00a0countdown timer to an email<\/a>. That technique is still valid. Using dynamic images is just simpler, and allows you to avoid introducing external HTML as all the HTML is created by the BEE editor.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Dynamic ads<\/strong><\/p>\n<p>You can also use dynamic images to turn your emails into a revenue producer, if you have a large audience and are open to the idea of hosting third-party ads. Companies like\u00a0<a href=\"https:\/\/liveintent.com\/?utm_source=beefreeio\" target=\"_blank\" rel=\"noopener noreferrer\">LiveIntent<\/a>\u00a0provide a quality solution for publishers that want to monetize newsletters, blog digests, etc.<\/p>\n<p><a href=\"https:\/\/emaildesign.beefree.io\/2015\/11\/email-advertising-best-practices\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img src=\"https:\/\/emaildesign.beefree.io\/wp-content\/uploads\/2015\/11\/PureWow-markup.png\" alt=\"Image result for liveintent example\" \/><\/a><\/p>\n<p>Typically you will need to pass a few variables to LiveIntent, including the recipient's email. They will help you configure the Dynamic URL, which you will then simply need to enter into the corresponding field in the BEE editor.<\/p>\n<p>We covered dynamic ads in email in the Email Design Blog in\u00a0<a href=\"https:\/\/emaildesign.beefree.io\/2015\/11\/email-advertising-best-practices\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>A publisher's guide to email advertising<\/strong><\/a>. When we published that article, Dynamic Images did not yet exist as a feature in the BEE editor: now using dynamic ads in your emails is even easier when you build a campaign with BEE and take advantage of dynamic images.<\/p>\n<p>&nbsp;<\/p>\n<p><span class=\"wysiwyg-font-size-large\">Frequently asked questions about dynamic images<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><strong>What happens if I add a\u00a0<em>Dynamic URL<\/em>\u00a0but leave the\u00a0<em>URL<\/em>\u00a0field empty?<\/strong><\/p>\n<p>The\u00a0<em>Dynamic URL<\/em>\u00a0field is only available when an image file has been selected for that image content block. In other words, the URL field cannot be empty.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>What happens if I enable the dynamic image but leave the\u00a0<em>Dynamic URL<\/em>\u00a0field empty?<\/strong><\/p>\n<p>When BEE generates the HTML of your email or landing page, it will use the static image as usual, ignoring the dynamic settings.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Can the dynamic URL entirely be a text placeholder, like\u00a0<em>{{MyDynURL}}<\/em>\u00a0instead of\u00a0<em>https:\/\/someSite.com?someVariable={{MyDynURL}}<\/em>?<\/strong><\/p>\n<p>Yes, there is no need of adding the protocol or other URL related items if it's already provided by your sending platform. In many cases, though, you will use a URL to\u00a0<em>some<\/em>\u00a0service, and pass as part of the URL\u00a0<em>some variables<\/em>\u00a0in the form of merge tags, which will be used by that service to create or personalize the image that will be served.<\/p>\n<ul>\n<li>Typical variables include: email, name, date\/time, customer ID, order ID, offer ID, etc.<\/li>\n<li>The syntax of those merge tags is entirely up to you. It's typically dependent on the system that will be sending out the email or serving the landing page. This is exactly the same as using any other merge tag in the BEE editor.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>What syntax\/characters can be used as dynamic URL?<\/strong><\/p>\n<p>BEE will not perform any validation on the provided syntax, you can use whatever syntax and\/or characters you wish to use.<\/p>\n<p>&nbsp;<\/p>\n<p><span class=\"wysiwyg-font-size-large\">Information for BEE Plugin users<\/span><\/p>\n<p>This final section only applies to users of the embeddable version of the BEE editor.<\/p>\n<p>If you have embedded BEE into your application, please note that the Dynamic image settings in the Image content block are disabled by default. You can turn this feature on by enabling it under the\u00a0<a href=\"https:\/\/support.beefree.io\/hc\/en-us\/articles\/360004546031-Server-side-configurations\">Server-side configurations<\/a>.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Overview Dynamic images are images that change depending on one or more values that are &#8220;passed&#8221; to the system that delivers them. Image courtesy of\u00a0NiftyImages The link to the image is no longer a static URL like this one&#8230; https:\/\/beefree.io\/images\/bee-logo-white.png &#8230; but rather a URL that contains some variables, such as an email, a customer [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":15226,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15312"}],"collection":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/comments?post=15312"}],"version-history":[{"count":2,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15312\/revisions"}],"predecessor-version":[{"id":15327,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15312\/revisions\/15327"}],"up":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15226"}],"wp:attachment":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/media?parent=15312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}