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.


Video Walkthrough

Watch our quick tutorial to customize HTML email notifications.


Before You Begin

Make sure:

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

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

  • An active AI tool account, such as ChatGPT.


Steps

Access the Notification Settings Page

  • From any page, go to Settings → Notifications.

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

    Click Edit Option
  • 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.

    Copy Existing Email Content

Customize the Template Using an AI Tool

Submit AI Content Prompt
  • 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 (e.g., “Add a button below the summary to view the buyback status”).

  • Include your brand tone (e.g., “Make it friendly, creative, and modern”).

Update the Template

  • Copy the newly generated HTML code.

    Copy AI-Generated Content Prompt
  • Return to the Edit Notifications page.

    Return to Notifications Page
  • Click the Source button and paste your code.

    Click the Source button
  • Click Save Changes to update the template.

    Click the Save Changes Button
  • Use Preview Email to review your new design.

    Preview Updated Email

Tips and Notes

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

  • Edit the body 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?