I built this project: https://github.com/tommairs/vib, to satisfy the need of having a View In Browser capability usable with SparkPost. Originally, I put it together as a demo project for a customer use case, so it is not likely as bullet-proof as it could be. My intention in making it available and writing up a post is to share with people who may want to integrate the concepts into their own message generation tools. In other words, I am warning you up front that this is not production hardened so don’t call me if it breaks.
First, you may be asking yourself “what the heck is this “view in browser thing”? If not, feel free to skip this paragraph and get on with the show. For those of you still reading, a “view-in-browser” link (VIB for short) is that handy link you sometimes see at the top of an email that will open up the email in a web browser outside your email program. This is useful for a number of reasons, but mostly it is for standardized readability. Email applications like Outlook or some mobile readers can mangle the content and it can be much easier to read in a web browser like Chrome or Firefox. VIB also switches the security control from your email application to your web browser which often has more real-time security enabled. I’ve included a sample below:
The code takes in a BCC of a message and presents it for Web Browser viewing. It uses a random number and the current timestamp to provide a UUID to identify a specific message. I can think of a number of ways to make that much more secure and unique, so by the time you clone the repo, that part may have changed.
The code comes in two parts.
- A component that creates a link with the UUID that can be added to the message content
- A component to store a copy in a Web service for viewing after some time.
Arguably a 3rd component is an administration tool for the web service that allows you to control how long messages are stored. That was one of the huge points of conversation in this project – how big a server do you need for this? If you use this to send 1 million 100KB messages then every single one will create a unique file in your web server. Actually, two files if you use the code as-is. There will be an HTML and a TEXT version stored that will potentially be approximately 50KB each. In any case, that will consume 100Gb of storage. Plan accordingly.
The first component mentioned above is genkey.php – an API that accepts an email address, and campaign_id, creates a hash and returns it for use as the ViewInBrowser link.
The second component is the collector econsumer.php – This will take in a relay-webhook from SparkPost and save the HTML and TEXT parts as files for later viewing. Be sure to create a valid inbound domain first.
Once you have set up your web server, go to your SparkPost account and set up a couple of things:
First, you must ensure that you have registered an inbound domain in your SparkPost account.
When you are creating a message, first execute the genkey.php script. You can do this remotely from any web browser and just copy and paste the provided link, or you can use it programmatically. eg: wget /genkey.php. This will produce something like https://<your_server>/<your_app>/vib?l=1516749514104287
Now use that link as the View In Browser link. For example, at the top of the message you can add something like this:
“Click HERE to view this message in your web browser.”
Again, this can be done programmatically very easily, or you can do it manually. Here is a sample of it being done manually in Gmail:
Where the “click here” link resolves to a formatted VIB link:
Now when you send the message, you need to BCC your VIB app so that it can create viewable images. You do this by sending a copy to the inbound domain you defined earlier. The local part is irrelevant, so if your inbound domain is “mynewserver.com”, then you can BCC the message to “email@example.com” and let the code to all the rest.
The resulting web view can be represented in TEXT or HTML and you can toggle between them.
Feel free to clone, copy, branch and leave any comments or suggestions in the repo.