Email Template changes
Under the resources/bundles directory you will find that there is a Message bundle file.
There you will have access to all the key value attributes that can change the languages, and styling of the emails.
Under the resource/images you can change the default image used for the image.
You can change the resources/template/handlebar directory, but keep in mind that changing too much could result in losing the email structure. I would advise to avoid changing this too much.
LOCATION OF IMAGE LOGO FILE:
resources/images/logo.png
The file image for the email template is located in the images directory. Changes to this folder do not affect the SWF (Signing WorkFlow) website. Only the email template. You must replace the logo.png with a logo of your choosing, keeping in mind the image would look best following this ratio below:
WIDTH: 220px
HEIGHT: 80px
The minimum and maximum width will always be 220px, the height will auto adjust to that. Rectangular images will look best.
LOCATION OF FILE:
resources/bundles/Messages.properties -> Styling properties (see below)
resources/bundles/Messages_sv.properties -> Texts
It is important to note that the currently we support only Swedish translation file for the content. This means changes to the Swedish file will override the message.properties file. Future support for english and other languages to come.
Keep in mind that changes below affect the styling of the email template. The changes are made in resources/bundles/Messages.properties.
For text changes, visit the Message_sv.properties file.
generalBackground |
background: #f7f7f7; |
This changes the outer background of the email content. |
generalAlignment |
margin: auto; |
Aligning the email content central, left or right. center alignment: margin: auto;Left alignment: margin: auto; margin-left: 0px;Right alignment: margin: auto; margin-right: 0px; |
fontStyle |
font-family: 'Open Sans', 'HelveticaNeue-Light','Helvetica Neue Light', Helvetica, Arial,sans-serif !important; font-size:16px; |
Assigning the paragraph styles and fonts. |
fontStyleMobile |
font-family: 'Open Sans', 'HelveticaNeue-Light','Helvetica Neue Light', Helvetica, Arial,sans-serif; font-size:14px; |
Assigning the paragraph section during mobile mode. |
generalTextStyle |
color: #444; font-size:16px; |
Assigning the detail styles and fonts. |
generalTextMobileStyle |
font-size: 13px;color: #444; |
Assigning the detail styles and fonts for mobile mode. |
primaryBackgroundButtonStyle |
background-color:#285a8a;border-radius:3px;border-bottom-color:#23303d;border-bottom-width:2px;border-bottom-style:solid; |
Background, size and border of button. |
primaryButtonStyle |
color:#FFFFFF; |
Color of text for the button. |
textStyle |
font-size: 12px;color: #444; |
Small non link text styles. |
simpleLinkStyle |
font-weight:600;color:black; |
Small link text styles. |
footerBackground |
background: #23303d; |
Bottom section background colour. |
footerFontStyles |
font-size: 13px; font-family: 'Open Sans', 'HelveticaNeue-Light','Helvetica Neue Light', Helvetica, Arial,sans-serif !important; |
Bottom section text colour & font size. |
Custom Subject and Message
The subject and message part of the mail can be injected with additional information from the order data.
Supported order data variables are: "title", "description", "fileName", "due", "created", "name", "firstName" and "lastName".
Use the Handlebar Moustache syntax to insert the variables into subject or message properties.
The subject should only use plain text but the message part can also handle HTML tags.
An example from the Swedish Messages_sv.properties to add file name and order title in the mail subject.
<p>createSubject=Ditt nya ärende finns i filen {{{fileName}}}, med titel '{{{title}}}'</p>Adding even more information in the body/message with HTML.
<p>createdMessage=Du har en ny elektronisk underskrift att hantera.<br>\
Anpassa med ett flertal variabler, HTML är giltigt här:<br>\
Titel:{{title}}<br>\
Filnamn: {{fileName}}<br>\
Förnamn: {{firstName}}<br>\
Efternamn: {{lastName}}<br>\
</p>