Skip to content

KovanLabs/Email_Builder

Repository files navigation

Kovan Email Builder 📧

A simple, visual email template builder for creating branded HTML emails for Kovan Labs. No coding experience required!

🌟 Features

  • Visual Email Builder - Design beautiful HTML emails with an easy-to-use interface
  • Live Preview - See your changes in real-time as you build
  • Mobile & Desktop Views - Preview how your email looks on different devices
  • Theme Colors - Quickly apply brand colors to your email
  • One-Click Export - Copy your HTML with a single click

📋 How to Use

Step 1: Generate Your Email HTML

  1. Open builder.html in your web browser ( Builder link )
  2. Use the sidebar controls to customize your email:
    • Add your content (headings, paragraphs, etc.)
    • Choose your theme colors
    • Configure sections as needed
  3. Click the "Copy HTML" button in the top-right corner to copy your email code

Step 2: Send Your Email via Outlook

Follow these simple steps to use your branded email in Outlook:

2.1 Open Outlook and Create a New Email

Click "New mail" to start composing a new email.

Step 1 - New Mail


2.2 Open the Apps Menu

In the email compose window, click the Apps icon (grid icon) in the toolbar.

Step 2 - Apps Menu


2.3 Add the "Insert HTML" App

If you don't see the Insert HTML app, click "Add apps" to search for it.

Step 3 - Add Apps


2.4 Search for "Insert HTML"

In the search box, type "Insert HTML" and select "Insert HTML by Designmodo" from the results.

Step 4 - Search Insert HTML


2.5 Open the Insert HTML App

Once installed, click on the "Insert HTML by Designmodo" app to open it.

Step 5 - Open Insert HTML App


2.6 Paste Your HTML Code

The Insert HTML panel will appear. You have two options:

  • Paste your HTML directly into the code box and click "Insert HTML"
  • Or click "Paste HTML" to paste from clipboard

Step 6 - Paste HTML

Step 7 - Insert Code


🎉 Tadaaa! Your Branded Email is Ready!

Your beautiful, branded Kovan Labs email is now ready to send! Simply add your recipients, subject line, and hit Send!


💡 Tips

  • Preview First: Always check the mobile preview before exporting to ensure your email looks great on all devices
  • Keep It Simple: Emails with clean, simple designs tend to render better across different email clients
  • Test Before Sending: Send a test email to yourself first to verify everything looks correct

🛠️ Technical Details

This email builder generates HTML emails that are:

  • Compatible with major email clients (Outlook, Gmail, Apple Mail, etc.)
  • Responsive on mobile devices
  • Using inline CSS for maximum compatibility

📁 Project Structure

Email_builder/
├── builder.html                                    # Main email builder application
├── 0_Click on new email.png                        # Screenshot: New mail button
├── 1_Find Apps here in outlook.png                 # Screenshot: Apps menu
├── 2_ Add Apps.png                                 # Screenshot: Add apps button
├── 3_Search for Insert HTML.png                    # Screenshot: Search for app
├── 4_Find deisgn modo in apps.png                  # Screenshot: Designmodo app
├── 5_Find the Paste HTML button here.png           # Screenshot: Paste HTML option
├── 6_Paste the copied code here and click insert.png  # Screenshot: Insert code
└── README.md                                       # This file

🤝 Support

If you encounter any issues or have questions, please reach out to the Kovan Labs team.


Made with ❤️ by Kovan Labs

About

Kovan Email Builder

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages