Automizy Email Editor Docs

Developers Page GitHub Demo Downloads

Introduction

What is Automizy Email Editor?

Automizy Email Editor is an easily integrable JavaScript application which helps you to create HTML emails effortlessly.

Why is it better than the others?

Incredibly simple integration, handy usage, continuously updated documentation. All for free!

For free? Sounds suspicious!

Automizy Email Editor is published under the well-known MIT license, it isn't our main product, only a part of our marketing automation system called Automizy. Since we also use a bunch of free stuff ourselves (jQuery, TinyMCE, etc.), we decided to do something good for mankind, like giving a free product which can contribute to other's successes.

Let's talk about integration!

Like I mentioned before, it's easy as hell, you only have to load a JS and CSS file and our software does the rest.
A simple example:

<!DOCTYPE html>
<html>
    <head>
        <link href="css/automizy-email-editor.css" />
        <script src="js/automizy-email-editor.js"></script>
        <script>
            $AEE.init().open();
        </script>
    </head>
    <body></body>
</html>

Can I ask?

Of course! If you have any questions, please feel free to contact us at help@automizy.com.

Main functions

$AEE.getHtmlCode(options)

Use this function to generate the html code of the edited email. This is the final code, it can be sent as an email.
Parameters:
options: Object containing some properties which determine how you'll get the code back.
  • conditions: Boolean. If false, dynamic block conditions won't be in the generated html code.
 
//Create an email and get the html code
$AEE.getHtmlCode({
    conditions: true
});

$AEE.getEditorCode()

Use this function to get the editor code of the edited email. This code later can be loaded using the $AEE.setEditorCode function. 
//Create an email and get the editor code
$AEE.getEditorCode();

$AEE.setEditorCode(code)

Use this function to set the editor code of the edited email.
Parameters:
code: The editor code you want to load.
 
//Create an email and save the code
var oldCode=$AEE.getEditorCode();

//Do some modifications, and then load the old code
$AEE.setEditorCode(oldCode);

Common functions

$AEE.baseDir(value)

Use this function to get/set the relative path of the editor.
Parameters:
value: The path represented by a string.
If invoked without parameter, the function returns the current value of baseDir. 
//Setter
$AEE.baseDir('../emaileditor'); //returns $AEE

//Getter
$AEE.baseDir(); //returns '../emaileditor'

$AEE.baseUrl(value)

Use this function to set/get the full path of the editor.
Parameters:
value: The path represented by a string.
If invoked without parameter, the function returns the current value of baseUrl. 
//Setter
$AEE.baseDir('http://automizy.com/automizyemaileditor'); //returns $AEE

//Getter
$AEE.baseDir(); //returns 'http://automizy.com/automizyemaileditor'

$AEE.clickToBack(func)

Use this function to set the callback function which will be called when clicking on the Back button.
If invoked without parameter, the set function will be called.
Parameters:
func: The function you want to invoke.
 
//Setter
$AEE.clickToBack(function(){
    if($AEE.saved){
        $AEE.close();
    }else if(confirm('You have unsaved edits in the campaign. Are you sure you want to exit?')){
        $AEE.close();
    }
});

//Trigger
$AEE.clickToBack();

$AEE.clickToPreview(func)

Use this function to set the callback function which will be called when clicking on the Preview button.
If invoked without parameter, the set function will be called.
Parameters:
func: The function you want to invoke.
 
//Setter
$AEE.clickToPreview(function(){
    alert('Preview not available.');
});

//Trigger
$AEE.clickToPreview();

$AEE.clickToSave(func)

Use this function to set the callback function which will be called when clicking on the Save button.
If invoked without parameter, the set function will be called.
Parameters:
func: The function you want to invoke.
 
//Setter
$AEE.clickToSave(function(){
    alert('Saved!');
});

//Trigger
$AEE.clickToSave();

$AEE.clickToSaveAndExit(func)

Use this function to set the callback function which will be called when clicking on the Save and next button.
If invoked without parameter, the set function will be called.
Parameters:
func: The function you want to invoke.
 
//Setter
$AEE.clickToSaveAndExit(function(){
    alert('Saved!');
    $AEE.close();
});

//Trigger
$AEE.clickToSaveAndExit();

$AEE.clickToSendTest(func)

Use this function to set the callback function which will be called when clicking on the Send test button.
If invoked without parameter, the set function will be called.
Parameters:
func: The function you want to invoke.
 
//Setter
$AEE.clickToSendTest(function(){
    alert('Send test!');
});

//Trigger
$AEE.clickToSendTest();

$AEE.customFields(obj)

Use this function to set/get the options of the custom fields tab.
Parameters:
obj: The custom fields with their names.
 
//Setter
$AEE.customFields({
    name: "Name",
    age: "Age"
}); //returns $AEE

//Getter
$AEE.customFields(); //returns {name: "Name", age: "Age"}

$AEE.dynamicBlocks(bool)

Use this function to activate dynamic editor blocks.
Parameters:
bool: Boolean. Set is true to activate, or false to deactivate dynamic blocks.
 
//Setter
$AEE.dynamicBlocks(true); //returns $AEE

//Getter
$AEE.dynamicBlocks(); //returns true

$AEE.getDescription()

Use this function to get the description (The first 255 characters of the text, without breaking).
This description is used when you want to share it on Facebook, for example. 
$AEE.getDescription()

$AEE.logoLink(url)

Use this function to set/get the link of the Automizy logo on the top left corner.
Parameters:
url: The url you want to open when clicking on the logo.
 
//Setter
$AEE.logoLink("https://automizy.com"); //returns $AEE

//Getter
$AEE.logoLink(); //returns "https://automizy.com"

$AEE.logoSrc(url)

Use this function to set the logo in the top left corner.
Parameters:
url: The path of the image you want to use.
 
//Setter
$AEE.logoSrc('vendor/automizy-email-editor/images/logo-automizy.png'); //returns $AEE

//Getter
$AEE.logoSrc(); //returns 'vendor/automizy-email-editor/images/logo-automizy.png'

$AEE.maxWidth(val)

Use this function to get/set the maximal width of the email.
Parameters:
val: The width in pixels you want to set.
 
//Setter
$AEE.maxWidth(600); //returns $AEE

//Getter
$AEE.maxWidth(); //returns 600

$AEE.minWidth(val)

Use this function to get/set the minimal width of the email.
Parameters:
val: The width in pixels you want to set.
 
//Setter
$AEE.minWidth(300);

//Getter
$AEE.minWidth(); //returns 300

$AEE.recipient(email)

You can set/get the recipient of the test email using this function.
Parameters:
email: The email address you want to set.
 
//Setter
$AEE.recipient('myaddress@mymail.com'); //returns $AEE

//Getter
$AEE.recipient(); //returns 'myaddress@mymail.com'

$AEE.save(func)

Use this function to save the email / set the callback function you want to trigger on saving.
If invoked without parameter, the set function will be called.
This function also has a special feature: if you invoke it using function(data){} parameter, you get the email object as data.
Parameters:
func: The function you want to invoke.
 
//Setter
$AEE.save(function(){
    console.log('SAVING!');
});

//Setter
$AEE.save(function(data){
    console.log(data);
});

//Trigger
$AEE.save();

$AEE.saveAndExit(func)

Use this function to save the email and exit / set the callback function you want to trigger on save and exit.
If invoked without parameter, the set function will be called. This function also has a special feature: if you invoke it using function(data){} parameter, you get the email object as data.
Parameters:
func: The function you want to invoke.
 
//Setter
$AEE.saveAndExit(function(){
    console.log('SAVE & EXIT!');
});

//Setter
$AEE.saveAndExit(function(data){
    console.log(data);
});

//Trigger
$AEE.saveAndExit();

$AEE.segments(obj)

Use this fnction to set/get the segments.
Parameters:
obj: The segments with their id and names.
 
//Setter
$AEE.segments({
    1: "Segment1",
    2: "Segment2"
}); //returns $AEE

//Getter
$AEE.segments(); //returns {1: "Segment1", 2: "Segment2",}

$AEE.showSaveMessage()

Use this function to show the 'Last saved' message with the current time. 
$AEE.showSaveMessage();

$AEE.systemFields(obj)

Use this function to set/get the options of the built-in custom fields tab.
Parameters:
obj: The custom fields with their names.
 
//Setter
$AEE.systemFields({
    unsubscribe: "Unsubscribe link",
    facebookShare: "Share on Facebook link"
}); //returns $AEE

//Getter
$AEE.systemFields(); //returns {unsubscribe: "Unsubscribe link", facebookShare: "Share on Facebook link"}

$AEE.title(str)

Use this function to set/get the title of the email.
Parameters:
str: The title you want to set.
 
//Setter
$AEE.title('My email'); //returns $AEE

//Getter
$AEE.title(); //returns 'My email'

$AEE.widget()

Use this function to get the DOM element of the editor. 
$AEE.widget();

Other functions

$AEE.moveBlockUp($block)

Use this function to move the given block upper.
Parameters:
$block: The jQuery object representing the block you want to move.
If the function is called without parameter, the currently active block will be moved. 
$AEE.moveBlockUp();

$AEE.moveBlockDown($block)

Use this function to move the given block down.
Parameters:
$block: The jQuery object representing the block you want to move.
If the function is called without parameter, the currently active block will be moved. 
$AEE.moveBlockDown();

Special functions

These functions are all called before Automizy Email Editor is visible. To check how they work reload this page, and inspect the console log.

$AEE.init(func)

This function starts to load the Automizy Email Editor in the background.
Please note that after loading finished, AEE won't show up automatically, you have to call the $AEE.open() function too.
You can also set the callback function shown in the example.
Parameters:
func: The function you want to invoke.
 
//Call the $AEE.init() function from console, and then the $AEE.open() function to open the editor.

//Setter
$AEE.init(function(){
    console.log('INIT STARTED!');
}); //return $AEE

//Trigger
$AEE.init(); //return $AEE

$AEE.scriptLoaded(function(editorStatus){})

The function given as parameter will be called when a plugin is fully loaded. The function will get data about the status of the editor as parameter.
Parameters:
editorStatus: Loading data of the editor.
 
$AEE.scriptLoaded(function(editorStatus){
    console.log('PLUGIN LOAD: ', editorStatus);
}); //return $AEE
$AEE.init();

$AEE.ready(func)

The function given as parameter will be called when all plugis are fully loaded.
Please note that at this state the elements of the editor are not available yet.
Parameters:
func: The function you want to invoke.
 
$AEE.ready(function(){
    console.log('ALL PLUGIN LOADED');
}); //return $AEE

$AEE.layoutReady(func)

The function given as parameter will be called when the editor is fully loaded. In this state all elements of the editor are available.
Parameters:
func: The function you want to invoke.
 
$AEE.layoutReady(function(){
    console.log('LAYOUT READY');
}); //return $AEE

$AEE.open(func)

This function opens the editor.
You can also set the callback function shown in the example.
Parameters:
func: The function you want to invoke.
 
//Setter
$AEE.open(function(){
    console.log('AEE OPENED!');
}); //return $AEE

//Trigger
$AEE.open(); //return $AEE

$AEE.close(func)

This function closes the editor.
You can also set the callback function shown in the example.
Parameters:
func: The function you want to invoke.
 
//Setter
$AEE.close(function(){
    console.log('AEE CLOSED!');
}); //return $AEE

//Trigger
$AEE.close(); //return $AEE

Additional functions

Other functions, which are independent of Automizy Email Editor, but you might have a good use of them.

$AEE.getExtension(fileName)

Use this function to get the extension of a given file.
Parameters:
fileName: The file you want to inspect.
 
$AEE.getExtension("dog.jpg") //return "jpg"

$AEE.isImageFile(fileName)

Returns true if the file given as parameter is an image file.
Parameters:
fileName: The file you want to inspect.
 
$AEE.isImageFile("dog.jpg") //return true

$AEE.rgbStyleToHex(rgbStyle)

Parameters:
rgbStyle: The rgb style you want to convert.
It has to follow this pattern: "rgb(x, y, z)" 
$AEE.rgbStyleToHex("rgb(255, 255, 255)") //return "#ffffff"

$AEE.screenSize()

Returns the screen size of the window. 
$AEE.screenSize() // return {x: 1400, y: 800}

$AEE.styleHtml(htmlCode)

Formats the given html code, using delimiters.
Parameters:
htmlCode: The html code you want to formats.
 
$AEE.styleHtml($AEE.getHtmlCode());

$AEE.touchable()

Inspects the device and returns true if it's touchable. 
$AEE.touchable() // return false