CINXE.COM
Adding a dynamic countdown timer to a newsletter - Blog - Professional Website Design, Graphic Design & Print
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Adding a dynamic countdown timer to a newsletter - Blog - Professional Website Design, Graphic Design & Print</title> <base href="https://www.digitalflare.co.uk/" /> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y4QWG6HDGH"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Y4QWG6HDGH'); </script> <meta name="google-site-verification" content="lNpDtBVg7ED7n4j6odnTcZOADLKWUXkPqaGbw4hP27k" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/generic.css" /> <link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css" /> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0" /> <link rel="stylesheet" media="screen and (max-width: 668px)" href="css/mobile.css" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,600,700" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow:400,700" rel="stylesheet" /> <script src="js/jquery.js"></script> <link rel="stylesheet" href="js/owl-carousel/owl.carousel.css" /> <link rel="stylesheet" href="js/owl-carousel/owl.theme.css" /> <link rel="stylesheet" href="js/owl-carousel/owl.transitions.css" /> <script src="js/owl-carousel/owl.carousel.js"></script> <script src="js/default.js"></script> <script src="js/cycle.js"></script> <!-- parallax --> <script src="js/parallax.js"></script> <!-- parallax ends --> <script src="js/fitvid.js"></script> <script src="js/jquery.scrollTo.min.js"></script> <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" /> <link rel="apple-touch-icon" href="img/icons/apple-touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="img/icons/apple-touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="img/icons/apple-touch-icon-iphone4.png" /> <link rel="apple-touch-icon" sizes="144x144" href="img/icons/apple-touch-icon-ipad3.png" /> <link rel="shortcut icon" href="img/icons/favicon.ico" /> <script id="cookieWarn" src="js/eu_cookie_banner.js"></script> </head> <body itemscope itemtype="http://schema.org/WebPage"> <div id="outer_container"> <div id="top_wrapper"> <a id="mobile_menu" href="javascript:void(0);"><i class="fa fa-bars" aria-hidden="true"></i></a> <div class="page_width clear"> <div id="top_left"> <a href="index.php"><img src="img/logos/digitalflare_logo.png" alt="DigitalFlare " /></a> </div> <div id="top_right"> <ul><li><a href="https://www.facebook.com/pages/DigitalFlare-Ltd/170942549610202" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li><li><a href="https://twitter.com/digitalflare" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li><li><a href="https://plus.google.com/+DavidFerdinando" target="_blank"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li><li><a href="https://www.instagram.com/digitalflareuk/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li><li><a href="https://www.youtube.com/channel/UCXIwTAAOLEFMJGiT64ZWqag" target="_blank"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></li><li><a href="contact.php"><i class="fa fa-phone-square" aria-hidden="true"></i></a></li><li><a rel="nofollow noindex" href="https://api.whatsapp.com/send?phone=447974374742"<i class="fa fa-whatsapp" aria-hidden="true"></i></a></li> </ul> <span class="tr_call">Call: <a style="color: #fff;" rel="nofollow noindex" href="tel:02039165890">02039165890</a> or <a style="color: #fff;" rel="nofollow noindex" href="https://api.whatsapp.com/send?phone=447974374742">WhatsApp</a></span> </div> </div> </div> <div class="nav_wrapper"> <div class="page_width"> <div id="menu_wrapper"> <a href="javascript:void(0);" class="close_mobile_menu"><i class="fa fa-times" aria-hidden="true"></i></a> <div id="menu_inner"> <ul class="clear cfont"> <li><a href="index.php">Home<span>Go home</span></a></li> <li><a href="about.php">About Us<span>Digital who?</span></a></li> <li><a href="services.php">Services<span>What we do</span></a></li> <li><a href="hosting.php">Hosting<span>Web hosting & SSL</span></a></li> <li><a href="portfolio.php">Portfolio<span>View our projects</span></a></li> <li><a href="portfolio/Photography-Portfolio.html">Photography<span>Studio photography</span></a></li> <li><a href="portfolio/Print-Work-Portfolio.html">Print & Magazines<span>Print & design services</span></a></li> <li><a class="on" href="blog.php">Blog<span>News & Features</span></a></li> <li><a href="contact.php">Contact<span>Say hello!</span></a></li> </ul> </div> </div> </div> </div> <div id="page_wrapper"> <!-- page header --> <div id="page_header"> <div class="page_width"> <h1>Adding a dynamic countdown timer to a newsletter</h1> <h2>Displaying a dynamic countdown timer in an email was previously considered impossible.</h2> </div> </div> <!-- end page header --> <div class="top_spacing page_width clear"> <div class="clear"> <div id="blog_left"> <div class="blog_header"> <ul class="blog_cat_list clear"> <li>From</li> <li><a href="blog.php?category=18">Email</a></li><li><a href="blog.php?category=20">Ecommerce</a></li> </ul> </div> <div id="blog_content" class="cms"> <p>Displaying a dynamic countdown timer inside an email or newsletter was previously considered impossible. This is because most web countdown timers require server-side input or client-side Javascript to function. But having found a solution, and a free solution at that - I felt compelled to add this information to our blog to help anyone else who needs to insert a countdown inside a newsletter.</p> <p>Back story: We have been building newsletters for companies for many years, but more recently, <a href="https://www.dkeng.co.uk">DK Engineering</a> has hosted several online and live car auctions powered by <a href="https://carhuna.com/">Carhuna.com</a></p> <p>As a result, I had to source a solution to advertise stock with a finite auction end time. My search led me to 'Sendtric'. They offer a free service for generating countdown timers. You don't need to register or pay for a subscription to use it, either!</p> <p>The service allows you to define the time zone settings, countdown end date (any date and time within the next 30 days), language, background colour and finally, the text and number colour. They also have a premium solution that provides much more flexibility over the design/fonts.</p> <p>Here is a snapshot of us creating the countdown timer over at <a href="https://www.sendtric.com/">Sentric</a>.</p> <p><img src="media/1688166000/1690585200/1690670701-9f2b69cb39eeb722b4d7deec78aff669.jpg" alt="" /></p> <p>And a screenshot of the final article once we have embedded the HTML code generated...</p> <p><img src="media/1688166000/1690585200/1690670696-465bc75530f002d04bcc86b50b24ec91.jpg" alt="" /></p> <p>Our search did unveil some alternatives, so these are also worth a mention too, although we have not personally used them to date:</p> <ul> <li>Motion Mail - <a href="http://motionmailapp.com">motionmailapp.com</a></li> <li>Promo Features - <a href="https://promofeatures.com">promofeatures.com</a></li> </ul> <div id="blog_tags"> </div> <div id="disqus_thread"></div> <script> /** * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS. * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/ /* var disqus_config = function () { this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; */ (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = 'https://digitalflare.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </div> </div> <div id="blog_right"> <div class="right_wrapper"> <h3>Blog Categories</h3> <ul class="blog_cats"> <li><a href="blog.php?category=14">Web Hosting and Domain Names</a></li><li><a href="blog.php?category=15">Website Design</a></li><li><a href="blog.php?category=16">DigitalFlare News</a></li><li><a href="blog.php?category=17">Building a Website</a></li><li><a href="blog.php?category=18">Email</a></li><li><a href="blog.php?category=19">Logo Design</a></li><li><a href="blog.php?category=20">Ecommerce</a></li><li><a href="blog.php?category=21">Social Media</a></li><li><a href="blog.php?category=22">Search Engine Optimisation</a></li><li><a href="blog.php?category=23">Security</a></li><li><a href="blog.php?category=24">Graphic Design</a></li> </ul> <h3>Popular Blog entries</h3> <div class="small_blog_row clear"> <a href="blog/view/logo-design-styles-and-logo-build-questionnare/"> <div class="left"><span style="background-image: url('media/1477958400/1479686400/thumb_1479765552-3338806736cfb2aa9c4e034b05c1aa87.jpg');"></span></div> <div class="right"> <span class="title">Logo Design Styles and Logo Build Questionnare</span> Logos are essential for business if you plan to build or design a strong brand identity. A well-constructed logo can create loyal followers through simplicity and memorability. If you want a logo desi... </div> </a> </div> <div class="small_blog_row clear"> <a href="blog/view/celebrating-9-years-of-partnership-with-italian-for-all-a-website-that/"> <div class="left"><span style="background-image: url('media/1722466800/1725058800/thumb_1725111831-5f47648bb88da6515a86525f48f6f41d.jpg');"></span></div> <div class="right"> <span class="title">Celebrating 9 Years of Partnership with Italian for All: A Website That Stands the Test of Time</span> At DigitalFlare Web Development, we believe in building long-lasting relationships with our clients, and there’s no better example of this than our ongoing partnership with Italian for All. For ... </div> </a> </div> <div class="small_blog_row clear"> <a href="blog/view/google-s-top-2016-searches-revealed/"> <div class="left"><span style="background-image: url('media/1480550400/1483142400/thumb_1483159859-bf0277fa67fed36af4a1171bcb0c192f.jpg');"></span></div> <div class="right"> <span class="title">Google's top 2016 searches revealed</span> Google has released its annual list of the year's most popular searches, offering another simple but revealing glimpse into the world's psyche. In 2016, money, music, and natural disasters took up the... </div> </a> </div> <div class="small_blog_row clear"> <a href="blog/view/the-porsche-9113601014-2-7-rs-lightweight-book-design/"> <div class="left"><span style="background-image: url('media/1596236400/1597359600/thumb_1597370348-7051546374fc95ba42a759fead61b667.jpg');"></span></div> <div class="right"> <span class="title">The Porsche 9113601014 (2.7 RS Lightweight) Book Design</span> Over the past few weeks, we have been privileged to work on a small information book of the Gulf Sponsored Porsche Carrera 2.7 Lightweight Chassis 9113601014 (known simply as RSL #1014). The book has ... </div> </a> </div> </div> </div> </div> </div> </div> <div id="footer_wrapper"> <div id="footer_inner"> © Copyright 2025 DigitalFlare Ltd - All Rights Reserved <br /> Company No. 06992385 - Fri 21st Feb 2025 - <a href="files/terms.pdf" target="_blank">Terms & Conditions</a> - <a href="privacy.php">Privacy Policy</a> </div> <div class="page_width dumpbase"> <strong>Local-Visits Areas Covered Include:</strong> <a title="Ascot Web Designer" href="website-design-company/Web+Designer/Ascot/Web+Designer">Ascot</a>, <a title="Bracknell Web Designer" href="website-design-company/Web+Designer/Bracknell/Web+Designer">Bracknell</a>, <a title="Maidenhead Web Designer" href="website-design-company/Web+Designer/Maidenhead/Web+Designer">Maidenhead</a>, <a title="Eton Web Designer" href="website-design-company/Web+Designer/Eton/Web+Designer">Eton</a>, <a title="Uxbridge Web Designer" href="website-design-company/Web+Designer/Uxbridge/Web+Designer">Uxbridge</a>, <a title="Windsor Web Designer" href="website-design-company/Web+Designer/Windsor/Web+Designer">Windsor</a>, <a title="Amersham Web Designer" href="website-design-company/Web+Designer/Amersham/Web+Designer">Amersham</a>, <a title="Beaconsfield Web Designer" href="website-design-company/Web+Designer/Beaconsfield/Web+Designer">Beaconsfield</a>, <a title="Slough Web Designer" href="website-design-company/Web+Designer/Slough/Web+Designer">Slough</a> and <a title="Chesham Web Designer" href="website-design-company/Web+Designer/Chesham/Web+Designer">Chesham</a> </div> </div> <!--Start of Tawk.to Script--> <script> var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date(); (function(){ var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0]; s1.async=true; s1.src='https://embed.tawk.to/57e84dd86339c4365aae298d/default'; s1.charset='UTF-8'; s1.setAttribute('crossorigin','*'); s0.parentNode.insertBefore(s1,s0); })(); </script> <!--End of Tawk.to Script--> <script src="js/css3-animate-it.js"></script> </div> </body> </html>