✅ Link to the plugin page: https://zeroqode.com/plugin/dynamic-content-editor-plugin-for-bubble--1736157354507x364382470611480200

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-demo-35.bubbleapps.io/dynamic_editor

✅

Bubble Editor: https://bubble.io/page?id=zeroqode-demo-35&tab=Plugins&name=dynamic_editor&type=page&version=live

Introduction

A powerful and flexible editor for generating dynamic content tailored to your needs. With the Dynamic Content Editor, you can seamlessly create, manage, and customize designs, and variable-driven content within your application.

Generate dynamic content based on database fields and variable mapping.

Access saved designs and generated content effortlessly.

Prerequisites

You must have an Unlayer Account.

How to setup

Install the plugin

Create a Unlayer Account

Create a Unlayer Project

Set the plugin element “Dynamic Editor” on the page.

Initialize the editor element with action “Initialize Editor” (you can do that on the page load bubble event, to be visible on the page from the start)

From the Unalyer Account → Your project → Settings Tab - get the “Project ID” you will need it for further use of the plugin.

Plugin Element “Dynamic Editor”

💡

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.

💡

The Editor Element supports customizable borders and shadow styles.

Element Actions

Initialize Editor

Update Variables List

Reset Editor

Save Design

Load Design

Generate Content

Exposed states

Name	Description	Type
Generated Content	Contains the list of dynamically generated content based on the provided list of things and the corresponding merge tags. Each item in this list represents the content generated for an individual entry from the `List of Things`, with the merge tags replaced by their respective values.	Text List
Saved Design	Stores the exported design from the Unlayer editor in JSON format. This data represents the entire email template or design as structured information, making it accessible for later use, such as saving to a database or reloading the design into the Unlayer editor. You can get it from `“Save Design”` action.	Text

Workflow example

Initialize the element on the page on page load with “Initialize Editor” action.

Make some changes in the editor on the page.

Generate Content for every User from the Database with “Generate Content” action, where the first_name variable will be replaced by its real name from the database. Make sure the replacement key:value pairs are exact - the variable name from the “variables list” and the field name from the database.

The generated list of content stored in “Generated Content” state, you can send to every user email (as example).

Title	Description	Type
Content Type	Defines the type of content to export from Unlayer. Possible values are: HTML : Exports the design as HTML content. JSON: Exports the design as its raw JSON structure. Plain Text: This is the full plain text of the design.	Dropdown (HTML, JSON, Plain Text)
App Type	Specifies the type of list based on which the content will be generated - `“List of Things”`.	App Type
List of Things	Used to iterate over multiple items, generating individualized content for each one. The properties of each item in this list are replaced based on the merge tags defined in the `Replacement list`. Each item in the list may represent a user, product, or other entities, with properties like names, addresses, etc.	as App Type list
Replacement list	A comma-separated list of key-value pairs that map the merge tag/variable (key) to the field name (value) of the list item. This mapping determines how the content will be generated based on the list item’s fields. Please follow the example: • Example: `"first_name:firstName,last_name:lastName"` ”variable name: filed name of the item from the database” • Each pair represents a merge tag (e.g., `first_name`) and the corresponding field name of the list item from the DataBase (e.g., `firstName` from `List Of Things`). The value of the field (`firstName`) will replace the merge tag (`{{first_name}}`) in the generated content.	Text

Title	Description	Type
Project ID	A unique identifier for the project. This is used to specify the project context when initializing the Unlayer editor. You can find it in your Unlayer project settings.	Text
Template ID	(Optional) Property that refers to the identifier of a specific template within the project. If provided, the template will be preloaded in the Unlayer editor. If omitted, no template will be preloaded. You create templates in the Unlayer account, and the ids you can get with “Get Templates IDs” plugin action.	Number
Variables List	(Optional) List of variables(merge tags called in the element editor) are placeholders that are replaced by real data at the time of sending the email. For example, the variable {{first_name}} might be replaced with “John” when an email is sent to a recipient. Each variable requires a name (what the user sees), a value (the actual variable in the templating engine), and a sample value for preview purposes. Please follow the example when filling this field, not setting it right may cause errors on the page. Ex: `{ "first_name": { "name": "First Name", "value": "{{first_name}}", "sample": "John" }, "last_name": { "name": "Last Name", "value":"{{last_name}}", "sample": "Doe" } }`	Text

Title	Description	Type
Variables List	A JSON string representing an array of merge tag objects, where each object defines a variable for dynamic content in the Unlayer editor. Merge tags allow users to insert personalized or dynamic data into email templates. Each variable requires a name (what the user sees), a value (the actual variable in the templating engine), and a sample value for preview purposes. Please follow the example when filling this field, not setting it right may cause errors on the page. Ex: `{ "first_name": { "name": "First Name", "value": "{{first_name}}", "sample": "John" }, "last_name": { "name": "Last Name", "value":"{{last_name}}", "sample": "Doe" } }`	Text

Dynamic Content Editor