Skip to main content

Designing Your Own HTML Email Notifications

How to make more engaging and customizable HTML templates for your notification

Written by Althaaf Rachman Hafidz

Purpose

Enhance your email notifications to be more interactive, professional, and engaging (for both your customers and your team) by creating tailored email templates with customizable code.


Before You Begin

Make sure:

  • A clear understanding of your company branding (tone of voice, brand colors, etc.).

  • The primary email already used is your official company email account.

  • An active AI tool account, such as ChatGPT, Claude, ETC.


Steps

Access the Notification Settings Page

  • From any page, go to Settings → Email Automation.

  • On your chosen template (Customer, General, or Staff), open the meatballs menu and click the pencil icon to open the Edit Notifications page.

  • Copy your existing email content, or create a new version that includes short codes.

    Note: Shortcodes must stay exactly as provided and cannot be customized.

Customize the Template Using an AI Tool

  • Open your preferred AI chat tool (e.g., ChatGPT).

  • Ask the AI to help you generate or refine your email HTML code.

Tips for Better Results:

  • Add your branding colors using hex color codes.

  • Describe your desired layout, such as “Add a button below the summary to view the buyback status.”

  • Include your brand tone, such as “Make it friendly, creative, and modern.”

  • Customize button styles: Ask the AI to change the button color, shape, padding, font size, and text color to match your brand. For example, “Change the default blue button to Plug’s brand color #163C3F, make it pill-shaped, adjust the padding and font size, and turn the offer detail link into a fully styled button.”

  • Make gradual improvements: You don't need to customize everything at once. Start with the button color and styling, then adjust the layout, spacing, typography, and other elements until you're happy with the result.

  • Preserve shortcodes: Remind the AI to keep all existing shortcodes exactly as provided so your email templates continue to work correctly.

Update the Template

  • Copy the newly generated HTML code.

  • Return to the Edit Notifications page.

  • Click the Source button and paste your code.

  • Click Save Changes to update the template.

  • Use Preview Email to review your new design.


Tips and Notes

  • You can customize the email content as you like, though the default font style will remain.

  • Edit the body of the email directly without enabling the Source button.


Customizing your email notifications helps you maintain a consistent brand identity and create a professional experience for customers and your team. Review your templates regularly to ensure they align with your latest branding and communication standards.

Did this answer your question?