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({});

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