Building an impactful email can be challenging at times, and while website development continues to advance, email is living on older technologies. This guide will outline a couple points that you should consider when building your email template.

CSS with Email

CSS is a stylesheet language and is commonly used to style markup languages, like HTML. For this to work in email, you will have to inline the CSS directly into the HTML elements. The Sendwithus template editor will automatically inline your CSS, so you don’t need to worry about this. It’s important to note that not all CSS works with every email client.

To see if a CSS rule works for an email client, visit The Ultimate Guide to CSS.

Images in Email

Adding images to an email can emphasize the message you want to send to your customers, and give an overall better customer experience. Images are generally hosted on a server and you would pull them into the email using an absolute image source URL. Sendwithus offers to host your email images for free in the Images section of the Sendwithus dashboard.

When adding images to emails, it’s important to note that these images might not appear by default. Most email clients hide the images until the user clicks each image to show or “Display All Images”, so we recommend that you always have descriptive Alt text.

Supported Image Types

When designing HTML emails you should stick to these image formats:

  • JPEG
  • PNG
  • GIF

BMP and SVG can also be used, but client support is not as good as the above three formats.

Try testing with images disabled to preview the design and structure of the email before loading the images.

Add Images

Click the Images tab on the navigation bar in your Sendwithus dashboard.

Here you can upload an image by clicking the Upload Image button, and selecting an image from: your computer, Google Drive, Gmail, or a link (URL).

Once the image has uploaded, it will appear on the page. If you hover over the image three options will appear.

Image Hover Links

  • </> - Copies the image tag code.
  • - Copies the URL to the image.
  • x - Deletes the image.

To add the image to a template, copy the image tag code by clicking the “</>”, and insert this code into your template.

By default the ALT tag will be the Image Name. Change this as necessary.

Sample Image Tag

Insert this tag into your template to test it out!

<img src='https://d1pgqke3goo8l6.cloudfront.net/tkfNLkRPWbAGsGZ2bFKQ_swu_kit_logo_dark.png'
     alt='Sendwithus Logo' />

Videos in Email

We don’t recommend adding embedded videos directly into your email. This is because most email clients do not support this feature, and some email clients with spam and virus detection will flag your email as malicious content.

Instead, what you can do is capture a screenshot of the video, and make this a clickable screenshot with a link to the external video.

Forms in Email

Most email clients do not supports forms in emails. If you want to include a form, the best way is to create a link that sends your customer to a form hosted on your end to obtain the desired results.

Test Emails on Email Clients

When building a template the key to success is making sure you test it. Testing can range from all aspects of the email, from CSS formatting to making sure URL links work.

We recommend testing what your template will look like across different email clients. Device Testing provides a great and simple way of previewing your template in different email clients. For more information visit our Using Device Testing guide.

Drag and Drop Editor

Creating the perfect emails can be tricky if you’re not familiar with code. Using a Drag and Drop editor will make building templates easier and there are plenty to pick from. We recommend using Beefree or Mosaico.

Add Buttons

When building an email, it’s important to display the call-to-action (CTA) where customers will interact with it. In the past, this was commonly done through images, and with the majority of email clients not showing images by default, this can heavily decrease your click rate.

Using buttons and building them through HTML and CSS will allow the email to build and display the button, even with images disabled. Adjusting the button to match the design of the email is easier because, instead of spending time building a new button as an image, you could edit a couple lines of code.

If you want to create some bulletproof email buttons, we recommend checking out Buttons.cm and play around with the buttons.

Unsubscribe links in an email provide a way for your customers to stop receiving certain emails you send. Adding these links will be different depending on the ESP you are using.

When implementing unsubscribe links we recommend using two different ESPs accounts. The reason behind this is, if a user unsubscribes from one of your marketing emails (Newsletter, Updates), we want your users to still receive your important transactional emails (Activation, Forget Password).

Certain ESP allows for subusers/subaccounts for this purpose like Sendgrid and Mandrill.

Visit the full documentation on Unsubscribes here.

Sometimes when an email doesn’t render properly for an email client, viewing the content can be near impossible. Adding a simple link to a browser will help the customer view the intended message.

Visit How do I add a webview link to learn how to insert a webview link.

This sample webview link is using a Sendwithus Built-in Variable.

<a href="{{ swu.webview_url }}"> Not working? Click here to View in Browser. </a>

Test this code in your own emails!

Use Snippets

When building emails, if you are using repeated blocks of code, you should consider using Snippets! Snippets make it easy to manage and edit code blocks for multiple email templates containing repeated code.

For instance, if you are using one header for all your emails, putting this into snippets can help organize your templates. Snippets will reduce the time needed to edit templates by not having to edit individual emails. Best of all, this is super easy to do! Look below for a sample snippet or visit What are Snippets for more information.

Sample Snippet

Click on the Snippets tab on the Sendwithus dashboard.

Create a new snippet by clicking the + Create Snippet button and name your Snippet: test_snippet

Copy and Paste the sample below or input your own content!

<h1> Hello everybody! I'm testing out snippets! </h1>

Once completed, save the snippet and copy {% snippet "test_snippet" %} into a template to test it out.

For more information, visit What are Snippets

Dynamic Email Content

Having dynamic content can personalize the feeling of the email to a customer. Dynamic content can take personalized information and use that to display different content to different customers.

For instance, if you have information on a customer, like location, you can personalize the email to that customer.

Sample Code

Personalized Name

Hello {{ first_name|default('there', true) }}!

Personalized Greeting

{% if time_zone == "PST" %}
Good morning{% if first_name %}, {{ first_name }}{% endif %}!
{% else %}
Good afternoon{% if first_name %}, {{ first_name }}{% endif %}!
{% endif %}

Personalized Location

{% if city == "Victoria" %}
  I see you are in {{ city }}!
  Here are some local events!
  {% snippet "local_events" %}
{% else %}
  I see you are not in Victoria.
  {% snippet "default_events" %}
{% endif %}

Use Sendwithus Variables

Simple variable replacement can be achieved using the following syntax.

API Call

The provided JSON example below displays the template_data parameter on the Send API call. Replace the following parameters in the cURL example with your own data to run the command:

  • template: Template ID
  • recipient: Email Address
  • test_abcde12345: Test API key
            curl -i -X POST -d '{
                "template":"tem_abcde12345",
                "recipient": {
                    "address": "user@example.com"
                },
                "template_data": {
                    "first_name": "Bill",
                    "img": {
                        "url": "https://www.fillmurray.com/g/200/300",
                        "name": "cheers"
                    },
                    "link": {
                        "url": "https://www.sendwithus.com",
                        "text": "sendwithus!"
                    }
                }
            }' -u test_abcde12345: https://api.sendwithus.com/api/v1/send
            
            {
                "first_name": "Bill",
                "img": {
                    "url": "https://www.fillmurray.com/g/200/300",
                    "name": "cheers"
                },
                "link": {
                  "url": "https://www.sendwithus.com",
                  "text": "sendwithus!"
                }
            }
            

Template HTML

<html>
    <head>
    </head>
    <body>
        <h1>Hello, {{ first_name }}!</h1>
        <img src="{{ img.url }}" alt="{{ img.name }}" />
        <a href="{{ link.url }}">{{ link.text }}</a>
    </body>
</html>

Rendered HTML

        

Hello, Bill!

cheers sendwithus!

Sample Data Tab

In the Template Editor, there is a tab called Sample Data. This tab allows you to preview your template variables with test data that you have added. This allows you to get a better understanding of what the email will look like before you send a test email.

The sample data in this tab will only work if the JSON is properly formatted. If there is a JSON error, a red x will appear. If you hover over the red x, there will be a brief description of the error.

Template:

Hello {{ first_name }}.
Confirm your order:
{{ item.name }} - {{ item.desc }} - x{{ item.quan }}
Total: ${{ item.price }}

Sample Data Tab:

{
  "first_name": "Phil",
  "item": {
    "name": "Cupcakes",
    "desc": "With Sprinkles!",
    "quan": 12,
    "price": 20.00
  }
}

Preview Tab (Results):

Hello Phil.
Confirm your order:
Cupcakes - With Sprinkles! - x12
Total: $20.00

Visit our Understanding Sample Data documentation for more information.

Preheader

In the most simplest form, the preheader is the text that appears after your subject line in an email.

Preheader Example

The text is automatically pulled from the copy of email body and is what your customer will see before they open the email. Customizing this can increase the open rate of the email by captivating your customer’s attention with an intriguing sentence or call to action.

How to Add a Preheader

Adding a preheader is simple in Sendwithus. Go to your Templates page in the Sendwithus dashboard and select a template to edit. Click the Preheader tab and add your text here.

Visit our What are Preheaders in Emails for more information.