Settings

path

Type: String

Default: ''

Specifies the url path to the Revolvapp directory for connecting iframe styles and other editing tools.

$RE('#myemail', {
    path: '/revolvapp-dist/',
    template: '/my-folder/template.html'
});

template

Type: String

Default: ''

The url path to your email template.

$RE('#myemail', {
    path: '/revolvapp-dist/',
    template: '/my-folder/template.html'
});

upload

Type: String, Boolean

Default: false

The url path to your upload script.

$RE('#myemail', {
    path: '/revolvapp-dist/',
    template: '/my-folder/template.html',
    upload: '/my-backend-upload/'
});

The upload script must returns JSON with the url of the uploaded image like this:

{
    "url": "/my-images/image-name.jpg"
}

autosave

Type: String, Boolean

Default: false

The path to the autosave script. Revolvapp will be send the post request to your backend every time when changes occur in the editor.

$RE('#myemail', {
    path: '/revolvapp-dist/',
    template: '/my-folder/template.html',
    autosave: '/my-backend-autosave/'
});

The post request has two params:

  • html - generated HTML
  • template - the modified template

Here is the php example of how to get the params:

<?php

$html = $_POST['html'];
$template = $_POST['template'];

?>

code

Type: Boolean

Default: true

This setting enables or disables the feature to edit the code of template.

$RE('#myemail', {
    path: '/revolvapp-dist/',
    template: '/my-folder/template.html',
    code: false
});

align

Type: String

Default: left

This setting sets up the default text align for content in the email.

$RE('#myemail', {
    path: '/revolvapp-dist/',
    template: '/my-folder/template.html',
    align: 'center'
});

baseColors

Type: Array

Default: ['#ffffff', '#111113']

The setting sets the default or base colors to the color picker.

$RE('#myemail', {
    path: '/revolvapp-dist/',
    template: '/my-folder/template.html',
    baseColors: ['#ffffff', '#000000', '#ee2455']
});

frame

Type: Object

By default is:

{
    'width': '100%',
    'border': 'none',
    'background-color': '#fff',
    'margin-left': 'auto',
    'margin-right': 'auto'
}

This setting allows to change the style of the editing frame.

$RE('#myemail', {
    path: '/revolvapp-dist/',
    template: '/my-folder/template.html',
    frame: {
        'border': '2px solid yellow',
        'background-color': '#000'
    }
});

styles

Type: Object

By default is:

{
    'text': {
        'font-family': 'Helvetica, Arial, sans-serif',
        'font-size': '14px',
        'line-height': '20px',
        'color': '#111113'
    },
    'link': {
        'color': '#2c76ee'
    },
    'button-link': {
        'font-size': '18px',
    },
    'button': {
        'font-size': '15px',
        'font-weight': 'bold',
        'color': '#ffffff',
        'background-color': '#2c76ee'
    }
}

This setting allows to change the default style of the email content.

$RE('#myemail', {
    path: '/revolvapp-dist/',
    template: '/my-folder/template.html',
    styles: {
        'text': {
            'color': '#333333',
            'font-size': '16px',
            'line-height': '24px'
        },
        'link': {
            'color': '#ee3455'
        }
    }
});

If you use a loaded font in a template, then it must be specified in the styles setting.

The loaded font in the template:

<re-font href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i"></re-font>

The setting:

$RE('#myemail', {
    path: '/revolvapp-dist/',
    template: '/my-folder/template.html',
    styles: {
        text: {
            'font-family': "Montserrat, Helvetica, Arial, sans-serif"
        }
    }
});

card

Type: Object

By default is:

card: {
		spacer: false
}

This option allows you automatically add the spacer tag between cards after the card is duplicated. So just set up the height of spacer in the setting:

$RE('#myemail', {
    path: '/revolvapp-dist/',
    template: '/my-folder/template.html',
    card: {
        spacer: '8px'
    }
});