Installation
This page will help you get started with Unlayer. You'll be up and running in a jiffy!
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="//editor.unlayer.com/embed.js"></script>
If you are using React, Angular or Vue, check our components available on npm:
Initialize Editor
The Unlayer editor needs a container HTML element on your page to be rendered inside. Let's add a blank div first.
<div id="editor-container"></div>
Recommended Size
It is recommended that the container has a minimum width of 1024px and minimum height of 700px. The editor is designed to be fluid and will take full width and height of the container.
Now, we'll initialize the editor in the blank div above by passing its id and some other configuration options.
unlayer.init({
id: 'editor-container',
projectId: 1234,
displayMode: 'email'
})
Configuration Options
These are all the configuration options available that can be passed to the unlayer.init method.
| Attribute | Required | |
|---|---|---|
| id string | Yes | This is the HTML div id of the container where the editor will be embedded. |
| displayMode string | No | This is the template display mode which can be email or web. Default value is web. |
| projectId integer | No | This is the project ID from Unlayer. You can get it from the project settings page. |
| locale string | No | This is the locale you want to load the editor in. We have many translations available. Learn more |
| appearance object | No | These are the appearance options to change the look and feel of the editor. Learn more |
| user object | No | This is the info of the user who is using the editor. You can pass id, name and email. Unique id is required to enable user saved blocks. |
| mergeTags array | No | This is an array of objects. You can pass the merge tags to display in the editor. Learn more |
| designTags object | No | You can pass design tags in this object. Learn more |
| specialLinks object | No | You can pass special links in this object. Learn More |
| tools object | No | These are the options for tools and custom tools. Learn more |
| blocks array | No | This is an array of objects. You can pass custom blocks here. Learn more |
| editor object | No | These are some editor options for different functions of the editor. Learn more |
| fonts object | No | You can pass custom fonts here. Learn More |
| safeHtml boolean | No | Sanitizes HTML output to prevent executable JavaScript from being inserted. |
| customJS array | No | Custom JavaScript URL or source. Learn more |
| customCSS array | No | Custom CSS URL or source. Learn more |
| textDirection string | No | This is the text direction of html output which can be rtl or ltr. |
Multiple Instances
You can create multiple instances of the editor on the same page, or if you have a single page application.
const editor = unlayer.createEditor({
id: 'editor-container',
projectId: 1234,
displayMode: 'email'
})
editor.loadDesign({})
editor.exportHtml(function(data) { })
Updated 3 months ago