Introduction

There are many reasons you & your organization may want a user to be able to view one of your emails on a webpage in addition to their email client. One big reason that we wanted this functionality is due to the insanity that comes with trying to make sure your emails look the same across email clients (I’m pretty sure our communications team has wanted to watch the world burn from trying to work on this). In addition to email client display issues, I’m sure there are a multitude of additional reasons that I haven’t thought of! In this recipe I’ll do my best to walk you through this process. Really it’s mostly just copy & pasting.

 

Let’s Get Started

Step 1:

In order to show this on a webpage, you’ll need to create a page for it to display on. We put this on our external site with a "Blank" page template, but really you can put it wherever & with whichever template you'd like. I’d recommend giving your page a Page Route, we used the term “WebEmail” so you’ll see that throughout the rest of this Recipe, but feel free to make your own! Just replace “WebEmail” with whatever term you chose.

 

Step 2:

It’s time to add the on page content. We’ll want to create an HTML Content block on the page, and then you’ll put the following code into the block:

<style>
    /* Reset styles to not conflict with emails */
    table {
        background-color: transparent;
    }
</style>
{% sql %}
    SELECT
        c.[message] as Message, c.[Subject] as Subject
    FROM
        [Communication] c
    WHERE
        c.[GUID] = '{{  'Global' | PageParameter:'cg' }}'
{% endsql %}
<div class="pull-right" style="text-align:right; line-height:1; font-size: 14px; padding:5px;">Not {{ CurrentPerson.NickName }}? <a href="/Auth/Logout">Logout</a></div>
{% for item in results %}
    <script>
        document.title = '{{ item.Subject }}';
    </script>
    
    <div id="emailMessage">{{ item.Message | RunLava }}</div>
{% endfor %}

In that code we’re grabbing the Communication which contains the raw Lava, and using that to output the email as well as rename your tab to the Subject of the email.

Last thing before we move on, you’ll want to edit the block settings to enable SQL commands.

 

Step 3:

We need to put a link into our emails, right? There are two ways to put a link into your emails:

              1: in your email template

              2: in your WYSIWYG editor in the communication creator

Both options use the same base code, but with a few changes.

Email Templates

Go to the template you’d like to edit under [Admin Tools > Communication Settings > Communication Templates]. Once you’re there we’ll paste the following into the location you’d like the link to show up:

{% raw-%} <a href=”https://rock.yourdomain.org/webemail?cg={{- Communication.Guid -}}}&rckipid={{- Person | PersonTokenCreate:129600,null,2715 -}}“>View Email on Web</a> {%- endraw %} 

Don’t forget to change the domain to your domain & change the page id (2715) to your page’s Id.

We wrap it in the Raw tags so it processes the lava at the time of sending, and can insert the guid of the communication& the person token to log in the recipient. We have our impersonation token set to expire 90 days after it was sent & it only allows them to access our email on web page.

WYSIWYG Editor

This is a bit simpler than the template, but you’ll have to add this to each communication as you send it. Open a new communication & once you’re to the wysiwyg editor, you’ll go to where you want this and paste the following:

<a href=”https://rock.yourdomain.org/webemail?cg={{- Communication.Guid -}}}&rckipid={{- Person | PersonTokenCreate:129600,null,2715 -}}“>View Email on Web</a>

Don’t forget to change the domain to your domain & change the page id (2715) to your page’s Id.

We have our impersonation token set to expire 90 days after it was sent & it only allows them to access our email on web page. Feel free to change that!

Conclusion

Now that you've done all the prep work, it should work! I hope this helps you get your email on the web to solve whatever issue or hole you're looking to fill.

Please feel free to DM me in RocketChat! I'd love to help if you run into any issues.