Popup Builder

This guide walks you through embedding Unlayer's drag-and-drop popup builder into your web application. The popup builder lets your users design popups, modals, and overlays for lead capture, promotions, and announcements.

---

Step 1: Install the SDK

Vanilla JS

Add the script tag to your HTML:

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

React

npm install react-email-editor

Angular

npm install angular-email-editor

Vue

npm install vue-email-editor

---

Step 2: Initialize the Editor

Set displayMode to popup to load the popup builder.

Recommended Size

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

Vanilla JS

<div id="editor-container" style="height: 700px;"></div>

<script>
  unlayer.init({
    id: 'editor-container',
    displayMode: 'popup',
    projectId: 1234, // Replace with your project ID
  });
</script>

React

import React, { useRef } from 'react';
import EmailEditor from 'react-email-editor';

function App() {
  const emailEditorRef = useRef(null);

  const onReady = () => {
    console.log('Editor is ready');
  };

  return (
    <EmailEditor
      ref={emailEditorRef}
      onReady={onReady}
      options={{
        displayMode: 'popup',
        projectId: 1234, // Replace with your project ID
      }}
    />
  );
}

export default App;

Angular

app.module.ts

import { EmailEditorModule } from 'angular-email-editor';

@NgModule({
  imports: [ EmailEditorModule ],
})

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { EmailEditorComponent } from 'angular-email-editor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  @ViewChild(EmailEditorComponent)
  private emailEditor: EmailEditorComponent;

  options = {
    displayMode: 'popup',
    projectId: 1234, // Replace with your project ID
  };

  editorLoaded() {
    console.log('Editor is ready');
  }

  exportHtml() {
    this.emailEditor.editor.exportHtml((data) =>
      console.log('exportHtml', data),
    );
  }
}

app.component.html

<div class="container">
  <button (click)="exportHtml()">Export</button>
  <email-editor [options]="options" (loaded)="editorLoaded()"></email-editor>
</div>

Vue

<template>
  <div id="app">
    <EmailEditor
      ref="emailEditor"
      :options="options"
      :project-id="projectId"
      v-on:load="editorLoaded"
    />
  </div>
</template>

<script>
  import { EmailEditor } from 'vue-email-editor';

  export default {
    components: { EmailEditor },
    data() {
      return {
        projectId: 1234, // Replace with your project ID
        options: {
          displayMode: 'popup',
        },
      };
    },
    methods: {
      editorLoaded() {
        console.log('Editor is ready');
      },
    },
  };
</script>

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 > Builder > Settings

---

What's Next

• Load & Save Designs — Load templates and persist user work.
• Export Designs — Export as HTML, PDF, images, and more.
• Deploy to Production — Set up allowed domains and go live.