EVENT PLANNING MYTHBUSTER Building Pre-event Engagement: How to Make an Email Invite
YOUR STEP BY STEP GUIDE In reality, most events begin months before the doors open on the first day. The internet is awash with attending companies delivering their pre-event campaigns, after all it s a vitally important part of the event experience. But what do you do if you weren t born with this mythical web Kung-Fu? If the thought of mastering HTML code, or telling the difference between a URL and a jpeg leave you in a cold sweat, relax! We ve got you covered. This is our step-by-step guide to building a great email invite. This is a great first step on the ladder and you can send out to your contacts before a show begins. Written with the help of our own webmaster and a total novice, this guide will walk you through every element of making an invite that puts anything your office based email system to shame. 01001100 01100101 01110100 00100111 01110011 00100000 01100111 01100101 01110100 00100000 01100011 01101111 01100100 01101001 01101110 01100111 00100001 (That s binary for Let s get coding! )
THINGS YOU LL NEED
YOUR EMAIL TEMPLATE This is your email template. It s pretty basic but it does the job and it looks way more professional than something cobbled together in Outlook or the like. If you click on a section of the email, you ll find the corresponding page on how to edit it.
1 EDITING YOUR TITLE HEADER If you edit the text between the title tags (highlighted for you in yellow) this will change the name of the internet tab you have open. It ll help your contacts find your email if they have lots open at once! <title>invite</title> 3 ADDING YOUR LOGO <title>hello</title> 2 EDITING YOUR VIEW IN WEBLINK You ll need to include a view in web link. Most ESPs automatically generate and add the link for you, but you should be free to edit the text it appears with to make it more appealing. We ve left the link spot blank in your download; but you can see here is the code your looking for We ve left a space for your logo here. All you need to do is upload your logo image (a.png or.jpeg file will be fine) to either your ESP or a file hosting site, then drop the URL between the speech marks next to where it says src. To fit in our template, your logo should be no more than 80 pixels high. Before <td align= left class= head318 > <a target= _blank href= title= Visit our website > <img src= alt= GES logo width= 173 height= 70 = text-decoration:none; LOGO color:#00a0af; font-family:calibri, lucida grande, sans-serif; Why do you need it? view_email_url Say your email doesn t quite appear properly in your contact s inbox; the view in web link allows your contact to click on the link and view the email in their web browser in all its glory. You can see here the alt text LOGO is showing as there is no image covering it After There s more on this on the next page... RETURN TO LAYOUT
Now you just need to do some basic code housekeeping. It s considered good practice to enter some title text (what appears when you hover over the link), a href (a place for a URL link, usually back to your website for a logo), and some alt text (the alternative text that will appear if images are disabled in your contact s inbox). Remember: Enter all your links and text between the speech marks next to the code you want to effect! 4 CHANGING YOUR HEADLINE TEXT <td align="right" class="head318" style="font-family:calibri, lucida grande, sansfont-size:20px; color:#00a0af; line-height:21px;" colspan="5"> Lorem ipsum <td align="right" class="head318" style="font-family:calibri, lucida grande, sansfont-size:18px; color:#444444; line-height:21px;" colspan="5"> dolor sit amet <br> This bit s easy; just delete the Lorem ipsum text and write a short headline. We always include the event name, venue and date here so it s clear what the After email is about (we put the event name in the bigger teal <td align="left" class="head318"> colour text so it s easy to see) but it s your <a target="_blank" href="http://ges.com/eu/home" title="visit our website"> <img src=" http://bit.ly/1eyac7z" email and you can write whatever you like! alt="ges logo" width="173" height="70" ="text-decoration:none; color:#00a0af; font-family:calibri, lucida grande, sans-serif;" border="0" /> <td align="right" class="head318" style="font-family:calibri, lucida grande, sansfont-size:20px; color:#00a0af; line-height:21px;" colspan="5"> Hey there <td align="right" class="head318" style="font-family:calibri, lucida grande, sansfont-size:18px; color:#444444; line-height:21px;" colspan="5"> check this out <br> You can see here the title showing when you hover over the image RETURN TO LAYOUT
BODY 5 CHANGING THE IMAGE The process of changing this image is the same as changing the logo, but we ll explain it here again: We ve left a space for your main image here. All you need to do is upload your image (a.png or.jpeg file will be fine) to either your ESP or a file hosting site, then drop the URL between the speech marks next to where it says src. To fit into our template, your logo should be no more than 640 pixels wide. We ve intentionally squished an image in here and so it doesn t look right. If you don t have Photoshop, this is a handy trick you can use to adjust image size in your code: Look for the bits that say width= and height= Just change the values to what you want bear in mind that image width and height are measured in pixels. width= 638 height= 242 width= 638 height= 150 <img src="" alt="image" border="0" width="638" height="242" style="display:block; border:none; outline:none; text-decoration:none; color:#00a0af; font-family:calibri, lucida grande, sans-serif;" class="banner"/> CODE HOUSE KEEPING! It s considered good practice to enter some title text (what appears when you hover over the link), a href (a place for a URL link, usually back to your website or landing page), and some alt text (the alternative text that will appear if images are disabled in your contact s inbox). Remember: Enter all your links and text between the speech marks next to the code you want to affect! MUCH BETTER! Unlike web browsers, email clients aren t as forgiving so you need to define the width and height values or your image might not appear. RETURN TO LAYOUT
6 7 TEXT IS TEXT! FOOTER This is the only part of the email that has a different colour background. <td style="font-family:calibri, lucida grande, sans-serif; font-size:15px; line-height:18px; font-weight:normal; color:#444444;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor So, if incididunt you want to ut change labore it, just et follow dolore these magna simple aliqua. steps: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <table width="640" bgcolor="#444444" Another easy bit; all you need to do here is delete the Lorem ipsum text and replace it with your own. Invites should be short, to the point and friendly. Vital pieces of information to include are: Your stand name Your stand and hall number Look for the little bit of code that says bgcolor. You can set by either a hex value or a word (use this handy guide to choose your own colours!) The below example shows the different ways you can create a standard blue: bgcolor= #000fff bgcolor= blue What your visitor gets for coming to see you e.g. a discount off your product when they present a copy of your email Sign off from a person, not a team e.g. John Smith Managing Director, The Super Widget Company TOP TIP If you need to find any text in and amongst all this code, use the find function (Ctrl+F Keys) Read on for more information about editing the text in your footer... RETURN TO LAYOUT
8 SO WHAT ABOUT THE TEXT! This is just the text in your footer; we usually put our company website in and link to it (don t forget to add your link between the quote marks in the href) <a href= style= text-decoration:none;color:#ffffff; > Lorem ipsum <a href= style= text-decoration:none;color:#ffffff; > ges.com Next up, if you ve got some social media accounts, why not link your email up to them? It helps extend your reach. Like all links, all you need to do is put the link to you social page into the href, just delete the images of the social platforms you don t have (eg. the one that looks like radio waves we use to represent our blog). <td align="right" width="28%" style="padding-top:5px; padding-bottom:2px;" class="footer"> As something extra, <a title="" we include href="" a little bit target="_blank" of text before the style="text-decoration:none;"> social icons to <img src="http://image.email.onpeakevents.com/lib/fe9515737d64037976/m/1/blog-new-white.png" border="0" height="30" width="30" /> add some personality. <a title="" href="" target="_blank" style="text-decoration:none;"> <img src="http://image.email.onpeakevents.com/lib/fe9515737d64037976/m/1/twitter-new-white.png" border="0" height="30" width="30" /> <a title="" href="" target="_blank" style="text-decoration:none;"> <img src="http://image.email.onpeakevents.com/lib/fe9515737d64037976/m/1/facebook-new-white.png" border="0" height="30" width="30" / <td align= right <a title="" style= font-family:calibri, href="" target="_blank" lucida style="text-decoration:none;"> grande, <img src="http://image.email.onpeakevents.com/lib/fe9515737d64037976/m/1/youtube-new-white.png" border="0" height="30" width="30" /> sans-serif; font-size:15px; line-height:18px; font-weight:normal; <a title="" href="" target="_blank" style="text-decoration:none;"> color:#ffffff; class= fthide > <img src="http://image.email.onpeakevents.com/lib/fe9515737d64037976/m/1/linkedin-new-white.png" border="0" height="30" width="30" / dolor sit amet <td align= right style= font-family:calibri, lucida grande, sans-serif; font-size:15px; line-height:18px; font-weight:normal; color:#ffffff; class= fthide > fancy a natter? RETURN TO LAYOUT
9 LAST, BUT NOT LEAST 10 CLICK SEND! ont-family: calibri, lucida grande, sans-serif; font-size:11px; col You are currently registered to receive this newsletter because <br/> <!--------------------------- Don't forget to add your unsubscribe link -----------------------------> If you don't want to receive any more emails from us <a style="text-decoration:none; color:#00a0af;" href="" target= unsubscribe here <br/> Company Name <br/> Address line one, City, Post Code, Country <br/> Phone number <br/> <a style="text-decoration: none; color:#00a0af;" href="" target= Email us
GLOSSARY.jpeg An image file format, most images you ll see on the web or even your PC are saved in this format..png A higher quality image file than a jpeg, which can also be transparent, however they usually have a larger file size because of this. alt= The code that controls what text appears if images are disabled in an email client bgcolor= - The code that controls what background colour appears Email clients Desktop email providers i.e. Outlook, Gmail etc. ESP Email Service Provider. This is different to an email client. An ESP is a program that allows you to send marketing emails to a list using HTML. Hex value Hexadecimal notation, a six digit code for defining a colour using the Red, Green, Blue values ranging from 0-F. href= The code that controls what a piece of content links to on the internet. HTML Hyper Text Markup Language. That confusing looking writing that makes up most of the things you ll see online. Loren ipsum text - Standard place holder text, it s written in Latin so you remember to edit it. Paint A simple image & graphics editing program. Photoshop A more advanced image editing program. Pixel A measurement used for sizing digital images pixels are the little dots that make up your computer or phone screen. src= The code that controls the source of the image. title= The code that controls the titles tab. URL Fancy term for a web address. Web browser What you browse the web on. Chrome, Firefox, Safari, or if you re still kicking it old school - IE.