You can integrate the Unlayer editor into your application using its JavaScript SDK or framework-specific wrappers like React, Angular, and Vue. Below is a step-by-step guide to embedding the Unlayer editor:
1. Install the SDK
You can include the Unlayer SDK directly via a <script> tag or install it using npm.
Using a <script> tag (CDN)
<script src="https://editor.unlayer.com/embed.js"></script>
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>
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?
Log in to the Developer Console
Create a Project
You can find the project ID in Project > Settings
Step 4: Deploy to Production
To access project settings and premium features in production:
Log in to Developer Console and go to your project.
Pass the
projectIdwhen initializing the builder. You can find the project ID in console under Project > Settings.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.
If you are using React, Angular or Vue, check our components available on npm:
Moreover, Unlayer is a pure javascript front end tool, and it is technology agnostic. It should work fine irrespective of any back-end technologies such as PHP, Ruby on Rails, Asp.net.
You can also find our installation steps outlined here.