Try our new AI search - enter a question instead of a keyword!

Articles in this section

See more

HTML Email Templates

Avatar
Shelley Labrecque
  • Updated
Follow

Follow the steps in this article to use AI tools to generate HTML for an email template, then paste that HTML into the Email Designer's HTML tab.

Note: Most users do not need HTML. The drag-and-drop Email Designer covers branding, layout, components, and merge tags without writing code. Use this article only when you need a layout the drag-and-drop components cannot produce.

Notes:

  • This process uses AI tools to create the HTML. Test the outputs of various tools to find the one that gives you the best output.
  • Images must exist on the internet to render in an email. Vantaca can hold and host these images in System > System Files. Right-click an uploaded file and select Copy Link to copy the image URL.

Pro Tip: This article shares a clever way to add association-specific images by using the Association Code merge tag in the image filename. See Add Association Logos to Email Templates.

Using AI Tools to Create HTML

To create HTML that will render in Vantaca using AI, the AI tool needs some guidelines:

Note: Use these guidelines in your AI tool so it has a framework to work from. After it has this framework, use your prompt context to give it an outline of your vision and it will create HTML that will render in Vantaca. These same HTML guidelines apply when creating custom HTML content for Vantaca Home portal pages using the Full Custom Page feature. For more information, see How to Configure and Manage the Home Portal.

Provide this framework to your AI tool. The opening line is the instruction; the bullets are the requirements the AI tool should follow:

"Create a modern, elegant HTML content block for a community association or HOA portal. The code must:"

  • Use only inline CSS for all styling (no <style> tags or external files).
  • Use only simple HTML elements: <div>, <p>, <a>, <h2>, <h3>, <img>, <em>, <strong>.
  • Be fully self-contained with no dependencies on external scripts, fonts, or styles.
  • Use Flexbox inline styling (display:flex;flex-wrap:wrap;gap:) to align CTAs or content blocks responsively.
  • Include rounded corners, soft shadows, and gradient or light neutral backgrounds to convey a high-end, modern feel.
  • Use accessible color contrast, readable font sizes, and web-safe fonts like 'Montserrat', sans-serif.
  • Output only the HTML block, ready to paste directly into a system that strips <head> or <body> tags.
  • Ensure spacing, padding, and button styles look visually appealing across desktop and mobile.
  • Do not use emoji-like icons.

Note: Adding your organization's style guide to your AI tool can also enhance the output to align with your brand's identity.

To get your HTML into a Vantaca email template:

  1. Use the AI tool with the framework above plus a prompt describing the email you want, and copy the HTML output.
  2. Navigate to Settings > Action Types/Steps, click the caret to expand the action item, click Rules on the outbound step (Homeowner, Board, Service Provider, and so on), and open the Email Templates tab.
  3. Click Create Template to open a new template in the Email Designer, or hover over an existing template card and click Edit Template.
  4. In the Email Designer, click the HTML tab at the top of the canvas, and paste the HTML from the AI tool.
  5. Switch back to the Design tab to confirm the HTML renders in the canvas.
  6. Replace any placeholders with merge tags using the in-line toolbar's Merge Tag option.
  7. Click Save to save the template to the Portfolio, or Assign & Close to save and assign it to the current step.
  8. Test before sending to everyone. Trigger the action item with a test homeowner record and confirm the template renders correctly.

After you have a final version, you can duplicate the template (hover the card, click the ellipses menu, and select Duplicate) to reuse it on other action item steps. Remember to swap merge tags for the new recipient context if needed.

Optional Elements:

  • Header with logo or banner image
  • Social media icon links in footer
  • Preheader text

Additional helpful details to include in your prompt:

  1. Specific CTAs (Call to Action buttons): What action do you want readers to take? (For example: "Pay Your Assessment," "Portal," "Read More.")
  2. Imagery: Do you have specific images or photos to include?

Related articles

Comments

0 comments

Article is closed for comments.