Adding and Managing Custom Code

Postcards allows advanced users to extend email templates with custom HTML snippets. This feature is powerful but should be used carefully — unsupported or invalid code may break your template in some email clients.

Custom code can be added in three ways:

As a standalone module
As an element inside an existing module
Directly in the email container’s <head> or <body>

Supported Code & Restrictions

Only basic, email-safe HTML is allowed:

✅ Allowed: <div> , <p> , <img> , and similar simple tags

✅ Styles: inline CSS only (e.g. <p style="color:#333;"> )

✅ Images: must be hosted online with a direct URL (e.g. https://example.com/image.jpg)

Not supported:

❌ Advanced tags: <section> , <video> , <article>

❌ CSS classes or IDs (.class , #id )

❌ Local image uploads

Always test (preview) your project (email) after adding custom code.

Add Custom Code as a New Module

Click the plus (+) button in the top bar
Select Basic Modules → Custom Code
A new Custom Code module will appear in the canvas with predefined paddings: 25px (top), 40px (right), 25px (bottom), 40px (left) and an empty custom code block ready to use.

Add Custom Code Inside an Existing Module

In the Layer Panel (left side), hover above or below an existing layer
A circle with a plus (+) icon will appear
Click it and select Custom Code
A new Custom Code element will be inserted directly inside the selected module

Adding Custom Code as a Module or Element

Insert Custom Code (using one of the two methods above)
Open the Code Section (right sidebar → Code area)

a. Code Text Box – raw HTML view

b. Code Editor – popup for easier editing

c. Disable Preview in Editor – shows only placeholder, hides rendering

Enter Your Code

<div style="text-align:center; padding:20px;">

<p style="font-size:16px; color:#333;">Welcome to our newsletter!</p>

<img src="https://example.com/banner.jpg" alt="Banner" style="max-width:100%;">

</div>

Save or Cancel

Save → code renders in editor
Cancel → discard changes

Adding Custom Code to <head> or <body>

You can insert global code into the email container.

Deselect all elements (click outside the canvas).
In the right sidebar, under Container, scroll to find <head> and <body>.
Click one of them to open the Code Editor popup.

Examples:

In <head> (global inline CSS or meta):

<style type="text/css">

p { font-family: Arial, sans-serif; color:#444; }

</style>

In <body> (global footer text or banner):

<div style="text-align:center; padding:20px;">

<p style="font-size:14px; color:#333;">Footer text</p>

</div>

Summary

Keep it minimal → fewer lines of code = lighter emails
Use hosted images only → no uploads inside custom code
Test before sending → render can differ in Outlook, Gmail, Apple Mail, etc.