Installing in Your Application

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.js, use our React Component 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. The editor is designed to be fluid and will take full width and height of the container.

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

Recommended Size

It is recommended that the container has a minimum width of 1024px and minimum height of 700px.

Now, we'll initialize the editor in the blank div above by passing it's id.

unlayer.init({
  id: 'editor-container',
  projectId: 1234,
  templateId: 1,
  displayMode: 'email',
  user: {
    id: 1, // User ID - Required
    name: "John Doe", // Full Name - Optional
    email: "john@doe.com" // Email - Optional
  }
})
Attribute Type 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.
user Object NO This is information about your logged-in user. User's ID is required. Name and email are optional.
projectId Integer NO This is the project ID from Unlayer. You can get it from the project settings page.
templateId Integer NO This is the template ID from Unlayer. You can get it from the templates page.
mergeTags Array NO This is an array of objects which contains the merge tags you want to support in the editor.