Creating HTML Emails

Overview

Spiro allows you to create HTML templates for email campaigns and one-off emails. To create email templates, first go to Settings and then navigate to the Email Templates section. Then, click on the purple arrow in the bottom right corner of the screen, and click on New.

You'll then see a rich text editor where you can create content for your emails using basic text formatting functionality, much like you would get if you were to use Microsoft Word or Outlook. However, if you click on the "<>" button in the toolbar, a new window called "Source Code" will open, which will allow you to create a dynamic HTML email template.

Creating HTML Templates if you don't know HTML using Mailchimp

There are free tools out there, such as Mailchimp, that can help you format and create beautiful HTML email templates. Often, these tools will allow you to export the template's source code (AKA HTML), and you can use that code in tools like Spiro!

From the MailChimp Menu: Select Brand: Templates

From Mailchimp's list, you can pick a template and then edit it to display how you want. In the editor, you can also paste directly from your existing signature to get the source code for it.

When your signature is how you want it to look, Save and Close the template in Mailchimp.

Then, on the Templates page, click the arrow next to "Edit" and choose "Export as HTML."

This will download an HTML file to your computer. To open it, replace the file extension ".html" with ".txt" and you'll be able to open it with your favorite text editing program (e.g., Notepad, Text Editor). Now, highlight all the text and copy it.

In Spiro, create or edit the template you wish to use HTML in. Then, click on the last button of the Menu Bar "< >" to edit the source code. Paste the HTML code from the previous step and click Save.

Note: you may need to delete the very first line "<!doctype html>".

Then test your signature, and you should be all set!

Adding images to your email templates

Utilizing HTML, you can add pictures to email templates. This comes in handy if you are building your email signature into an email template and you want to include your picture along with your signature. To do this, you will need two things:

The picture you wish to include. It must be hosted somewhere that is publicly accessible on the web.
Comfort in updating or editing some very basic HTML. (It's easy, we promise.)

Let's say, for example, that you wanted to add the Spiro logo to an email in a template:

First, make sure the image is hosted on a public URL. We know the Spiro logo is hosted on the following URL: https://spiro.ai/wp-content/uploads/2020/01/logo-gray.png

With this, you can use an HTML tag called <img> to add this logo to my email template. The formatting of this tag work like so:

To use your image, you would replace the Spiro logo URL with the URL of the image you want to include in your email template. For more information on how to use the <img> HTML tag, please visit this article on W3 schools.