Emailing
This page provides a list of your email templates. with the ability to create new templates. The limit to how many templates you can create is based on your plan.
Creating a Template
To create a new template, click the "New Template" button at the top of the page. A new template will be created and you will be redirected to the template editor.
Template Editor
The template editor is where you can design your email template. You cna configure the template name, copy the template id, modify the subject line of your email, and configure a body with text, images, and buttons.
Body
The body is where you can configure the content of your email. You can add text, images, and buttons to your email.
There are two tabs, one for Source code and one for Preview. The source code is where you can edit the HTML and CSS of your email. The preview is where you can see what your email will look like when sent.
HTML Source
The HTML source is where you can edit the HTML of your email. This is where you can add text, images, and buttons to your email. You can use HTML and CSS to style your email.
Here's an example of a professional email template structure:
<table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f7f7f7;">
<tr>
<td align="center" style="padding: 40px 0;">
<table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
<!-- Header -->
<tr>
<td style="padding: 40px 30px; text-align: center; background-color: #4F46E5; border-radius: 6px 6px 0 0;">
<img src="https://your-logo.com/logo.png" alt="Logo" width="150" style="margin-bottom: 20px;">
<h1 style="color: #ffffff; margin: 0; font-family: Arial, sans-serif;">Welcome to Our Newsletter</h1>
</td>
</tr>
<!-- Content -->
<tr>
<td style="padding: 40px 30px;">
<H3 style="color: #333333; font-family: Arial, sans-serif; margin-top: 0;">Hello {{name}},</H3>
<p style="color: #666666; font-family: Arial, sans-serif; line-height: 1.6;">
We're excited to have you on board! Here are some highlights from this week:
</p>
<!-- Feature Box -->
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 30px 0; background-color: #f8fafc; border-radius: 4px;">
<tr>
<td style="padding: 20px;">
<h3 style="color: #4F46E5; margin: 0 0 10px 0; font-family: Arial, sans-serif;">Latest Updates</h3>
<p style="color: #666666; margin: 0; font-family: Arial, sans-serif;">
Check out our newest features and improvements.
</p>
</td>
</tr>
</table>
<!-- CTA Button -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<a href="#" style="display: inline-block; padding: 14px 30px; background-color: #4F46E5; color: #ffffff; text-decoration: none; border-radius: 4px; font-family: Arial, sans-serif; font-weight: bold;">Get Started</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 30px; background-color: #f8fafc; border-radius: 0 0 6px 6px; text-align: center;">
<p style="color: #666666; font-size: 14px; margin: 0; font-family: Arial, sans-serif;">
© 2024 Your Company. All rights reserved.<br>
<a href="#" style="color: #4F46E5; text-decoration: none;">Unsubscribe</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
Preview
The preview is where you can see what your email will look like when sent. This is useful to make sure your email looks good and to make sure the formatting is correct. Email clients may render the email differently to the preview.