Just as tinyEmail gives you the world's most powerful and yet convenient Drag & Drop email editor, we also provide you with a flexible and unique custom code editor for your email designs. You can either code directly into the tool, paste your code, import an HTML template file, or try a hybrid between code and visual components. Let's run you through all the different options when you want to BYOC to tinyEmail!
Paste or type in your code
Start by navigating to your dashboard and from there, go into your templates library from the left-hand navigation panel. Here, you will find the usual array of different types of pre-designed, branded and basic templates.
Click on the Custom code tab and then select the Paste your code card.
This will open up the split view code editor with a preview on top and HTML and CSS sections below. You can paste in your HTML code and see a real-time preview generated above.
Don't forget the CSS pane where you can put in your CSS code if you'd like to keep your HTML header clean. tinyEmail will automatically insert the CSS code inside the <head></head> section of your code.
Import an HTML template file
You can also import an HTML file directly into tinyEmail. To do that, go back to your template library and click on the Custom code tab. This time, click on the Import HTML card to open up the file upload modal.
Browser your local computer and upload your HTML file.
The HTML template, if formatted correctly will render itself in these same preview, HTML and CSS panels as we described above.
Use the hybrid builder as a framework (beta)
You can use our visual template layout to help you code from scratch. Even better — using our framework-based code editor keeps your template compatible with our Drag & Drop editor. Now you truly have the best of both worlds.
How it works: Hover over the different sections, rows and columns in the boilerplate template section above the code panels. As you click around the different modules, the code associated with those specific modules is made available to you. You can make changes to the code and customize the template here.
To get into the hybrid framework, click on Create template in the main template library.
Note that this is a feature in BETA and should be used cautiously.
From there, select HTML. This will load the boilerplate template along with the code panels at the bottom.
That's all.
We are constantly working to build more intuitive, more powerful and useful solutions that help you communicate better with your audience. And there's a ton more to come!