How to Boost Your Email Open Rate for Training Videos

email open rate featured image

In our Abundance campaign, we offered 3 free training videos for people to opt-in to our funnel (as Jeff Walker and Brendon Burchard teach). Now the way we set up the actual training videos pages and released them was very strategic.

We released the training videos every 3 days via email, with the first training video being delivered immediately. We previewed the 3 training videos as tabs at the top of the website (see below). The fourth video is our sales video into our $996 physical and digital copy of a conference recording featuring Peter Diamandis and Ray Kurzweil.

You probably already know how important it is to set expectations of how and when your emails will be delivered to maximize email open rates and consumption of your content. With the upcoming Gmail Promotion Tab, and the potentially devastating effects it could have to your open rates (if you aren’t prepared) it makes setting expectations that much more important for email delivery.

In this campaign, we created a design for our training videos pages to do just that. In case our users missed everything else we told them about when to expect emails for their training videos, we tell them on the actual training video page and show them visually. As you can see in the two images below, we black out future videos in a tab view. The future videos are not click-able but give a preview to what is coming. The tabs in color are click-able to their corresponding training video pages. I highly recommend this design approach to make sure your community actually watches the videos you spent so much time creating for them. By using this tabbed approach, the design reminds your users to keep an eye on their inbox. Check out the images below and keep reading for step-by-step directions to implement this with your sales funnel.

abundance campaign email open rate screenshot

1st Training Video

abundance campaign screenshot email open rate

2nd Training Video

Step-By-Step Directions

OK! Now that you understand the strategy, let’s talk about the steps to set this up on your own page.

Below is a snippet of the HTML used for the thumbnail navigation. We used an unordered list for the thumbnail containers since this has become the most accepted way to present any kind of navigation. The HTML is extremely basic, CSS and jQuery do most of the work for this functionality.

[code language=”html”]<br />&lt;div class=”videos-list-container” style=”height: 125px;”&gt;<br /> &lt;ul style=”text-align: center;”&gt;<br /> &lt;li class=”first” id=”vl-6-major-insights” style=”cursor: pointer;”&gt;<br /> &lt;div&gt;<br /> 6 Major Insights<br /> &lt;/div&gt;<br /> &lt;img alt=”Abundance the Book: 6 Major Insights” src=”/ab/wp-content/uploads/2013/05/6-major-insights-thumb.jpg” /&gt;<br /> &lt;/li&gt;<br /> &lt;li id=”vl-abundance-in-your-life” style=”cursor: pointer;”&gt;<br /> &lt;div&gt;<br /> Abundance in your Life<br /> &lt;/div&gt;<br /> &lt;img alt=”Abundance the Book: Abundance in your Life” src=”/ab/wp-content/uploads/2013/05/abundance-in-your-life-thumb-bw.jpg” &gt;<br /> &lt;/li&gt;<br /> &lt;li class=”active” id=”vl-what-it-takes-to-win”&gt;<br /> &lt;div&gt;<br /> What it Takes to Win!<br /> &lt;/div&gt;<br /> &lt;img alt=”Abundance the Book: What it Takes to Win!” src=”/ab/wp-content/uploads/2013/05/what-it-takes-to-win-thumb-bw.jpg” /&gt;<br /> &lt;/li&gt;<br /> &lt;li class=”last” id=”vl-exponential-abundance”&gt;<br /> &lt;div&gt;<br /> Exponential Abundance<br /> &lt;/div&gt;<br /> &lt;img alt=”Abundance the Book: Exponential Abundance” src=”/ab/wp-content/uploads/2013/05/exponential-abundance-thumb-bw.jpg” /&gt;<br /> &lt;/li&gt;<br /> &lt;/ul&gt;<br />&lt;/div&gt;<br />[/code]

Notice the unique id attributes added to each of the list item tags. We do this so we can easily reference them with jQuery. Below is a snippet of the CSS for the video thumbnail list:

[code language=”css”]<br />.videos-list-container {<br /> margin: 0;<br /> padding: 10px 0;<br />}<br />.videos-list-container ul {<br /> display: inline-block;<br /> width: auto;<br /> line-height: 1.1em;<br /> list-style-type: none;<br /> margin: 0 auto;<br /> padding: 0;<br />}<br />.videos-list-container li {<br /> border-left: 1px solid #F7F7F7;<br /> border-right: 1px solid #CECECE;<br /> float: left;<br />}<br />.videos-list-container li.first { border-left: medium none }<br />.videos-list-container li.last { border-right: medium none }<br />.videos-list-container ul li div {<br /> font-family: proxima_nova_rgregular;<br /> font-style: normal;<br /> font-weight: normal;<br /> font-size: 0.9em;<br />}<br />.videos-list-container ul li img { padding: 6px 0 }<br />[/code]

This represents the default style for the thumbnail navigation, there will be many modifications made by jQuery depending on the page. At this point we have everything set up and ready for jQuery. We used jQuery 1.9 and as expected it must be included before our code for the thumbnail navigation.

[code language=”js”]<br />$(document).ready(function () {<br /><br /> if ($(‘.6-major-insights’).length &amp; gt; 0) {<br /> $(‘#vl-6-major-insights’).addClass(‘active’);<br /> }<br />[/code]

The first thing we do is look for an HTML tag with the class name of the current page. We added a class name matching the permalink and/or post name to the body tag for every page in the project. This way we can activate jQuery code for individual pages by name. The snippet above says, if the current page is “6-major-insights” add the CSS class of “active” to the list item with an id of “vl-6-major-insights”. As you can see, the first page doesn’t do a whole lot because it is first in the series. The second page in the series has more work to do.

[code language=”js”]<br /> if ($(‘.abundance-in-your-life’).length &amp; gt; 0) {<br /> $(‘#vl-abundance-in-your-life’).addClass(‘active’);<br /> $(‘#vl-6-major-insights’).css(‘cursor’, ‘pointer’);<br /> $(‘#vl-6-major-insights’).on(‘click’, function () {<br /> window.location = ‘/ab/6-major-insights/’;<br /> });<br /> }<br />[/code]

The above code says, if the current page is “abundance-in-your-life”, append the class “active” to the abundance-in-your-life thumbnail. Give the thumbnail a click/pointer cursor and listen for a click event. If the visitor clicks the first thumbnail, they are sent to the first video. This process is repeated for each of the pages or “steps” in the series.

[code language=”js”]<br /> if ($(‘.what-it-takes-to-win’).length &amp; gt; 0) {<br /> $(‘#vl-what-it-takes-to-win’).addClass(‘active’);<br /><br /> $(‘#vl-6-major-insights’).css(‘cursor’, ‘pointer’);<br /><br /> $(‘#vl-abundance-in-your-life’).css(‘cursor’, ‘pointer’);<br /><br /> $(‘#vl-6-major-insights’).on(‘click’, function () {<br /> window.location = ‘/ab/6-major-insights/’;<br /> });<br /> $(‘#vl-abundance-in-your-life’).on(‘click’, function () {<br /> window.location = ‘/ab/abundance-in-your-life/’;<br /> });<br /> }<br /><br /> if (($(‘.exponential-abundance’).length &amp; gt; 0) || ($(‘.exponential-abundance-3’).length &amp; gt; 0)) {<br /> $(‘#vl-exponential-abundance’).addClass(‘active’);<br /><br /> $(‘#vl-6-major-insights’).css(‘cursor’, ‘pointer’);<br /><br /> $(‘#vl-abundance-in-your-life’).css(‘cursor’, ‘pointer’);<br /><br /> $(‘#vl-what-it-takes-to-win’).css(‘cursor’, ‘pointer’);<br /><br /> $(‘#vl-6-major-insights’).on(‘click’, function () {<br /> window.location = ‘/ab/6-major-insights/’;<br /> });<br /> $(‘#vl-abundance-in-your-life’).on(‘click’, function () {<br /> window.location = ‘/ab/abundance-in-your-life/’;<br /> });<br /> $(‘#vl-what-it-takes-to-win’).on(‘click’, function () {<br /> window.location = ‘/ab/what-it-takes-to-win/’;<br /> });<br /><br /> }<br /><br />});<br />[/code]

For this project we elected to create different HTML thumbnail snippets for each page in the series. Here is the HTML snippet for the third page in the series:

[code language=”html”]<br />&lt;div class=”videos-list-container” style=”height: 125px;”&gt;<br /> &lt;ul style=”text-align: center;”&gt;<br /> &lt;li class=”first” id=”vl-6-major-insights”&gt;<br /> &lt;div&gt;<br /> 6 Major Insights<br /> &lt;/div&gt;<br /> &lt;img src=”/ab/wp-content/uploads/2013/05/6-major-insights-thumb.jpg” alt=”Abundance the Book: 6 Major Insights”&gt;<br /> &lt;/li&gt;<br /> &lt;li id=”vl-abundance-in-your-life”&gt;<br /> &lt;div&gt;<br /> Abundance in your Life<br /> &lt;/div&gt;<br /> &lt;img src=”/ab/wp-content/uploads/2013/05/abundance-in-your-life-thumb.jpg” alt=”Abundance the Book: Abundance in your Life”&gt;<br /> &lt;/li&gt;<br /> &lt;li id=”vl-what-it-takes-to-win”&gt;<br /> &lt;div&gt;<br /> What it Takes to Win!<br /> &lt;/div&gt;<br /> &lt;img src=”/ab/wp-content/uploads/2013/05/what-it-takes-to-win-thumb.jpg” alt=”Abundance the Book: What it Takes to Win!”&gt;<br /> &lt;/li&gt;<br /> &lt;li class=”last” id=”vl-exponential-abundance”&gt;<br /> &lt;div&gt;<br /> Exponential Abundance<br /> &lt;/div&gt;<br /> &lt;img src=”/ab/wp-content/uploads/2013/05/exponential-abundance-thumb-bw.jpg” alt=”Abundance the Book: Exponential Abundance”&gt;<br /> &lt;/li&gt;<br /> &lt;/ul&gt;<br />&lt;/div&gt;<br />&lt;!– .videos-list-container –&gt;<br />[/code]

We see here that the HTML is nearly identical to the first snippet. The only change is the images, most of them are the active color versions now instead of the black and white. Initially we tried using CSS to fade the images but it never looked crisp. Using HTML snippets turned out to be the cleanest and best looking way to have this active / inactive look and feel.

OK, that’s it. You now know how to set up your training videos to improve anticipation and open rates for your videos. I hope this article has served you and given you valuable insight into your sales funnel. If you have any questions, let us know in the comment section below so we can help you!

Build Your Email List By 100K This Year Using Quizzes

Get Started

Build Your Email List By 100K This Year Using Quizzes

Get Started