Conditional content that only shows in View As Web Page mode

A community user wondered if they could show an email’s Subject line in View As Web Page mode.

It makes sense that Subject and other SMTP headers aren’t part of the VAWP display: it’s designed to show the HTML content. (And the Subject is typically reflected in the content anyway, albeit with different phrasing.)

But you can set any element to only show in View As Web Page – including a copy of the Subject line!

Just hide the content by default in all clients, as you would with an email preheader:

<table id="emailSubjectMirror" style="mso-hide:all;mso-line-height-rule:exactly;visibility:hidden;opacity:0;color:transparent;line-height:0;font-size:0px;display:none;">
<tbody>
<tr>
<td>They’re tariffin’ pariffin, but our tactical candles are made here in the US of Flamin’ A</td>
</tr>
</tbody>
</table>

Then include this CSS, which will unhide the content in VAWP mode:

body:has(#forwardtoFriendDropDown) #emailSubjectMirror {
    display: unset !important;
    visibility: unset !important;
    opacity: unset !important;
    color: unset !important;
    line-height: unset !important;
    font-size: unset !important;
}

(VAWP always injects a Forward to Friend container, even when it's not in use. So that's how you detect it.)

Obviously you need not unset the color and font completely, that’s just a simplified example of un-hiding the element. You can set whatever styles you want.

P.S. You can make VAWP very slick via by adding non-email-compatible CSS or even JS. The ROI might not compete with that same time spent jazzing up your LPs, of course, but it’s worth an A/B test.