Designing HTML Emails

Vision now supports HTML email design, which means you can create beautiful, branded emails with our new toolbar feature.

If you’re not familiar with HTML, here are several easy tools and workflows to help you design professional emails quickly.

Quick Links

 

 

Using Vision’s New HTML Feature

We’ve added a new HTML icon to the email editor toolbar that makes it easy to insert your own custom designs.

How it works:

  1. Click the HTML icon in the toolbar. 

  2. A box will open with a field for pasting your HTML. 

  3. Paste your HTML code directly into that box. 

  4. Click the checkmark on the right side to confirm.

  5. Vision will instantly render the HTML inside your email editor.

You can freely switch back and forth between the normal editor and HTML mode whenever you need.

Note: 

For security purposes, the text editor will automatically remove script tags, event handlers, javascript, iframe tags, object tags, embed tags, form tags, base tags, meta tags, and link tags.

 

Using Dynamic Variables Inside HTML

You can include Vision’s dynamic variables directly inside your HTML to personalize emails—for example:

  • #subscriberfirstname

  • #invoicebalance

  • #serviceaddress

  • etc.

How to use them:
Just type the variable into your HTML exactly as written, with the leading hashtag, and Vision will replace it with the correct subscriber data when the email sends.

If you’re not sure which variables are available:

  • Close the HTML box

  • Type a # in the regular editor

  • Vision will automatically show you the list of dynamic variable options

  • Then you can copy the one you want and paste it into your HTML

 

1. Reuse HTML Emails from Other Platforms

 

If you already have email designs created in another platform, you can easily bring those designs into Vision using HTML.

Why this works well:

  • Many providers already have branded emails built in other systems

  • No need to redesign emails from scratch

  • Lets you keep your existing look and feel while sending emails from Vision

How to do it:

  • Open the email in your current platform 

  • View or export the email’s HTML source

  • Copy the HTML code

  • Paste it into Vision using the HTML icon in the email editor

  • Confirm with the checkmark to render the design

Vision will render the email exactly as designed, while still allowing you to use Vision’s dynamic variables and workflows.

This approach is ideal if you’re migrating communications into Vision or consolidating tools while keeping your existing email designs intact.

2. Use Canva’s Email Templates (With a Small Extra Step)

Canva allows you to design emails visually and export them as HTML. 

Pros:

  • Wide variety of templates

  • Extremely beginner-friendly

  • Drag-and-drop editor

Things to keep in mind:

  • Canva does not host your images online

  • HTML requires image URLs that are hosted on the web

  • After exporting your HTML, you’ll need to upload the images somewhere online and replace each src="" link in the code

This gives you great visual control but requires a bit of extra image handling.

3. Use ChatGPT to Generate Custom HTML Emails

If you want a fully custom layout, ChatGPT can help create the HTML for you.

Pros:

  • Fully customizable designs

  • Great for matching brand styles

  • You can give ChatGPT your hosted image URLs and it will insert them directly into the code

Things to keep in mind:

  • May take some back-and-forth to get the exact design you want

  • ChatGPT cannot host images for you

  • You can preview ChatGPT-generated code using a tool like Liveweave before pasting it into Vision

This option is flexible and powerful, but takes a little more time.

4. Free Image Hosting With Cloudinary

If your design tool doesn’t host images automatically (like Canva), you’ll need a place to store them online. Cloudinary offers a free tier that works perfectly for hosting email images.

How to host images with Cloudinary:

  1. Create a free Cloudinary account.

  2. Go to your Media Library.

  3. Upload your images.

  4. Click any image to open its details page.

  5. Copy the Secure URL (the link ending in .jpg, .png, etc.).

  6. Paste that link into the src="" attribute inside your HTML.

Example:

 

<imgsrc="https://res.cloudinary.com/.../yourimage.png"alt="Banner">

Why Cloudinary?

  • Free tier is generous

  • Reliable and fast CDN hosting

  • Images load consistently in email clients

  • Easy copy-and-paste links

This makes Cloudinary the perfect companion for Canva users or anyone building custom HTML emails.

Need Help?

If you have any questions or would like help designing or importing HTML emails into Vision, our team is here to support you.
Contact us at: support@fibersmith.co