Creatio base
This documentation is valid for Creatio version 7.16.0. We recommend using the newest version of Creatio documentation.

HTML (Smartblock)

The [HTML], aka “Smart block”, element (Fig. 1) enables implementing custom HTML code into your template and enriching it with reusable user-defined macros.

Fig. 1 Adding an [HTML] element to a template

adding_smartblock_from_toolbar.gif 

Use the [HTML] element to configure custom styles, such as elliptical corners, non-uniform borders, multi-image backgrounds and more. You can also use the [HTML] element to import your custom templates designed outside Creatio, by adding their entire HTML code to an [HTML] element.

Note

The [HTML] element is intended for use by HTML-savvy users who are familiar with web design and can code their custom designs in HTML.
Your custom code will be directly added to the template (without any filtering, debugging, validation, etc.) When using the [HTML] element block, please make sure that you test results outside the content designer preview, for example, by sending a test email.

HTML macros

You can add custom macros to the HTML code of the [HTML] element. When sending an email, Creatio replaces the user-defined macros with the corresponding values specified in the [HTML] setup area.

When the user creates a macro, the Content Designer generates a corresponding field and maps the value of the field to the macro. If the macro is reused in the same [HTML] element, the value of the field will be mapped to every instance of the macro.

The following types of macros are available:

Adding a macro

1.Select an [HTML] element on the template and click [Edit HTML].

2.Select the part of the code that you want to replace with a macro.

3.Right-click the selected code. A macro context menu will appear.

Note

Right-clicking when nothing is selected in the editor does not produce a macro context menu.

4.Select the type of macro in the menu (Fig. 2). You can create a new macro or add a new instance of an earlier created macro.

Fig. 2 Selecting the type of macro

macro_context_menu_create_new_string_macro.png 

a.Select [New string], [New text], [New picture], or [New color] to create a corresponding new macro.

b.If the opened HTML element already has macros, they will be available in the menu as well.

5.Specify the title of the currently selected macro in the [Macro constructor] area on the right (Fig. 3), so that you can identify this macro later.

Fig. 3 Editing the title of a macro

scr_html_element_configuration_macro_constructor_area_changing_values.png 

6.Click [Save] to apply changes.

As a result, a new field will be available in the [HTML] setup area on the right (Fig. 4). Changing the value of the field will immediately update all macro instances throughout your [HTML] element.

Fig. 4 New macro field

scr_html_element_new_macro_field.png 

Deleting a macro

1.Select an [HTML] element where you need to delete a macro and click [Edit HTML].

2.In the [Macro constructor] area on the right, click content_section_item_view_model_remove_icon00059.png next to the macro that you want to delete (Fig. 5).

Fig. 5 Deleting a macro field

scr_html_element_deleting_a_macro_field.png 

3.Click [Save] to apply changes.

As a result, all instances of the macro will be replaced with the current value of the macro. The macro will be no longer available in the setup area of the [HTML] element.

String macros

Use this macro type to insert a short single-line text that is not white space pre-formatted (Fig. 6).

Fig. 6 Configuring “New String” macros

adding_string_macros.gif 

Any white space characters in the macro value will be inserted as-is. This means that some breakable white space characters (particularly, character tabulations and new lines) or a sequence of such characters will display as a single space character. Additionally, pressing the Enter key when editing the field does not produce a new character.

As a result, the text will display as a single line unless user-defined CSS rules forbid such behavior.

Text macros

Use this macro type to insert long multiline white space pre-formatted texts (Fig. 7).

Fig. 7 Configuring “New Text” macros

adding_text_macros.gif 

When the user populates a “New Text” macro field with a string, new lines will be converted to line breaks, multiple space characters will be replaced with unbreakable space characters, and character tabulations will be replaced with a sequence of four unbreakable space characters. Additionally, pressing the Enter key when editing the field will produce a new line character.

As a result, the displayed text preserves white space pre-formatting of the source text in the source macro field.

Picture macros

Use this macro type to replace or provide the value of the “src” attribute of an <img> container or the value of a “url” CSS property.

When the macro is created, the Content Designer generates an image source field (scr_field_image_proper00060.png) mapped to the macro. Using the field, the user can upload an image from the computer or insert the URI of an image (Fig. 8).

Fig. 8 Adding “New Picture” macros

adding_pic_macros.gif 

Note

The scr_field_image_proper00061.png field supports Data URIs. You can insert a base64-encoded image instead of a URL.
Base64-encoded images are part of the HTML code of the message and are not normally filtered by email clients that prevent external images from loading by default.

Color macros

Use this macro type to replace or provide color definitions for embedded style sheets and in-line element styles (Fig. 9).

Fig. 9 Configuring “New Color” macro

adding_color_macros.gif 

When a new “Color” macro is created, the Content Designer generates a color picker field mapped to the macro. Use the field to pick a color for your macro. The macro will generate a hexadecimal RGB color code, preceded with the “#” sign, e.g. “#0d2e4e”.

Next

Content Designer element reference

Create a simple template

Configuring an email template

Did you find this information useful?

How can we improve it?