How does the HTML code editor work?

The HTML code editor is an advanced tool that lets you create custom marketing content without the limitations of the drag&drop editor. It’s perfect when you need complete control over the appearance and functionality of content in your campaigns.

With the code editor, you can:

• Embed advanced interactive elements such as product carousels or forms.
• Add your own CSS styles and JavaScript scripts for unique user experiences.
• Precisely format content to match your marketing concept and brand’s visual identity.

Editor interface

The code editor consists of three main areas that make creating and editing content convenient:

1. Workspace – where you enter your code. You can switch between three tabs:
   • HTML – for defining structure and content.
   • CSS – for styling appearance.
   • JavaScript – for adding interactivity.

2. Preview – dynamically displays the effect of your changes. Every modification in the code is immediately visible, making it easier to test and adjust your content.
3. Toolbar – contains additional functions to support your work with code:
4. HTML-CSS-JS switch – allows for quick transition between editing code in different languages.
5. Media library – provides access to previously uploaded images, icons, and other visual assets.
6. Dynamic content – allows you to customize designed content for recipients based on data such as system and custom attributes.
7. Code snippets (available only for forms) – contains ready-to-use code fragments, e.g., data input fields, consent additions, and buttons.
8. Recommendations (if included in your plan) – contains settings for displaying recommended products and additional filters.

This setup allows you to continuously check the appearance and functionality of emails, banners, pop–ups, or forms before implementing them.

Converting content from drag & drop editor to code editor#

If you want to use content created in the drag & drop editor, simply select this option when duplicating the content.

Here’s how this process works for email messages:

1. Go to Campaigns > Email.
2. Find the content you want to use in the HTML code editor in the table.
3. Click the Duplicate option.
4. Enter a new message name.
5. Check the Convert to code editor format option.
6. Click Duplicate and edit if you want to proceed to edit the message. If you don’t want to edit the message at this moment, click Only duplicate.

Using dynamic content in the HTML editor#

Dynamic content with simplified syntax will make it easier to personalize content created in the HTML code editor. With its help, you can conveniently display content based on system attributes, customer attributes, or recommended products.

Available types of dynamic content

In the code editor, you can use the following categories of dynamic content:

1. System attributes – basic customer data, such as:
   • first and last name
   • email address
   • phone number
   • date of last activity

2. Custom customer attributes – unique attributes that you define yourself in Settings > Customers > Customer attributes.
3. Contact – customer contact information, e.g., email address or phone number.
4. Content – allows you to display:
   • content from outside ECDP
   • content from other places in the system based on ID (e.g., a specific banner)

Code snippets for forms

Creating forms in HTML code can be challenging, which is why we’ve prepared ready–to–use code snippets that significantly simplify this process. These are ready-to-use templates that will help you build a form tailored to your needs.

Code snippets are available on the toolbar under the </> button (Code snippets) when editing a form.

In the library, you’ll find the following elements:

1. System attributes – ready-made fields for collecting basic customer data:
   • first and last name
   • date of birth
   • email address
   • phone number
   • gender
2. Customer attributes – fields for collecting data relevant to your business.
   • To use them, first add attributes in Settings > Customers > Customer attributes.
   • Examples: clothing size, preferred product type, hobbies.
3. Consents – checkboxes for marketing consents:
   • Add them earlier in Settings > Consents > Consents.
4. Buttons – ready-made button code for submitting the form:
   • You can easily customize its appearance and content.
   • Contains necessary attributes to ensure proper functionality.

Essential form elements

For a form to work correctly, it must contain:

1. At least one contact field – email address or phone number:
   • This field must be marked as required.
   • The system will use this data to identify the customer.
2. Submit button – a button that:
   • Collects data from the form.
   • Sends it to the system.