Design emails with HTML
Learn how to create custom HTML emails using OneSignal’s HTML Editor. Customize layouts, track clicks, add unsubscribe links, and follow email best practices.
The HTML Editor in OneSignal allows you to craft highly stylized, branded emails with complete control over layout and design for both desktop and mobile.
To make the most of HTML email design, we recommend:
- Ensure you or a teammate has experience with writing responsive HTML emails that render well across different clients and devices.
- Host all images in a publicly accessible location, such as your website, AWS, or other reliable hosting platforms.
Getting started
To begin creating your HTML email, select the HTML Editor option when setting up your message.
Image showing ability to select editing experience for email
Once selected, you’ll see a split-screen interface with the HTML code editor on the left and a live email preview on the right.
Using the HTML editor
Enter your HTML code in the left panel. You can use the Send Test Email feature to check how your email renders on mobile and desktop clients.
Image showing HTML editor beside the preview
Key features of the HTML editor
Click tracking
We automatically track clicks on links and CTAs within your HTML emails for performance insights.
Automatic unsubscribe link
An unsubscribe link is automatically included in the default HTML template. You can customize this link, but note that all emails are required to include one.
Learn more: Unsubscribe Links & Email Subscriptions
Import your own templates
Already have an HTML email template? Simply copy and paste it into the editor to get started.
HTML email best practices
Use inline CSS
Many email clients strip out embedded or external styles. Always inline your CSS to ensure consistent rendering.
Try this tool: Responsive Email CSS Inliner
Add alt tags to images
Alt text improves accessibility and ensures information is conveyed even if images are blocked or fail to load.
| Email Client | Blocks Images? | Shows Alt Text | Styles Alt Text |
|---|---|---|---|
| AOL | Yes | Yes | Yes |
| Gmail | Yes | Yes | Yes |
| Yahoo | Yes | Yes | Yes |
| Outlook | Sometimes | Yes | Yes |
Source: Litmus Email Client Support
Name and format your HTML
Use semantic HTML and meaningful tag naming for accessibility. This helps screen readers interpret your content more accurately.
Also, use standard color formats and proper indentation for maintainability.
Check for broken links
Broken links reduce deliverability and can flag your emails as spam. Test all links thoroughly before sending.
Avoid unsupported HTML
Most email clients do not support the following:
- JavaScript or Flash
- Embedded audio or video
- HTML forms
- Iframes
- Text layering
Use hyperlinks to share additional content safely.
FAQ
How can I use my existing email templates?
How can I use my existing email templates?
Copy and paste your existing HTML email code into the HTML Editor. Be sure to include an unsubscribe link.
I don't have any existing templates. How do I start?
I don't have any existing templates. How do I start?
Explore resources like Really Good Emails* for design inspiration or use platforms that offer free responsive templates. If you’re new to HTML, consider learning the basics of HTML*. * OneSignal is not affiliated with these services. Other similar platforms are available.
Can I use custom fonts?
Can I use custom fonts?
Yes, but keep in mind that not all email clients (such as Outlook) support custom fonts. Unsupported fonts will automatically fall back to default system fonts.