Setup Template
In this section, we will guide you through the process of setting up a template for your Notification*. This setup is crucial for enabling features such as anniversary notifications.
Follow these steps to configure your template:
1. Navigate to the Template Settings page of your projects.
2. Fill in the required fields:
- Subject: The subject line for the notification email.
Example:
Wohoo ! This is your {{anniversary_date}} anniversary with example.com- Body: The content of the email, which can include placeholders for dynamic data.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Anniversary from [Your Company Name]!</title>
<!-- Tailwind CSS CDN for modern styling -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom styles for email client compatibility and Inter font */
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
background-color: #f7f7f7; /* Light grey background */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
a {
text-decoration: none;
}
/* Ensure images are fluid */
.full-width-image {
width: 100%;
height: auto;
display: block;
border-radius: 0.75rem; /* Rounded corners for images */
}
/* Responsive utility for max-width on mobile */
@media only screen and (max-width: 600px) {
.sm-w-full {
width: 100% !important;
}
.sm-px-4 {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.sm-text-center {
text-align: center !important;
}
.sm-hidden {
display: none !important;
}
}
</style>
</head>
<body class="bg-gray-100 p-0 m-0">
<center class="w-full">
<!-- Outer container for email width -->
<table class="w-full max-w-2xl bg-white rounded-xl shadow-lg my-8 sm-w-full" role="presentation" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td class="p-8 sm-px-4">
<!-- Header Section -->
<table class="w-full" role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="pb-6 text-center">
<!-- Company Logo -->
<img src="https://invitte.me/favicon.ico" alt="Your Company Logo" class="max-w-[10px] h-0 rounded-md">
</td>
</tr>
<tr>
<td class="pb-6 text-center">
<h1 class="text-4xl font-extrabold text-indigo-700 leading-tight">
Happy Anniversary!
</h1>
<p class="text-lg text-gray-600 mt-2">
Celebrating {{anniversary_date}} Years with You!
</p>
</td>
</tr>
</table>
<!-- Main Content Section -->
<table class="w-full" role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="pb-6">
<p class="text-gray-800 text-lg leading-relaxed">
Dear {{username}},
</p>
<p class="text-gray-700 text-base leading-relaxed mt-4">
It's hard to believe it's been {{anniversary_date}} years since you joined the invitte.me family! We wanted to take a moment to express our sincere gratitude for your continued support and loyalty.
</p>
<p class="text-gray-700 text-base leading-relaxed mt-4">
Your trust means the world to us, and we are incredibly proud to have you as part of our community. We've loved serving you, seeing your progress, helping you achieve your goals and look forward to many more years together.
</p>
</td>
</tr>
<tr>
<td class="py-6">
<!-- Anniversary Image -->
<img src="https://placehold.co/600x300/667eea/ffffff?text=Anniversary+Celebration" alt="Anniversary Celebration" class="full-width-image">
</td>
</tr>
<tr>
<td class="pt-6 pb-8 text-center">
<p class="text-gray-700 text-base leading-relaxed">
As a token of our appreciation, please enjoy a special gift from us:
</p>
<div class="mt-6">
<a href="[Link to Special Offer/Gift]" target="_blank" class="inline-block px-8 py-4 bg-indigo-600 text-white text-lg font-semibold rounded-full shadow-md hover:bg-indigo-700 transition duration-300 ease-in-out">
Claim Your Anniversary Gift!
</a>
</div>
<p class="text-gray-500 text-sm mt-4">
Use code: <strong class="text-indigo-600">[ANNIVERSARY CODE]</strong> (valid until [Expiration Date])
</p>
</td>
</tr>
</table>
<!-- Footer Section -->
<table class="w-full border-t border-gray-200 pt-8" role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="text-center text-gray-500 text-sm">
<p>© 2025 invitte.me. All rights reserved.</p>
<p class="mt-2">
[Your Company Address, City, State, Zip]
</p>
<p class="mt-2">
<a href="[Your Website Link]" target="_blank" class="text-indigo-600 hover:underline">Visit Our Website</a> |
<a href="[Link to Privacy Policy]" target="_blank" class="text-indigo-600 hover:underline">Privacy Policy</a> |
<a href="[Link to Unsubscribe]" target="_blank" class="text-indigo-600 hover:underline">Unsubscribe</a>
</p>
<!-- Social Media Links (Optional) -->
<div class="mt-4">
<a href="[Facebook Link]" target="_blank" class="inline-block mx-2">
<img src="https://placehold.co/24x24/cccccc/ffffff?text=FB" alt="Facebook" class="rounded-full">
</a>
<a href="[Twitter Link]" target="_blank" class="inline-block mx-2">
<img src="https://placehold.co/24x24/cccccc/ffffff?text=TW" alt="Twitter" class="rounded-full">
</a>
<a href="[Instagram Link]" target="_blank" class="inline-block mx-2">
<img src="https://placehold.co/24x24/cccccc/ffffff?text=IG" alt="Instagram" class="rounded-full">
</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>- Image after Form Fill ups
as you have seen some {{placeholders}} are used in the template, these placeholders will be replaced with actual data when sending the email. For example, {{anniversary_date}} will be replaced with the actual anniversary date of the user.
- I’m adding supported placeholders:
{{username}}: The name of the user(example - Cain Nuss.).{{anniversary_date}}: The date of the user’s anniversary(example - 1st, 2nd or 3rd).
3. Save your template.
Now your template is set up, and you can use it for sending anniversary notifications. Make sure to test the template by sending a test email to ensure everything is working correctly.
Last updated on