Installation

This page will help you get started with MailUi. You'll be up and running in a jiffy!

Installation Steps #

Add JavaScript Library #

The first step is to add the following JavaScript library to your web app. This will load all the required assets for you to initialize the editor.

<script src="https://editor.mailui.co/embed.min.js"></script>

Initialize Container #

To render the MailUi editor on your page, you need to add a blank <div> container element first.

<div id="mailui-editor"></div>

Initialize Editor #

Now, we'll initialize the editor in the blank div above by passing its id and some other configuration options.

var editor = mailui.init({
  id: 'mailui-editor',
  projectId: '', // set projectId from you app dashboard
  signature: "" // set signature from your app dashboard 
});

editor.loadDesign({});

Find ProjectID and Signature #

Follow this steps:

Log in to the Dashboard Click Here
Open/Create a Project
Go to Project > Settings > Configure page and find Project ID and Signature

Configuration Options #

Here are all the available configuration options that can be passed to the mailui.init method.

Property	Required	Description	Type
id	Yes	This is the HTML div id of the container where the editor will be embedded.	string
projectId	Yes	You can find the project ID on the project settings page	number
signature	Yes	You can find the project ID on the project settings page	string
locale	No	This is the locale you want to load the editor in. We have many translations available.	string
appearance	No	These are the appearance options to change the look and feel of the editor.	object
mergeTags	No	This is an array of objects. You can pass the merge tags to display in the editor.	object
mergeTags	No	This is an array of objects. You can pass the merge tags to display in the editor.	object
specialLinks	No	You can pass special links in this object.	object
tools	No	These are the options for tools and custom tools.	object
excludeTools	No	This feature allows customization of available tools by removing specific ones from the user interface or functionality.	array[]
tabs	No	These are the options for tools and custom tools.	object
devices	No	You can pass which devices you wants to preview.	string
defaultDevice	No	Select the default device for preview.	string
protectedModules	No	The Protected Modules feature ensures only authorized actions can access or modify protected items by verifying their status through a listener before use.	array

Configuring Production Domains #

To make your application accessible through custom domains, follow these steps:

Domain Rules #

Enter only the root domain, like example.com.
Do not include http://, https://, www, or any paths (e.g., example.com/path).

Steps to Add Domain #

Go to Domain Settings in your dashboard, Project > Settings > Configure
Type each root domain you want to add (e.g., example.com).
Click Add Domain.

Domain Limits #

Your subscription plan determines how many domains you can add. Check your plan for the exact limit from Billing.

Sandbox Mode Configuration #

The Sandbox Mode toggle switch allows you to enable or disable the sandbox environment for your project. Sandbox Mode provides a safe testing environment to experiment and test your project without affecting live data or production environments. Here’s how it works:

How to Use the Sandbox Mode Toggle #

Enable Sandbox Mode (Default): By default, Sandbox Mode is enabled when you create a new project. This means all operations and tests will run in an isolated sandbox, ensuring that no changes are applied to the live environment.
Disable Sandbox Mode: Toggle the switch to "off" if you want to exit Sandbox Mode. This will switch your project to live mode, where changes can affect actual data and production services.

Important Notes #

Testing Safely: Keep Sandbox Mode enabled while building and testing to prevent unintentional changes to live data.
Production Readiness: Before going live, you may want to disable Sandbox Mode to fully integrate with production settings and data.