Use javascript to bulk process company html email signatures

Email signatures are part of any company’s branded elements. They set the tone to a wider corporate communication plan, introduce visual elements and communicate important information. Emails are a powerful medium which has an amazing volume of client touch-points. The problem is that many times creating an email signature is overlooked as an element of the branding. Often each employee is left to input personal annotations, references, and styling cues which unintentionally erode a carefully planned communication program. The answer of...

Email signatures are part of any company’s branded elements. They set the tone to a wider corporate communication plan, introduce visual elements and communicate important information. Emails are a powerful medium which have an amazing reach as far as client touch-points go. The problem is that many times creating an email signature is overlooked as an element of the branding. Often each employee is left to input personal annotations, references, and styling cues which unintentionally erode a carefully planned communication program.

The answer of course, is to streamline and create a consistent presentation and formatting for every employee. Not a small task, but this solution shows how to use javascript to bulk-process and populate any number of employee html email signatures. Making it possible to have consistent branding across one of a company’s most active customer touchpoint.

First, create an html email signature template that you’re happy with. This will be the basis for all the email signatures, so make sure you’re happy with it. Some elements to consider including in an email signature are:

  • Name – obviously
  • Role – obviously
  • Image – People read and respond to emails more which include a profile picture
  • Contact information
    • Email address
    • Telephone number and extension
    • Mobile phone number
    • LinkedIn address
  • Company website URL
  • Social media
  • Company logo
  • Company slogan or communication

HTML Email signature example:

Preview of HTML Email signature:

htmlemailfootertemplate

Once you are happy with the look of the HTML email signature it’s time to automate the bulk creation of all email signatures. For this you’ll need to know which variables are included. In this example I’ve used five variables, including: Name, Position, Email, Telephone, Image. You’ll need to prepare a spreadsheet of information for each employee with these variables populated for each. This process will become more efficient the more employees a company has. Five employees, it might not be worth creating all this javascript and spreadsheet of employee info. Twenty employees, yes it’s worth it. Two hundred employees, thank me later for saving you all that copy + pasting.

Declare a multi-array variable:

First things first, use the employee spreadsheet to create a multi-array that we’ll use to populate our html. Pay attention to formatting, because the array can be broken very easily. But the formatting is also very easy. Follow the example below:

Create a loop to process the multi-array and populate our HTML:

This is the simplest kind of javascript loop. It runs until the end of the array “a”. Advances by an increment one index “i” each loop. You don’t have to loop the subset of the multi array because we will use a static id to call each variable from the array.

Replace HTML with javascript variables from your array:

Prepare your HTML within the javascript loop so that the template with array variables can be written to the document. I’ve used document.write(); to export these. Don’t forget to escape the html quotation marks otherwise they will break the javascript. You can escape the quotations by putting a backslash infront of them like so\”.

The variables are input by calling the javascript array equivalent like so:

a[i][#]

a = arrayname
i =array row
# = corresponding array column (0 – 4)

The variables in this example are called with the following indexed references:

  • Name – a[i][0]
  • Position – a[i][1]
  • Email – a[i][2]
  • Telephone – a[i][3]
  • Image – a[i][4]

That’s all! The script runs on page load so each time a user opens or visits the page the loop will run. Here’s what you will get:

Javascriptproccessedhtmlemailfooters

 

Complete HTML for bulk processing HTML email signatures: (unlock the locker to grab the complete code)
[sociallocker id=”41491″]

[/sociallocker]

I recently used this process to create html email signatures for an entire company. It would have been impossible to create with any degree of accuracy and consistency the number of email signatures by manual means. People loved them, updating all the email signatures within a couple of days across the entire corporation. This will help communicate the brand, value, and ensures consistency in one of the major customer touchpoints.

Let me know what you think of this process and if you were able to use it to solve a similar problem with positive results. @esasabove

 

Eric Schmidt

I am a designer and creative specializing in Marketing, Branding, UI / UX, and Strategy for companies, startups, products, and good ideas that need to be great.
Liked it? Take a second to support Eric Schmidt on Patreon!

2 Responses to “Use javascript to bulk process company html email signatures”

Leave a Reply