How to
Designing emails: Use HTML code
In Pendula, there are two primary methods for designing emails within the Outbound email node: building from scratch using an email builder with a drag-and-drop interface or using custom HTML code.
Using your own HTML is a great option if you’ve already designed your email in another platform or development environment and want to bring it directly into Pendula. If you're looking to make visual edits within Pendula, we recommend building from scratch using the email builder instead.
In both cases, your email design can be saved as a reusable template across flows by saving the node.
Getting started
To use your own HTML:
- In the Design tab of the Outbound email node, choose Use HTML code.
- You’ll be taken to the HTML editor view.
You can now either:
- Upload a .html file by dragging and dropping it into the upload area
- Or click Paste HTML instead to enter your code directly
Once HTML is provided, you’ll see a live preview of the email on the left, and the editable code on the right.
To return to the design options screen (where you can choose between Build from scratch or Use HTML code), click the Email design breadcrumb at the top of the panel. If a design is already present, you’ll be prompted to confirm before discarding your current HTML. This action cannot be undone.
Editing your HTML
The code editor allows you to:
- Edit your HTML directly within Pendula
- Use Find and Replace to quickly update content
- See changes reflected instantly in the preview panel
- Use Export HTML to download the latest version of your design
If you’re planning to include personalised data like customer names or dates, merge fields can be added directly into your HTML. You can reference available merge fields under the Merge fields tab, and quickly insert them using the Merge field popup.
Best practices for HTML emails
Different email clients render HTML differently, which can impact how your email appears in a recipient’s inbox. To improve compatibility:
- Use inline styles rather than external stylesheets
- Test your email on common clients (like Outlook, Gmail, Apple Mail)
- Avoid background images or complex layouts unless thoroughly tested
For more guidance, we recommend reading HTML email design (Litmus).
Saving and reusing your HTML email
Once you're happy with your design:
- Click Save in the node panel to save the email design and node configuration
- Click the 'Add to Saved nodes' button to save as a template
- Your node will now be available as a reusable node if saved via the toolbar