Creating HTML Emails

Overview

Spiro allows you to create HTML Email templates for email campaigns or for sending one-off emails. To create email templates, go to Settings, navigate to the Email Templates section, and click on the little purple arrow in the bottom right corner of the screen and create a new

Spiro will present you with a rich text editor where you will be able to create content for your emails using basic text formatting functionality, much like you would get if you were to use Microsoft Word. 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 like Mailchimp that can help you format and create beautiful HTML email templates. Often these tools will give you the ability to export that source code, and you can use them in tools like Spiro!

From the MailChimp Menu: Select Brand: Templates

Pick a template and edit your Email Message. On the editor, you can paste directly from your signature or pick a nice format for templates

Delete unnecessary footers and headers

SAVE & CLOSE

From the Templates: Edit Menu [Export as HTML]

Open Doc with Text Editor (an easy way is to replace the .HTML to .TXT on the file name). Copy HTML Code.

Go to Spiro Templates and click on the last button of the Menu Bar < > to edit the source code. Paste the HTML Code from the previous step and hit save.

You may need to delete <!doctype html>

Then test and you should be all set!

Adding Pictures to your email templates

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

The picture you wish to include must be hosted somewhere that publicly accessible on the web
A comfortability to update or edit some very basic HTML (It's easy, I promise)

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

I would first have to make sure that this image is hosted on a public url. We happen to know that the Spiro logo is hosted on the following URL: https://spiro.ai/wp-content/uploads/2020/01/logo-gray.png

Using this, I can actually use an HTML tag called <img> to add this logo to my email template. The basics of this work like so:

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