Reading time: 10 minutes
In our first article, we described three types of mass mail: system emails, newsletters, and security notifications. The second article will tell you about pre-defined templates.
Pre-defined templates are enabled in the billing system by default. They have a simple text and minimal design without company branding settings. To make your email more attractive, you need to know how HTML, CSS, and EJS variables work.
How I configured emails for ISPsystem
Let me step aside from our article and tell you about our internal processes. As a marketing specialist, I perform specific technical and application tasks very seldom. My main general responsibilities are to launch and maintain a project and ensure communication between different departments. To make emails more user-friendly and useful, I went deep into their design and development. In this article, you can read more about every step of this process.
Step 1. Design
Our UX department provided me with a template design. The team already had a design system by that time, so I also got a mini-guide on how to use the design elements in emails. In total, I had 5 types of emails that I could use to create all other emails by changing their text, adding media-content, and moving the elements.
A fragment from the mini-guide on email design-elements
Pre-defined email templates
Step 2. Coding
Next, I gave proto-types of 5 letters to our web-developers and they prepared ready HTML files.
Please note: you cannot use CSS separately for email template design in BILLmanager. It will make difficult for you to work with the code because every HTML tag can contain dozens of CSS specifications, so the whole structure will be difficult to read.
We use Zurb Foundation. This framework facilitates creating our emails
Step 3. Creating templates and adding variables
As you can remember, BILLmanager includes more than 70 pre-defined templates. In our project we use 60, 14 of them are “Service activation” templates for different products and services. My task was to make various emails with a single design.
Life hack for non-technicians: when you create a new template and select its type, the system adds the default data automatically. This is a minimal code with a simple design. You only need to make your custom design and add variables that are already in the source template.
Let’s take an example. We have a pre-defined email “Service suspension”. On the left screenshot, you can see the source file that was generated automatically. On the right, you can see the email that our customers will receive.
The source code of the email and how it will look like when a customer receives it.
Now I will show the source code of our email and its final result.
The source code of the email and how it will look like when a customer receives it.
You can use only certain variables for every email. For example, in the template “Response from technical support” you cannot use a variable for a current balance or information about the due amount on his account balance.
To view a list of variables that can be used in every specific email, perform the following steps:
- Select a template and click Test on the toolbar.
- Enter the data to generate an email.
- An email draft will open. At the bottom of the page, you can see the Source section that lists all the data of this template.
The left screenshot shows a list of data. On the right screenshot, you can see how a certain variable is used in the template.
We added such templates to BILLmanager not so long ago. Before we used XML formatting that was more difficult to develop. Check your billing system. If its templates are in XML and you don’t want to use them, simply create new pre-defined templates of the same types and the system will automatically insert a code with EJS-variables. You can also copy the pre-defined templates from BILLmanager demo at our website.
Step 4. Testing and tuning-up
Test a pre-defined template in BILLmanager
You can Test any template. Enter the required data and view the email draft that will be sent to your customers.
After you have selected a template, the Test button will get activatedИспытать
“Service suspension” template test form
Attention. You need to enter real data from the billing system, but you may not use the data of a specific user.
Let me explain. On the screenshot above you can see the template “Service suspension” where you enter a client or service ID that have been ordered in the billing system. These data may belong to different users, But if you enter an ID of a ticket, for example, or non-existing data in the “Service ID” field, the test will fail.
An error occurred when trying to test a pre-defined template with non-existing data
If all the data are valid, we will see an email in the Message in HTML format section. There can be two ways: we made a good job or something went wrong.
Successful and failed tests
Please note that the test can fail only if you entered invalid variables. Possible causes of the issues:
- misspelling;
- a selected variable cannot be used in that template;
- invalid operation due to external factors.
Testing template in email client
Testing is not only displaying an email in the billing interface. After you have created the email, you will see the Send email button. If the mail gateways are configured, the system will send the email to your client.
Create a client with the email that you can use and test the template. You can test it in different email clients and in different situations.
Attention. Do not rely on services that imitate mail services and screen sixes. The emails from in a test environment may look great, but in reality, they are not. Or vice versa.
Unevident details with unsubscription button
Today all mail service requires that corporate mass mail contains an unsubscribe link. If your emails do not have such links, your emails will be flagged as spam and your clients won’t receive any notification from you.
As a rule, a top-level domain gets blocked. That’s why it will be difficult to send emails even from your personal email specially created for mass mail.
The “Unsubscribe” button link will unsubscribe only from certain emails
In the User settings form, you probably saw different types of notifications that you can receive: financial, newsletters, and notification from the Support Center.
Notifications
A certain type is specified for every message template. When a client clicks on the Unsubscribe button, the billing system will stop sending only a certain type of notifications.
The same unsubscribe button is used in all templates: <%= billurl %>?func=unsubscribe&cmdhash=<%= cmdhash %>. However, in fact, it allows unsubscribing only from specific notifications. Customers cannot unsubscribe from all notifications from their provider by clicking only one button or link.
E.g, a client received the email “New invoice” this is a financial notification. Clicking “Unsubscribe” will unsubscribe him only from financial emails, but he will receive notifications from the Support center, notifications about his services, etc.
How you can explain it to your clients? In different emails we use different text for unsubscription. In the emails related to services, we explain that a client may stop receiving service notifications, and in the emails from the Support Center, we tell them that they won’t receive the corresponding emails anymore. When he unsubscribes from a certain type of notifications and gets an email of another type, he already knows about that and does not get angry. He may unsubscribe again if needed.
Notifications that clients cannot unsubscribe from
What is a type of the email “Password recovery”? Or “Email confirmation”? BILLmanager contains a number of templates from which you cannot unsubscribe. The following is a list of such templates:
- client registration,
- email confirmation,
- password change,
- payer activation,
- other system notifications.
They are used for correct operation of the billing system and cooperation between a provider and his clients. Clients cannot unsubscribe from them and if you add the unsubscribe link into your email, it will be sent with an error message. Be very attentive and do not add the link to all templates.
When cmdhash in the unsubscribe link is not defined
There is one more thing you need to know. The “Service activation” template is not only sent to clients but also stored in BILLmanager. Clicking on Instructions will open this notification in the billing interface.
If you do not change the template, the email in the interface won’t be displayed correctly. The cause of the issue is the unsubscribe link. When we open the email as an Instruction, the parameter is not defined. That’s why the unsubscribe link in the template “Service activation” must contain an additional condition that will hide the link when the email is displayed as the Instruction:
<% if (typeof cmdhash !== 'undefined') { %>
<a href="<%= billurl %>?func=unsubscribe&cmdhash=<%= cmdhash %>”>Unsubscribe</a>
<% } %>
Template configuration guide for users
When you create and edit email templates in BILLmanager, you will probably have questions. Please refer to the Notification system section in our new documentation or send your questions to our Customer Care or Technical department.