We’re going to explain how every single key in this template works.
For the initial configuration of the behavioural message, please refer to the dedicated article how to configure a behavioural message.

The Next Box Message template is used to insert an element on your page that can contain one or more of these elements:

• HTML text
• Side image to text
• form
• Product Recommendations

It will be possible to deactivate and activate the various features during customization.

We remind you that in order to show product or content recommendations within a behavioral message, it is necessary in step 1, during the creation phase, to select the item we are interested in: products, content, products and contents, forms and the type of algorithm to be used in case the recommendations are present

Attention: This message, not being an Overlay , must be inserted within the structure of the page before/after or in place of existing elements. At the beginning of the configuration of the behavioural message, you must define the XPATH in which it will be placed. You can find a detailed guide on how to do this at this link. Until XPATH is selected, you will not be able to preview it. If the defined XPATH is not present on the page, the message will not be displayed.

Layout

Layout -> Message Text

Uppercase Titles: Allows us to turn the title into all-caps text

Title Color | Title size (in px): We can set the color and size for the titles.

Link color : We can set a color for links within the text content.

Internal HTML content: HTML input box from which we can insert and format the text to be displayed in the message.

Side image we can insert a side image through the Blendee media gallery.

Side image on the left : if set to yes the image will be inserted on the left, otherwise it will go to the right.

Display side image we can decide whether to display the side image or not.

Maximum Side Image Width (in px): We can set the maximum width of the side image.

Side image target link we set where the link on the image is opened: whether in a new tab or in the current window.

Side image link: enter the URL to which the image should link.

Hide HTML content: toggles the display of the text of the message contained in the HTML box

Hide side image: show/hide the side image of the message

Layout -> Button

Uppercase button text: You can convert text to all-caps font

Button rollover background color: The background color of the button on hover.

Rounded corners, buttons (in px), rounding radius of button edges.

Text Color Buttons: Text Color Buttons.

Button Background: The background color of the buttons.

Button text size (in px)

Rollover Button Border Color sets the color of the borders on hover.

Button Border Size | Button border color: Button border color and thickness buttons.

Layout -> Location and Size

Box message top margin (in px): distance in pixels from the top element

Box message bottom margin (in px): distance in pixels from the bottom element

Padding box message (in px): Inner distance in pixels from the edge of the element

Box message outer border size (in px): thickness of the outer border of the box containing the message in pixels

Outer border color box message: color of the outer border of the box containing the message

Rounded corners box message (in px): rounding radius in pixels of the edge of the box

Box message background: The background color of the box containing the message

Internal text size (in px): The size of the font used for the text within the message

Inner Text Color: The color of the text within the message

Layout -> More

Additional CSS code: in this box it is possible to enter the valid CSS code that allows us to customize the style sheet of the message

Form

Form -> Position and Dimensions

Radio/Checkbox Color: Field Selection Mark Color

Form Label Color: The color of the form’s label

Label form size (in px): The size of the font used in the form’s labels

Form Input Border Color: The color of the border used to highlight the form’s input box

Form Input Background: The background color used for the form’s input fields

Rounded corners of the form (in px): The rounding radius of the edges of the form.

Padding form (in px _ if form background is enabled): Inner distance between the edge of the form and its internal elements

Enable form background: Activates/disables the presence of a form background color

Form Background Color: The color used for the background of the form if activated in the previous step

Hide Form: Show/Hide Form

Minimum form width (in px): The minimum size in pixels that the form must have

Recommendation (Keys present only in the “Next Box Message with Recommendations” template)

Layout -> Recommendation Content

REC Product Name Color: The color in which the item name will be displayed

REC Price Color: The color in which the item’s price will be displayed

REC Button Text: CTA on the button on each product sheet e.g.: “Buy now”

REC Title Text: Header of the box containing product recommendations e.g.: “You may be interested”

REC image height (in px): the size in pixels relative to the height that the product image should have

REC name size (in px): The font size used for the product name

REC price size (in px): Font size used for the product price

REC before HTML content: shows the recommendation before/after the text entered in the HTML box

Border color between REC and content: The color of the dividing line between HTML text and product recommendations

Border size between REC and content: Thickness of the dividing line between HTML text and product recommendations

Hide REC Title: Show/hide the title of the recommendations section

Hide REC Name: Show/hide the product name in the recommendation card

Hide img REC: Show/hide the product image in the recommendation card

Hide REC Pricing: Show/hide the product name in the recommendation card

Hide REC Button: Show/hide the button with the link to the product in the recommendation card

Hide REC: Show/hide the block containing product recommendations.