What is dynamic content?

Dynamic content refers to content that adapts based on user data, preferences, or behaviors. Unlike static content, dynamic content is flexible and responsive, allowing users to display personalized information for different audiences. It can be formatted in various ways (HTML, JSON, Plain Text, XML, and Product Box) and is especially useful for applications, websites, and campaigns that require tailored communication or content delivery.

When to Use Dynamic Content?

Dynamic content is perfect for situations where you want to display personalized information to your users or adapt the content according to real-time data. It's used in scenarios like:

E-commerce (personalized product recommendations),
Marketing campaigns (dynamic emails with tailored offers),
Web apps (content adjusting to user activity), and
Internal systems (configurations or custom data exchanges).

How to Use Dynamic Content?

Dynamic Content Listing

Navigate to Dynamic Content under the Content section. A list of existing dynamic content and an option to create new content will be displayed.

Search: This option allows you to search the dynamic content quickly.
Sort Column: Column-wise sorting is available to sort the columns.
Filter Content: You can apply the filter on the dynamic content listing.

Manage Folders: Create, Rename, Copy, Move, & Delete

There are two types of folders: All and Created by Me. This section allows you to manage folders within the Dynamic Content area. Users can create new folders, rename them, copy the public ID, move items between folders, and delete folders.

New Folder: Click on the “New Folder” option at the bottom of the folders section.
Rename: You can rename the document by clicking on the three dots.
Copy Public ID: You can copy the public ID of the particular folder.
Move Item: You can move folder items from one folder to another folder. You can also create a new folder by clicking the create folder icon.

Create New Dynamic Content

The following are the steps to create a new dynamic content:

Click the “New” button in the Dynamic Content listing.
Enter a name for the content, select the folder where it will be saved, and click “Next.”
The content details will then appear below.

Content-Type: Choose the content type from the available options. The interface remains consistent across formats like HTML, JSON, Plain Text XML, and Product Box.

You can publish the content or save it as a draft. All changes will be discarded if you click the "Cancel" button. Upon clicking "Cancel," the system will display a confirmation message: “Any unsaved changes will be lost. Are you sure you want to leave the page?” with options to select "Cancel" or "OK."

Content Types: HTML, JSON, Plain Text, HTML, & Product Box

1. HTML (Hypertext Markup Language)

HTML is the standard language for creating web pages and web applications. It structures and displays text, images, links, videos, and forms.

Key Characteristics:
Supports multimedia and interactive content.
Enables complex layouts using elements like tables, divs, and spans.
Allows for styling with CSS and behavior with JavaScript.
When to Use:
Choose HTML when you need to present rich, interactive, and styled content. It’s suitable for cases where visual formatting, embedding media, or creating dynamic web pages is essential. This could be for in-app content that requires a polished look with images, buttons, and interactive forms.
Example:

Product Name

Price: $49.99

Buy Now

2. JSON (Java Script Notation)

JSON is a lightweight, easy-to-read format used for exchanging data between a server and a web application or between different systems. It’s structured with key-value pairs.

Key Characteristics:
Lightweight and easy to parse.
Language-independent, often used in APIs.
Ideal for data exchange and storage but not meant for formatting or styling.
When to Use:
Choose JSON when you need to transmit structured data in a lightweight manner. It’s perfect for configurations, exchanging product data between systems, or feeding content into an interface. Use JSON if your content needs to be consumed programmatically by another system or application.
Example:

{

"productName": "Wireless Headphones",

"price": 49.99,

"currency": "USD",

"availability": true

}

3. Plain Text

Plain Text refers to raw, unformatted text. It contains no formatting, styling, or multimedia and is composed of basic characters.

Key Characteristics:
No formatting, just simple text.
Lightweight and universally readable.
No support for images, styles, or interactivity.
When to Use:
Choose Plain Text when you need to deliver simple, straightforward information without any multimedia or formatting. It's ideal for basic messages, alerts, or notifications where no styling or interaction is required.
Example:

Product: Wireless Headphones

Price: $49.99

Buy at: <www.example.com>

4. XML (Extensible Markup Language)

XML is a markup language designed to store and transport data. It uses a customizable tag structure similar to HTML, but its primary purpose is data rather than content display.

Key Characteristics
Highly structured, with custom tags.
Used to represent hierarchical data.
Ideal for data sharing between systems.
When to Use:
Choose XML when you need to store or exchange structured data in a format that is both human-readable and machine-readable. It’s typically used in data integration scenarios, configuration files, and when systems need to consume or output structured data.
Example:

Wireless Headphones

49.99

true

5. Product Box

A Product Box layout is a design format used to present essential product information in a visually organized and engaging way. It is commonly used in e-commerce, digital marketing, and application interfaces where products or services must be showcased. It simplifies the customer’s interaction with product content, making it easy for them to access information and take action (e.g., purchasing or viewing details).

Key Characteristics:

Product Image: A prominent, high-quality image to showcase the product.

Product Name: Bold and clear to make the product easily identifiable.

Price Display: Emphasized with formatting, often highlighting discounts or special offers.

Layout Customization: Users can select layouts with one, two, three, or four boxes and adjust various features like product source, button styles, price formatting, text alignment, and colors.

Repetition Count: The layout can be repeated multiple times depending on the content and design requirements.

Color and Style Options: A color picker and other customization tools allow changes to title colors, text formatting, and other visual aspects to match branding or design preferences.

When to Use:

E-commerce Platforms: Ideal for presenting product catalogs, sales promotions, or individual product pages.

Marketing Campaigns: Useful in promotional emails, landing pages, and advertisements where specific products or services need to be highlighted.

Mobile and Web Applications: Great for showcasing dynamic product content, like featured items or recommendations.

Product Comparisons: When comparing multiple products side by side, Product Boxes provide a clean, consistent format for users to evaluate features and prices easily.

Interactive Product Displays: When users need to interact with products, such as adding items to a shopping cart or viewing more details, the Product Box format ensures an intuitive experience.

Content Editor

The editor allows you to write code in the code editor and preview the plain text. By default, the code editor will appear within the content section.

Insert: Clicking "Insert" provides the following actions:
Customization Tags
Image URL
Dynamic Image
Dynamic Content

1. Customization Tags

The Customization Tags feature allows users to insert dynamic placeholders into their content, enabling personalized and context-aware communication. These tags act as variables that automatically pull data from the system during content delivery, ensuring each recipient receives content tailored to their profile or behavior.

How to Use Customization Tags:

Access Customization Tags:
- In the content editor, click on the Insert Tags button.
- A pop-up will appear, displaying various tag categories.
Categories of Customization Tags: The following categories of customization tags are available:
- Contact Columns: Tags related to individual user information (e.g., contact_key, contact_status, etc.).
- Device Columns: Tags that capture device-specific data (e.g., device_id, device_brand).
- Dynamic Content (Plain Text): Used to insert personalized messages based on dynamic values (e.g., First Letter Customizer, Sample Text Snippet, etc.).
- Columns From Segment: Tags derived from segmentation rules applied to the audience. If there is no value under this section, you can select the segment from the available segments by clicking on the Select button.
- Columns From Table: Data from custom or predefined tables linked to the content. If there is no value under this section, you can select the table from the available tables by clicking on the Select button.
- Unsubscribe: Tags that generate a personalized unsubscribe link.
Selecting Tags:
- To insert a tag, simply select a category and choose the relevant tag.
- The selected tag will be inserted into the editor at the current cursor position.
- Users can select and insert multiple tags in one go, allowing for greater customization.
Supported Content Types: Customization tags can be inserted into the following content types:
- HTML: Tags will be processed within the HTML structure, allowing for fully formatted, personalized emails or web content.
- JSON: Tags can be embedded within JSON objects for dynamic API responses.
- Plain Text: Use in simple text-based content, where raw tag data will be replaced by the relevant values.
- XML: Insert tags within XML documents to generate structured, dynamic data output.

Examples:

I will meet you on your birthday {{contact.birth_date}}

Just wait for the next one!

2. Image URL

The Image URL feature in the text editor simplifies the process of embedding images into content. Users can easily browse folders and sub-folders to find and select images or upload new ones directly from within the editor. This streamlined image management enhances workflow efficiency and supports the creation of visually engaging, dynamic content.

When the Image URL option is clicked, the system displays available folders for image selection. By selecting a specific folder, the system will expand to reveal any sub-folders for further image selection. Additionally, users have the option to upload a new image directly into the chosen folder.

3. Dynamic Image

The Dynamic Image option enables users to select from pre-configured dynamic images within the system for use in the text editor. Unlike static images, this option restricts users to choosing only available dynamic images, which are typically tailored for personalized or automated content. Dynamic images allow for content that adapts to specific user data or context, enhancing personalization within the editor.

4. Dynamic Content

The Dynamic Content option enables users to create dynamic content tags within the editor. Upon selecting this option, a pop-up will appear, offering the following categories: Product Box, HTML, and Plain Text. These categories allow users to insert content that adapts to specific data or context, making the content highly personalized and responsive to user inputs or behaviours.

Switch Editor

You can switch between the rich text and code editor.

Rich Text Editor: A Rich Text Editor is a user-friendly tool designed for non-technical users to visually create and format content without dealing with underlying code, offering a WYSIWYG (What You See Is What You Get) interface with options like bold, italic, and image insertion. This makes it ideal for tasks like creating documents, blogs, or emails.
Code Editor: A Code Editor is tailored for developers to write and manage code directly, with features like syntax highlighting and debugging tools. It provides complete control over the content's structure and behavior, making it essential for custom development and web programming tasks. Users can switch to a horizontal view or full-screen mode within the code editor. The code editor is set as default, but the rich text editor can be accessed through the switch editor dropdown.

Edit - Dynamic Content

You can edit the content details by selecting the "Edit" option found under the three-dot menu of each dynamic content item. When you click "Edit Content," you can choose from the following options:

Copy from Content
This feature enables users to duplicate content during the editing process, transforming the entire content section into an editable form. When the Copy from Content option is selected, the system replaces the Edit Content button with a Draft Content button. In copy mode, users are also presented with the option to delete the draft and return to the normal state. This functionality is consistent across all content types, including HTML, JSON, Plain Text, XML, and Product Box layouts.
Create Blank Content
When users select the Create Blank Content option, a new editor will open with no pre-existing data. If they choose the Copy from Content option, the system will replace the Edit Content button with a Draft Content button. In copy mode, users will also have the option to delete the draft and return the editor to its normal state. This functionality applies consistently across all content types, including HTML, JSON, Plain Text, XML, and Product Box layouts.

Duplicate - Dynamic Content

You can use this option to duplicate existing content.

Move - Dynamic Content

You can select a folder and move content into it.

Copy Public ID - Dynamic Content

This option enables you to copy the public ID.

Delete - Dynamic Content

You can delete content using this option. The system will prompt a confirmation message before permanently deleting the content.

Customization Tags

Customization Tags allow you to personalize content by inserting dynamic placeholders into a text editor. When selecting "Customization Tags," a pop-up displays categories such as Contact Columns, Device Columns, and Dynamic Contents (Plain Text). These tags dynamically pull data related to users, devices, or segments, enabling personalized messaging. You can easily insert multiple tags into the editor to create tailored content for different audiences.

Accessing the Insert Options: Open any text editor and click the "Insert" button. A tooltip will appear with the following options:

Customization Tags
Image URL
Dynamic Image
Dynamic Content

2.Using Customization Tags: When you select the "Customization Tags" option, a pop-up will appear showing all available tags. The tags are grouped into the following categories:

Contact Columns
Device Columns
Dynamic Contents (Plain Text)
Columns from Segment
Columns From Table
Unsubscribe

3.Adding Tags: After selecting a tag from any category, the system will automatically insert it into the editor. You can continue adding multiple tags as needed.

How to Use Customization Tags:

Access Customization Tags:
- In the content editor, click on the Insert Tags button.
- A pop-up will appear, displaying various tag categories.
Categories of Customization Tags: The following categories of customization tags are available:
- Contact Columns: Tags related to individual user information (e.g., contact_key, contact_status, etc.).
- Device Columns: Tags that capture device-specific data (e.g., device_id, device_brand).
- Dynamic Content (Plain Text): Used to insert personalized messages based on dynamic values (e.g., First Letter Customizer, Sample Text Snippet, etc.).
- Columns From Segment: Tags derived from segmentation rules applied to the audience. If there is no value under this section, you can select the segment from the available segments by clicking on the Select button.
- Columns From Table: Data from custom or predefined tables linked to the content. If there is no value under this section, you can select the table from the available tables by clicking on the Select button.
- Unsubscribe: Tags that generate a personalized unsubscribe link.
Selecting Tags:
- To insert a tag, simply select a category and choose the relevant tag.
- The selected tag will be inserted into the editor at the current cursor position.
- Users can select and insert multiple tags in one go, allowing for greater customization.
Supported Content Types: Customization tags can be inserted into the following content types:
- HTML: Tags will be processed within the HTML structure, allowing for fully formatted, personalized emails or web content.
- JSON: Tags can be embedded within JSON objects for dynamic API responses.
- Plain Text: Use in simple text-based content, where raw tag data will be replaced by the relevant values.
- XML: Insert tags within XML documents to generate structured, dynamic data output.

Examples:

I will meet you on your birthday {{contact.birth_date}}

Just wait for the next one!

Dynamic Content

The Dynamic Content feature allows users to insert personalized content into a text editor using predefined tags. By clicking the "Insert" button, users can access a variety of options, including "Dynamic Content," which provides categories such as Product Box, HTML, and Plain Text. Once a tag is selected, it is automatically inserted into the editor, enabling the creation of tailored content for different audiences. Multiple tags can be added to enhance customization and engagement.

Accessing the Insert Options: In any text editor, click on the "Insert" button. A tooltip will then display the following options:

Customization Tags
Image URL
Dynamic Image
Dynamic Content

2.Using Dynamic Content: Selecting the "Dynamic Content" option will open a pop-up displaying all available tags, organized into the following categories:

Product Box
HTML
Plain Text

3.Adding Tags: Once a tag is selected from any category, it will be automatically inserted into the editor. You can keep adding multiple tags as required.