Personyze allows to easily create content actions to users without technical skills. Technical users that know HTML, CSS and Javascript can use advanced features that give them total control on how their actions look like, or if your company has programmers they can create full-featured content actions on Personyze.

When you create Banner/Popup action, or Product Recommendations widget, you can customize it from side menu. The last option in the menu is called "HTML Source (advanced)", and it allows you to create the widget from scratch, or based on existing widget.

The HTML Source on Personyze can be raw HTML/CSS/Javascript. There is also special syntax to express:

• Parts of HTML customizable from the side menu
• Embedded variables that will be substituted for each site visitor on server side
• Recommendation widgets can use variables to embed information about recommended products from products catalog

Customize HTML regions

Try to create a blank Banner/Popup action, and set the following HTML in it's HTML Source:

<div style="display:inline-block; padding:2em; background-color:#AAA">
    Hello world
</div>

It will be better if we'll allow to edit the "Hello world" text from the menu. To make the text customizable, we'll use a variable.

<div style="display:inline-block; padding:2em; background-color:#AAA">
    ${args->hello_text:default('Hello world')}
</div>

We can see our banner in customizer, and now the text can be selected, and edited.

We used syntax like ${args->var_name} to create our variable HTML area. The variable name is case-insensitive, so this is the same variable: ${args->VAR_Name}. If variable name includes characters other than letters and digits, apostrophs must be used, and then such name will be case-sensitive: ${args->'Var-Name'}.

There are some properties that can be added after the variable name. Each property is separated by a colon, like :default, and there can be parameters in parentheses, like :default('Hello world'). If there is only 1 parameter, and it doesn't contain parentheses and commas, it can be expressed without apostrophs: :default(Hello world).

Several properties can be used to place our editable HTML area to the side menu:

:arg_section(0, 0, 'Main settings', 'sliders')
:arg_name(Main text)

The arg_section has 4 parameters:

• Section number (can be any number, even negative or fractional - all the sections will be sorted in ascending order)
• Number of setting inside section (also any number)
• Section name
• Section icon name. Font Awesome 4 icon names can be used, like: sliders, bars, image, envelope, etc.

The arg_name has 1 parameter - the name of this setting inside the menu.

Example:

<div style="display:inline-block; padding:2em; background-color:#AAA">
    ${args->hello_text:default(Hello world):arg_section(0, 0, 'Main settings', 'sliders'):arg_name(Main text)}
</div>

Default HTML area editor is text input field with "Use HTML editor" button. We can specify different editor type with help of :input_type() property. There are several input types available. One of them is textarea:

<div style="display:inline-block; padding:2em; background-color:#AAA">
    ${args->hello_text:default(Hello world):arg_section(0, 0, 'Main settings', 'sliders'):arg_name(Main text):input_type(textarea)}
</div>

We can make CSS style editable too. We will use :input_type(css)

<div style="${args->style:html:default('display:inline-block; padding:2em; background-color:#AAA'):arg_section(0, 1, 'Main settings', 'sliders'):arg_name(Main style):input_type(css)}">
    ${args->hello_text:default(Hello world):arg_section(0, 0, 'Main settings', 'sliders'):arg_name(Main text):input_type(textarea)}
</div>

Here we have 2 settings inside 1 section. Actually don't need to specify the same section name ('Main settings') and section icon ('sliders') twice.

<div style="${args->style:html:default('display:inline-block; padding:2em; background-color:#AAA'):arg_section(0, 1, 'Main settings', 'sliders'):arg_name(Main style):input_type(css)}">
    ${args->hello_text:default(Hello world):arg_section(0, 0):arg_name(Main text):input_type(textarea)}
</div>

Notice that we also used :html property. It's needed to embed arbitrary text inside HTML markup. The :html works like htmlspecialchars() function in PHP - it escapes characters that can break HTML structure before embedding the text. So putting "><br> within <div style="${HERE}"> will not close the tag, but the result will be <div style="&quot;&gt;&lt;br&gt;">.