Email Templates Settings

Email Template Configuration & Management

The Email Template Settings module is a centralized management hub that stores and automates all digital communications, including HTML bodies, subjects, and SMTP account links. By assigning specific templates to document types like Tax Invoices, Proposals, or Receipts, the system ensures that automated sends, marketing campaigns, and customer support flows maintain consistent branding and correct delivery routing. This module streamlines the entire notification lifecycle, from visual creation in the Email Builder to real-time integration with automations and external APIs for efficient, professional outreach.

How to Load this Module

Step 1: Open Settings — Click the Settings (gear icon) located in your user profile sidebar.
Step 2: Navigate to Email Settings — Select Biz1 Settings from the top tabs, then click the Email settings dropdown.
Step 3: Select Email Templates — Click on - Email Templates to load the management table and your full list of templates.

Email Template Management

This table serves as the control center for all automated emails sent from the system. It allows you to design, test, and assign specific layouts to different business workflows.

Template Identity & Status

ID & Template Name: The unique system ID and internal name for organizing your templates.
Smtp Title: Shows which email account (SMTP) is linked to this template for sending.
Create Date: The date the template was originally built.
Status (Active/Inactive): A dropdown to enable or disable the template. Only Active templates can be used in live workflows.

Document Assignment (Checkbox Columns) By checking a box, you set that template as the system default for that specific action:

Quick email: Used for manual, one-off emails sent directly from a client’s profile.
Purchase Orders: Default layout for orders sent to your suppliers.
Receipts: Payment confirmation sent to customers.
Proposal: Standard layout for sending price quotes.
Delivery: Default layout for sending delivery notes or packing slips.
Tax Invoices: Default billing layout for tax-compliant invoices.
Newspaper Orders: Specific layout for media or advertisement orders.
Credit Invoices: Used for refunds or credit memos.
Proforma Invoices: Preliminary layouts sent before a final invoice.
Receipt Tax Invoices: Combined document for both payment and billing.
GR/IR: Used for Goods Received / Invoice Received reconciliation.
Detail Orders: Full breakdown template for complex order requirements.
Donation Receipt: Specialized template for non-profit contribution confirmations.
Document for Accountant: Sends a carbon copy of documents to your bookkeeper.
Mission Done: Automated summary sent after a task is completed.
Meeting Template: Layout for invites or post-meeting notes.
Use for Support: Default reply template for customer service tickets.
Suppliers: Standard communication template for your vendor list.
Online Proposal: Interactive, digital-first proposal layout.

Action Icons

Test: Sends a sample email to your inbox to verify the design and links.
Copy: Duplicates the template so you can create a new version quickly.
Pencil (Builder): Opens the visual Email Builder to edit the HTML design and text.
Gear (Settings): Opens the metadata settings to change the name, SMTP link, or flags.
Trash: Permanently deletes the template from the system.

Templates creation Options :

Plus (+) Icon: Click this small icon to quickly add a new template row directly to the list using the internal system settings.
ADD NEW BUILDER Button: Click this primary button at the top right to launch the external visual builder and design a brand-new, responsive HTML template from scratch.

Test Email Feature

Clicking the Test button allows you to send a draft of your template to a specific email address. This ensures your layout, images, and Tags look perfect before sending them to real customers.

How to Use the Test Modal

Email Address: Enter the recipient's email where you want to receive the test message.
Send Test: Click the button to deliver the email immediately to your inbox for review.

Email Settings: Configuration Modal

Clicking the Settings icon (gear icon) opens a modal where you define the core identity and behavior of your email template. Here is the short info for each field:

Template Identification

Template Name: Give your template a unique name to find it easily in your list.
Subject: Enter the text your customers will see in their inbox subject line. You can use Tags here!
Select SMTP: Choose the outgoing mail server (provider) that will send this specific email.

Routing & Automation
Select Dynamic Form: Link this template to a specific form so it sends automatically when that form is submitted.
Source: Filter which lead or customer sources should trigger this specific template.
Team Member: Assign a specific staff member to be the "owner" or default sender for this template.

Document & Status

Status: Toggle between Active (ready to use) or Inactive (draft mode).
Select PDF Signer: Choose the authorized person whose digital signature should appear on documents sent with this email.
Attachment: Upload a permanent file (like a brochure or terms of service) that will be sent with every email.

Email Template: Adding & Designing Templates

The Email Template module provides two distinct ways to create and customize your business communications, ranging from quick internal setups to professional, visual designs.

Template Creation Options

Quick Add (+) Icon: Clicking this small icon adds a new template row directly to your current list, allowing you to quickly configure basic internal system settings for a new layout.

Using the Email Builder

When you select the Add New Builder option, you can choose from several starting points to craft your message:

Pre-Built Layouts: Start with structured frameworks such as Pricing Tables, Listing & Tables, or a 1-2-1 column layout to organize your content effectively.
Ready-to-Use Templates: Choose from professional designs like Appap | Welcome, Certified Yoga Therapist, or Food App Delivery and simply edit the text and images to match your brand.
Blank Canvas: Select a Blank layout to build a custom design from scratch by dragging and dropping various content blocks.
Custom Upload: If you already have an existing email or page template, you can upload your own file directly into the editor to continue styling it.

Designing with Pre-built Templates

Once you click the Design button on a pre-made template, such as Appap | Welcome, the system launches the full Email Builder interface. This allows you to customize the professional layout to fit your specific business needs using a drag-and-drop workspace.

Email Builder: Toolbar & Settings Guide

The Email Builder provides a specialized toolbar for testing and technical configuration, along with a detailed settings modal to define how each template functions within the system.

Toolbar Action Icons

Test: Click this to send a live preview of the current design to your inbox to check its appearance on different devices.
Code (<>): Allows you to view or manually edit the underlying HTML source code of your template.
Browser/Web Icon: Provides a web-based preview of the template to see how it renders in a standard browser.
Settings (Gear Icon): Opens the Email setting modal to configure the template’s technical metadata and system behavior.
RTL: Quickly toggles the text alignment to Right-to-Left for languages like Hebrew or Arabic.
SAVE: Click this primary button to commit all design and setting changes to the system.

Email Setting Modal

Clicking the Settings (gear icon) within the Email Builder toolbar opens the Email setting modal. This interface allows you to configure the essential metadata and technical backend for your specific template.

Template & Subject: Define the internal Template name and the public Subject line that recipients will see.
SMTP & Dynamic Form: Select which authorized SMTP account will send the email and link it to a specific dynamic form if data collection is required.
Source & Team Member: Categorize the template by its Source and assign it to specific Team members (e.g., User, Pratik, or Alpha Dude) for organization.
Status: Toggle the template between Active and Inactive; only active templates can be used in live workflows.
PDF Signer: Select a designated pdf signer if the template is intended to accompany documents requiring digital signatures.
Attachment: Use the Choose files button to permanently attach specific documents (like a company brochure or terms of service) to this template.

Email Builder: Widget Selection

The Widgets panel in the Email Builder provides drag-and-drop elements to customize your template's structure and content. Below is a breakdown of the available widgets categorized by their function.

Image: Adds a picture or logo to your email.
Text: Inserts a standard text block for your message.
Divider: Adds a horizontal line to separate different sections.
Button: A clickable link for actions like "Pay Now" or "Read More".
Video: Embeds a video player or thumbnail link.
HTML: Allows you to paste custom code for advanced styling.
Block: A generic container to group elements together.
Footer: Adds a professional bottom section with company info.
Page Header: Adds a branded top section for the email.
List Image: A list layout that includes images next to text.
Progress Bar: Shows a visual percentage of completion.
List Group: Organizes items in a clean, vertical list.
Panel: A boxed area used to highlight specific content.
Jumbotron: A large, prominent box for big announcements.
Material Box: A modern, shadow-styled container for content.
NAVBAR: Adds a navigation menu with multiple links.
Pricing table: A structured table to show costs and plans.
Services List: A clean list to display what your business offers.
Image Grid: Displays multiple photos in a gallery format.
Paragraph: Standard block for long-form written content.
Marked Text: Highlights specific words or phrases.
Definition List: Formats terms followed by their descriptions.
Blockquote: Styles text as a prominent pull-quote.
Unordered List: Adds a standard bulleted list.
Link: Inserts a simple clickable web address.
Button Group: Places multiple buttons together in one row.
Button Toolbar: A complex set of grouped buttons for many actions.
Input Field: A single-line box for users to type short text.
Text Area: A larger box for users to type long messages.
Checkbox: A small box for users to select an option.
Input Group: Combines text labels with an input box.
Form Group: A structured container for a single form question.
Select: A dropdown menu for choosing from a list.
Form: Inserts a complete, multi-field data collection block.

Layouts: Structure & Grid Management

The Layouts tab provides the structural "skeleton" for your email, allowing you to organize content into clean rows and columns.

- How to Use Layouts

Row Selection: Drag a pre-defined layout row onto the canvas to create a container for your elements.
Column Configurations: Choose from various split-screen options to place content side-by-side:
- Single Column: A full-width block for main headers or large images.
- Multi-Column (2, 3, or 4): Equal or unequal splits used to align text next to images or show multiple features in one row.
Widget Placement: Once a layout is active, you can drag individual Widgets (like text, buttons, or images) into the specific dashed boxes within that layout.

Tags: Dynamic Data Integration

The TAGS tab contains "short-codes" that act as placeholders. When an email is sent, the system automatically replaces these tags with real information from your database, such as the customer's name or invoice details.

Tags are dynamic placeholders used in the Email Builder. Instead of typing fixed text, you use a code in curly braces { } that the system automatically replaces with real data at the moment you send the email.

How They Work

Dynamic Swapping: You write {name} in the builder; the system "swaps" it for the actual name (like "John Doe") when the email is sent.
Database Linking: Each tag connects directly to a specific field in your system, such as Invoices, Tickets, Missions, or Customer Profiles.
One Template for All: Use tags to create one template that automatically personalizes itself for hundreds of different recipients.

Key Usage Rules

Exact Spelling: Tags must be spelled exactly as shown (e.g., use metting for calendar tags as per system code).
Perfect Formatting: Always keep the curly braces { } around the tag name.
Context Matters: A tag like {invoice_id} will only work if the email is sent through a document/billing flow.
Copy & Paste: You can click tags in the TAGS tab and paste them into any Text block or Button link.

Email Builder & Template Creation

Clicking the ADD NEW BUILDER + button opens the advanced Email Builder interface. This workspace allows you to design professional, responsive emails using a drag-and-drop system.

Builder Interface Overview

The builder is divided into three main functional areas to help you customize your design:

1. Design Tools (Left Sidebar)

Blocks: Drag elements like Text, Images, Buttons, and Social icons directly into your email.
Layouts: Choose your structure, such as 2 columns, 3 columns, or 4 columns, to organize your content.
Layer (Structure Map): A tree-view of your entire email. Use it to quickly find, select, and manage deeply nested Sections and Columns.
Tags (Dynamic Data): A library of placeholders (shortcodes) with Copy buttons. Use these to auto-fill emails with real data like {name}, {email}, or {date_buy}.

2. Visual Canvas (Center)
Live Preview: See your design exactly as it will appear to customers.
Device Toggle: Switch between Desktop, Tablet, and Mobile views to ensure your email is responsive.
Undo/Redo: Quickly fix mistakes while editing.

3. Page Attributes (Right Sidebar)
Email Settings: Define the Subject, SubTitle, and the total Width of the email (standard is 600px).
Theme Settings: Control the global look, including Font family, Font size, Text color, and Background color.
Breakpoint: Set the specific width (e.g., 480px) where the layout should switch from desktop to mobile view.

Key Features
Send Test Email: Use the button at the top right to send a live draft to your inbox for final verification before saving.
Source Code: Switch tabs at the top right if you need to manually edit the HTML/CSS code.
Import Font: Add custom brand fonts to match your company's identity.