Ever Wanted to Include a Progress Bar - and Didn't Know How?

Recently, I was asked to develop an email that would show a student how they were progressing in a class. it was a challenge that I had to do some thinking over since I knew I didn't want to upload a bunch of graphics. I had to develop an alternate way to accomplish this.

If you're in a similar situation, this solution could be the one that you are looking for. While this implementation is specific to my case, this could easily apply to emails used for shopping cart abandonment or other communications where you want to graphically show someone's progression through a set of tasks or processes.

Here Are The Screenshots of the Progress Bar

These screenshots show that the class timeline at 60% of the total (which for this concept was hardcoded), and then the submission rate, which is not only variable in length but also in color, based on the student's submission rate.

How did I do it?

Let me preface this by saying that I use Salesforce Marketing Cloud, and your experience and what you need to do to achieve this might be different, but I'm confident you can accomplish this same look and feel using most systems.

The screenshots only show sections of the email and are nested tables in the body of the email. I use fluid hybrid design for our emails, in which everything is a percentage of the full width of 640 pixels. Media queries also drive the email's adaptive presentation.

Breaking down my code, you see the row name of "class timeline" is in its own cell, and the progress bar appears to be in the next cell of the table, but it is really a table nested in that cell. the "class timeline" cell is set at 25% of the width of the full table, while the next cell of the table, is set at a width of 75% and has a light grey background housing the progress bar table. like i said previously, for this version of the communication the table is set at 60% of the cell's width, because it is a one time send, but the same process that I use to calculate the submission rate's progress bar would work. All of this sounds confusing and technical, but if you look at the code you'll understand it better:

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="max-width:580px; width:100%;">
<tr>
<td width="25%" style="width:25%;">Class Timeline</td>
<td width="75% style="width:75%; background color:#e1e1e1;">

<!--progress bar-->
<table width="60%" style="width:60%; max-width:60%; background color:#006ba6;">
<tr>
<td style="font-weight:bold; color:#ffffff;">60%</td>
</tr>
</table>

</td>
</tr>
</table>

For the submission rate, I got fancy. Same premise as above, but I used variables to provide the table width.

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="max-width:580px; width:100%;">
<tr>
<td width="25%" style="width:25%;">Submission Rate*</td>
<td width="75% style="width:75%; background color:#e1e1e1;">

<table width="%%=v(@SubmissionRate)=%%" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td style="text-align: center; color: #ffffff; font-weight: bold;" bgcolor="%%=v(@Fill)=%%">%%=v(@SubmissionRate)=%%%</td>
<tr>
</table>

</td>
</tr>
</table>

The width of the table is defined by the variable named %%=v(@SubmissionRate)=%%, and the background color of the table is defined by the variable "%%=v(@Fill)=%%".

The Magic Happens
Ampscript, Salesforce Marketing Cloud's language, can do a ton of things - including calculations. Unfortunately, calculating percentages isn't one of those things. But you can multiply and divide, and if you remember basic algebra, you can make it work. By combining ampscript and an "if then" statement, I was able to not only calculate the table width but also change the background color of the table.

Here is the ampscript used to calculate the submission rate and define the fill for the background color:

<script>
%%[
     Var @submitted, @SubR, @SubmissionRate

     Set @submitted = [submitted]
     Set @SubR = Divide(@submitted, 50)
     Set @SubmissionRate = Multiply(@SubR,100)
]%%

%%[
     IF @SubmissionRate <= "45" THEN
          Set @Fill = "#BA0C2F"

     ELSEIF @SubmissionRate >= "70" THEN
     Set @Fill = "#78BE20"

     ELSE Set @Fill = "#FFC845"

ENDIF]%%

</script>

Because Salesforce's ampscript won't calculate percentages, you have to find it using two passes. That's why I have the variables @SubR - the decimal result of the number of submitted assignments (@submitted) divided by the total number of assignments (50 in this case), and @SubmissionRate - the whole number percent of @SubR times 100. The @submitted variable, the number of assignments that the student has posted, comes directly from the data extension or sending list.

The first pass divides the number of posted assignments (or completed steps or whatever you might need to measure) by the total number of assignments (steps or the measurement criteria), in this case, 50, resulting in @SubR. The second pass multiplies @SubR by 100, giving you a percentage - and the length of your progress bar.

Then using the if/then statement, I defined what @Fill should be - this adds some color to the email and makes it visually easy to see if a student is "in trouble," "doing okay," or "doing great."

There you have it, a simple progress bar that can be applied to multiple situations, and if you're using a fluid hybrid template, it will also render well and in proportion on mobile devices.

This has been such a success that we are looking at implementing it in other emails to illustrate to students how far they are in their classes and their program overall.