Installation

Step 1: Add JavaScript Library

To get started, you need to add the Unlayer JavaScript library to your web app. This library will load everything needed to run the builder.

<script src="//editor.unlayer.com/embed.js"></script>

If you are using React, Angular or Vue, check our components available on npm:

• React Component
• Angular Component
• Vue Component

Step 2: Add a Container for the Editor

The Unlayer editor needs a container element on your page. Add a blank div where the editor will be displayed.

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

📘

Recommended Size

For the best experience, ensure the container is at least 1024px wide and 700px high. The editor will expand to fill the entire container.

Step 3: Initialize the Editor

Now, let’s initialize the editor inside the container you just created by passing its id and configuration options.

unlayer.init({
  id: 'editor-container', // ID of the container created in previous step
  projectId: 1234,  // Add your project ID here
  displayMode: 'email'  // Can be 'email', 'web' or 'popup'
});

Where to get the Project ID?

1. Log in to the Developer Console
2. Create a Project
3. You can find the project ID in Project > Settings

Configuration Options

Here’s a breakdown of some commonly used configuration options for unlayer.init():

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, // Add your project ID here
  displayMode: 'email'
})

editor.loadDesign({})
editor.exportHtml(function(data) { })

Step 4: Deploy to Production

To access project settings and premium features in production:

1. Log in to Developer Console and go to your project.
2. Pass the projectId when initializing the builder. You can find the project ID in console under Project > Settings.
3. Add Allowed Domains: Ensure your builder only works on specific domains. Go to Project > Settings > Deployment and add your allowed domains under “Allowed Domain(s)” section as shown below.