Docstoc

Creating an email template

Document Sample
Creating an email template Powered By Docstoc
					    Creating an email template for a Mailshot using SugarCRM


I use HTML-Kit build 292 to create my files and you can download it from here

http://www.htmlkit.com/download/

You can do everything online if you wish and then save the file on your machine
as a .txt
This is useful in case something goes wrong when you upload to Sugar of if you
come back in a few months time and cannot quite remember how to put the
template together again. The online info is here

http://www.w3schools.com/tags/tag_map.asp

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

If you have been sent the image as a PDF you will need to send it to Jo
She will convert the image to a JPG and upload it to the Pickering website

An example is located here

http://www.pickeringtest.com/newsletter/Best%20in%20Test%20Jan%202010/T
M-World-Best_2010.jpg

Then you need to know the dimensions of this image
We shall use the one above for reference today
The image is 500 x 753

Here is how it works

…usemap="#pickering" – this says that for this image we want to use the
“usemap” function

<map name="pickering"> - this creates the “usemap” function

<area shape="rect" coords="335,5,480,75" alt="www.pickeringtest.com"
href="http://www.pickeringtest.com" target="_blank"/> - this shows each of the
maps or hotspots or each of the parts of the page that you want an action to
happen on

In order to create “hotspots” or “maps” in your image you must use grid points for
the top left corner and the bottom right corner of the area you want highlighted

I want an action on the Pickering logo on the top right hand side of my image
When you click on the image it will open a new browser window and take you to
the main page of the Pickering website. Here is the code I use

<img
src="http://www.pickeringtest.com/newsletter/Best%20in%20Test%20Jan%2020
10/TM-World-Best_2010.jpg" alt="TM-World-Best_2010" usemap="#pickering" />

<map name="pickering">
 <area shape="rect" coords="335,5,480,75" alt="www.pickeringtest.com"
href="http://www.pickeringtest.com" target="_blank"/>

I have taken the code from the w3schools link and adapted it a bit

I have taken out the width and height constraints.
We can specify a size for this image when we make the jpg and upload it
I have changed the name of the usemap into something that is more relevant for
us
The area shape= is a rectangle.
You can use other shapes, but this one is fine for what we are doing
The coords= use horizontal first, then vertical
The coordinates 0,0 at the top left hand corner of the image and 500, 753 will be
the bottom right hand corner
Everything must be within these dimensions
alt= is the text that you will see when you put your curser over the image
href= is the name of the website or specific web page you are directing to

I have added a little bit of text at the end target="_blank" - this will make sure
that when the website opens it will open in a new browser window or tab

Now you just have to repeat this for each image you want to have an action on
Make sure you have </map> at the end of the document and this closes the
“usemap” function

Go to Sugar and create your Email Template
I have updated the “Best in test Jan 2010” email template

Copy and paste your text directly into the email.
Do not choose the “HTML” button as anything typed in here will be stripped of
any hotspots

Save the template

Double check that the curser changes when you point it to the images

You cannot test this message by just sending an email using Sugar CRM.
This will strip out the links
You need to create a campaign.
I created Jo’s Campaign
I added my test target list to the campaign
I created a new Marketing document called Jo’s Campaign and in here I added
the email template

I sent myself a test message just to make sure the links are still working


I would recommend that you take the text and save it as a *.txt file somewhere
local so that next time you already have all the functions and such, you just need
to change the name of the image and move around the hotspots or map links

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:2
posted:6/25/2011
language:English
pages:3