In this tutorial, we’ll be covering how to add a Postcards email template in Sendy.co. We’ll show you how to take the code and images generated by Postcards and turn that into a Sendy template.
Prerequisites
- Sendy account/app that’s already set up
- Designmodo and Postcards accounts
- Text editor that can open HTML files
Video Version
Steps
Step 1: Gather the tags you want to use
Sendy has tags that you can add to your email template that allow you to add dynamic content to emails. The tags look like [Name] and when the emails are sent, Sendy replaces the tag with values specific to the recipient.
If you have the [Name] tag in your email and the recipient’s name is “John Smith,” then when the email is sent, Sendy replaces [Name] with “John Smith.”
You want to collect tags you want to use and add the tags in the Postcards template before you export it.
You can find the list of available tags in the “edit template” page in Sendy.
In this tutorial, we’ll be using two tags: [Name] and [unsubscribe].
Step 2: Create a Postcards template and export it
Go to the Postcards app and make a template. I created a simple one using the pieces Header 7, Content 4, Feature 5, Call to Action 1, and Footer 1. You can use any type of template.
After the pieces are ready, we have to make two changes to add the [Name] and [unsubscribe] tag to the template. I added the [Name] tag to the Header and the [unsubscribe] tag to the Footer.
To update the text in the Header and Footer, click the section and that will open a new menu on the right side. In the new menu, you’ll see different options to edit sections in the template.
For the Header, update the “title” option and add the tag in it. I added the “Hey [Name],” to the title.
In the Footer, I updated the last part of the footer which is a link. I changed the text to “Unsubscribe” and the URL to “[unsubscribe].” The text input is what the user sees and the URL is the link that the text points to.
That’s how to add Sendy tags to a Postcards template. First, figure out which tag you want to use, and then in the Postcards app, you can add tags in the appropriate text areas.
Now that we’re done making changes to this template, we can export it. In the top right corner of the Postcards app, there is an “export” button. Export the files and extract them into a folder you can work with. You should have a folder that looks like this:
If you open the index.html in your browser, you should see the template you created.
Step 3: Create a template in Sendy using Postcards files
Next, we want to create a template in Sendy and add the code and images to it.
Click the “create a new template” button in Sendy and that’ll take you to this page. What you see is an editor that allows you to change the name and content of the email template.
We want to take the code and images from Postcards and use it as our template. To do this, we need to copy and paste the code from the index.html file and paste it into the source code section of the email template.
In the screenshot, there is a yellow box around a “Source” button. If you click that, it’ll change the text editor to a code editor. This is how to update the code for the email template.
Open the index.html file in a text editor and you should see something like this:
This is the code for the email template. (You don’t have to understand what the code means, just copy it.)
The before and after in your Sendy editor should look like this:
Before
After
Name your template, save it, and then preview it. You’ll see something like this:
But wait, where are the images? The images aren’t accessible by Sendy because the images aren’t uploaded to the app. We have to upload the images to the Sendy app and then update the code so the code knows where to find the images.
Step 4: Add the images to the template
Go back to the email editor and press the image button to add images to the template.
That’ll open up a new menu like this:
Click the “upload” tab, select an image, and press “Send it to the server.”
Once it’s done uploading, the menu will give you the URL where the image is available for access like this:
Copy that link and go into the code and update it.
When you press “OK” to exit the upload menu, Sendy automatically inserts the image in the template. Just press backspace on the image to delete it.
Next, open the source code in the editor and search for the image you just uploaded. The first image in the list was called “button-app-store-dark.png” so this is the name we have to search for to update.
Press “control + f” in the editor and that’ll open the search command and type in “button-app-store-dark.png” and press enter. That’ll show you where the image is being used by the code. Change the location of the old image to the new URL Sendy created. The before and after should look like this:
Before
After
If you press save and preview your template again, it should look like this:
An image appears!
The process of adding Postcards images to your email template is as follows:
- Open the image menu in the editor
- Upload the image
- Copy the URL Sendy creates
- Search for the image name in the HTML code of the template
- Replace the old image source with the new one from Sendy
- Save your progress
And that’s how you add images to your email template.
Unfortunately, there isn’t a faster or more streamlined process for this, you have to manually update each image one by one.
Sometimes you have to update each image more than one time. In this tutorial, the background in the header was defined three times so you have to change the code three times to add the background in the header. (You only have to upload it once.)
After you’re finished updating the images, your template is ready to go. You can create a new campaign using the template and send awesome emails!
What we covered
- How to add Sendy tags to the Postcards template in the Postcards app.
- How to create an email template in Sendy using code from the Postcards template.
- How to upload images to the Sendy app and use the images in the template code.