Can You Hide The View In Browser Link When Viewing In Browser?

*** NOTE: ALL INFORMATION IS ACCURATE AT DATE OF PUBLISHING ***

I recently had a question via my blog that asked about the View In Browser link you can add to your emails in Customer Insights – Journeys. Specifically, when someone clicks that from the email and they are in fact ‘viewing in browser’, can it be hidden? Otherwise it is a bit circular, view in browser to view in browser and so on. There is no way out of the box so I figured I would see if it was possible. Spoiler, it is BUT with limitations. Read on to find out if you can hide the view in browser link when viewing in browser.

First, this is the link I am referring to. This makes it easy for people to simply click the link to see your email as it was intended which is useful if they aren’t able to see images or other content. However, it makes sense that this link no longer shows after someone is actually viewing it in their browser.

For this, we can add a little bit of CSS in the HTML of the email. Email clients either ignore or partially support the @media screen logic while browser versions fully respect it. When clicking on the View In Browser link, CI-Journeys renders the browser view as a standard webpage. So this should mean that for the inbox view the link shows but for the browser view the link is gone.

@media screen {
    .vib-link {
        display: none !important;
    }
}

After adding the CSS at the top in the <style> section, you need to add that as a class to the DIV wrapped around your view in browser link. It should be pretty easy to find by doing a Ctrl+F to search through the code and look for ViewInBrowser. Then simply add in class=”vib-link” to that div like you see below.

Now when you send out an email, the View In Browser link should still show in your emails (caveats to this explained further down) when looking in your inbox. Clicking the link should take you to the browser view, and the link should be hidden. Nice!

Now, here is where the issue lies. Or rather, the perceived issue. When viewing the email in Gmail, the View In Browser link does not show at all. That is because Gmail (and possibly other email clients) is actually a browser itself. When someone opens an email in Gmail, the CSS behaves like a webpage and it is rendered inside a real web browser (Chrome, Safari, etc.). Therefore, media queries apply and the link is automatically hidden.

If you send out purely business emails, you may be OK with this and happy to have the hidden link logic added. In theory, your emails should look good in Gmail based on the fact that they are treated as if they were already in a browser anyway, so not having the link there might not even be a factor. One other little tip for you that helps with your branding is to update the fav icon that shows when the email is viewed in a browser. By default it shows with this little globe icon.

If you are familiar with your own website you ideally have a favicon stored. You can simply use the same lines of code from your site that are used to set the fav icon, just make sure the href links are the FULL links including the domain as likely your site just uses partial links.

Now when I click on View In Browser, my own fav icon is visible instead. Nice!

---

This is just 1 of 564 articles. You can browse through all of them by going to the main blog page, or navigate through different categories to find more content you are interested in. You can also subscribe and get new blog posts emailed to you directly.

---