{"id":13089,"date":"2024-03-20T14:54:03","date_gmt":"2024-03-20T13:54:03","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/templates-next-box-message-and-next-box-message-with-recommendations\/"},"modified":"2024-03-20T14:54:05","modified_gmt":"2024-03-20T13:54:05","slug":"templates-next-box-message-and-next-box-message-with-recommendations","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/templates-next-box-message-and-next-box-message-with-recommendations\/","title":{"rendered":"Templates &#8220;NEXT BOX MESSAGE&#8221; and &#8220;NEXT BOX MESSAGE WITH RECOMMENDATIONS&#8221;"},"content":{"rendered":"\n<p>We&#8217;re going to explain how every single key in this template works.<br\/>For the initial configuration of the behavioural message, please refer to the dedicated article<a href=\"https:\/\/helpcenter.blendee.com\/article\/come-configurare-un-behavioural-message\/\"> how to configure a behavioural message<\/a>.<\/p>\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-14.30.38.png\" data-lbwps-width=\"2218\" data-lbwps-height=\"1116\" data-lbwps-srcsmall=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-14.30.38.png\"><img data-original=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-14.30.38-1024x515.png\" alt=\"\" class=\"wp-image-10852\"\/><\/a><figcaption class=\"wp-element-caption\"><strong>Next Box Message base<\/strong><\/figcaption><\/figure>\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-14.42.46.png\" data-lbwps-width=\"2346\" data-lbwps-height=\"1520\" data-lbwps-srcsmall=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-14.42.46.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"663\" src=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-14.42.46-1024x663.png\" alt=\"\" class=\"wp-image-10850\" style=\"width:840px;height:auto\" srcset=\"https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-14.42.46-1024x663.png 1024w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-14.42.46-300x194.png 300w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-14.42.46-768x498.png 768w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-14.42.46-1536x995.png 1536w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-14.42.46-2048x1327.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Next Box Message with Active Form<\/strong><\/figcaption><\/figure>\n\n<p>The Next Box Message template is used to insert an element on your page that can contain one or more of these elements:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>HTML text<\/li>\n\n\n\n<li>Side image to text<\/li>\n\n\n\n<li>form<\/li>\n\n\n\n<li>Product Recommendations<\/li>\n<\/ul>\n\n<p>It will be possible to deactivate and activate the various features during customization.  <\/p>\n\n<p>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<\/p>\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-16.04.09.png\" data-lbwps-width=\"3320\" data-lbwps-height=\"1620\" data-lbwps-srcsmall=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-16.04.09.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-16.04.09-1024x500.png\" alt=\"\" class=\"wp-image-10865\" srcset=\"https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-16.04.09-1024x500.png 1024w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-16.04.09-300x146.png 300w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-16.04.09-768x375.png 768w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-16.04.09-1536x749.png 1536w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-16.04.09-2048x999.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n<p><\/p>\n\n<p><strong>Attention<\/strong>: This message, not being an <em>Overlay<\/em> , 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<a href=\"https:\/\/helpcenter.blendee.com\/article\/come-selezionare-l-xpath\/\" data-type=\"article\" data-id=\"3323\"> at this link<\/a>. 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.<\/p>\n\n<h1 class=\"wp-block-heading\">Layout<\/h1>\n\n<h3 class=\"wp-block-heading\">Layout -&gt; Message Text<\/h3>\n\n<p><strong>Uppercase Titles:<\/strong> Allows us to turn the title into all-caps text<\/p>\n\n<p><strong>Title Color<\/strong> | <strong>Title size (in px)<\/strong>: We can set the color and size for the titles.<\/p>\n\n<p><strong>Link color<\/strong> : We can set a color for links within the text content.<\/p>\n\n<p><strong>Internal HTML content:<\/strong> HTML input box from which we can insert and format the text to be displayed in the message.<\/p>\n\n<p><strong>Side image<\/strong> we can insert a side image through the Blendee media gallery.<\/p>\n\n<p><strong>Side image on the left<\/strong> : if set to yes the image will be inserted on the left, otherwise it will go to the right.<\/p>\n\n<p><strong>Display side image<\/strong> we can decide whether to display the side image or not.<\/p>\n\n<p><strong>Maximum Side Image Width (in px):<\/strong> We can set the maximum width of the side image.<\/p>\n\n<p><strong>Side image target link<\/strong> we set where the link on the image is opened: whether in a new tab or in the current window.<\/p>\n\n<p><strong>Side image link:<\/strong> enter the URL to which the image should link.<\/p>\n\n<p><strong>Hide HTML content: <\/strong>toggles the display of the text of the message contained in the HTML box<\/p>\n\n<p><strong>Hide side image:<\/strong> show\/hide the side image of the message<\/p>\n\n<h3 class=\"wp-block-heading\">Layout -&gt; Button<\/h3>\n\n<p><strong>Uppercase button text: <\/strong>You can convert text to all-caps font<\/p>\n\n<p><strong>Button rollover background color<\/strong><strong>: The background color of the button on hover.<\/strong><\/p>\n\n<p><strong>Rounded corners, buttons (in px),<\/strong> rounding radius of button edges.<\/p>\n\n<p><strong>Text Color Buttons: Text Color<\/strong> Buttons.<\/p>\n\n<p><strong>Button Background: The<\/strong> background color of the buttons.<\/p>\n\n<p><strong>Button text size (in px)<\/strong><\/p>\n\n<p><strong>Rollover Button Border Color<\/strong> sets the color of the borders on hover.<\/p>\n\n<p><strong>Button Border Size<\/strong> | <strong>Button border color: Button border color<\/strong> and thickness buttons.<\/p>\n\n<h3 class=\"wp-block-heading\">Layout -&gt; Location and Size<\/h3>\n\n<p><strong>Box message top margin (in px)<\/strong>: distance in pixels from the top element<\/p>\n\n<p><strong>Box message bottom margin (in px)<\/strong>: distance in pixels from the bottom element<\/p>\n\n<p><strong>Padding box message (in px)<\/strong>: Inner distance in pixels from the edge of the element<\/p>\n\n<p><strong>Box message outer border size (in px)<\/strong>: thickness of the outer border of the box containing the message in pixels<\/p>\n\n<p><strong>Outer border color box message<\/strong>: color of the outer border of the box containing the message<\/p>\n\n<p><strong>Rounded corners box message (in px)<\/strong>: rounding radius in pixels of the edge of the box<\/p>\n\n<p><strong>Box message background<\/strong>: The background color of the box containing the message<\/p>\n\n<p><strong>Internal text size (in px): The<\/strong> size of the font used for the text within the message<\/p>\n\n<p><strong>Inner Text Color: The<\/strong> color of the text within the message<\/p>\n\n<h3 class=\"wp-block-heading\">Layout -&gt; More<\/h3>\n\n<p><strong>Additional CSS code:<\/strong> in this box it is possible to enter the valid CSS code that allows us to customize the style sheet of the message<\/p>\n\n<h1 class=\"wp-block-heading\">Form<\/h1>\n\n<h3 class=\"wp-block-heading\">Form -&gt; Position and Dimensions<\/h3>\n\n<p><strong>Radio\/Checkbox Color: Field Selection Mark<\/strong> Color<\/p>\n\n<p><strong>Form Label Color: The<\/strong> color of the form&#8217;s label<\/p>\n\n<p><strong>Label form size (in px): The<\/strong> size of the font used in the form&#8217;s labels<\/p>\n\n<p><strong>Form Input Border Color: The<\/strong> color of the border used to highlight the form&#8217;s input box<\/p>\n\n<p><strong>Form Input Background: The<\/strong> background color used for the form&#8217;s input fields<\/p>\n\n<p><strong>Rounded corners of the form (in px): The<\/strong> rounding radius of the edges of the form.<\/p>\n\n<p><strong>Padding form (in px _ if form background is enabled):<\/strong> Inner distance between the edge of the form and its internal elements<\/p>\n\n<p><strong>Enable form background:<\/strong> Activates\/disables the presence of a form background color<\/p>\n\n<p><strong>Form Background Color: The <\/strong>color used for the background of the form if activated in the previous step<\/p>\n\n<p><strong>Hide Form:<\/strong> Show\/Hide Form<\/p>\n\n<p><strong>Minimum form width (in px): The<\/strong> minimum size in pixels that the form must have<\/p>\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.42.41.png\" data-lbwps-width=\"2058\" data-lbwps-height=\"1296\" data-lbwps-srcsmall=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.42.41.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"645\" src=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.42.41-1024x645.png\" alt=\"\" class=\"wp-image-10855\" srcset=\"https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.42.41-1024x645.png 1024w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.42.41-300x189.png 300w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.42.41-768x484.png 768w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.42.41-1536x967.png 1536w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.42.41-2048x1290.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Next Box Message with Recommendation with HTML text and side image displayed<\/figcaption><\/figure>\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.50.49.png\" data-lbwps-width=\"2058\" data-lbwps-height=\"1216\" data-lbwps-srcsmall=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.50.49.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"605\" src=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.50.49-1024x605.png\" alt=\"\" class=\"wp-image-10859\" srcset=\"https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.50.49-1024x605.png 1024w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.50.49-300x177.png 300w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.50.49-768x454.png 768w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.50.49-1536x908.png 1536w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-05-alle-15.50.49-2048x1210.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Next Box Message with Recommendation with HTML text and active forms<\/figcaption><\/figure>\n\n<h1 class=\"wp-block-heading\">Recommendation (Keys present only in the &#8220;Next Box Message with Recommendations&#8221; template)<\/h1>\n\n<h3 class=\"wp-block-heading\">Layout -&gt; Recommendation Content<\/h3>\n\n<p><strong>REC Product Name Color: The<\/strong> color in which the item name will be displayed<\/p>\n\n<p><strong>REC Price Color: The<\/strong> color in which the item&#8217;s price will be displayed<\/p>\n\n<p><strong>REC Button Text:<\/strong> CTA on the button on each product sheet e.g.: &#8220;Buy now&#8221;<\/p>\n\n<p><strong>REC Title Text:<\/strong> Header of the box containing product recommendations e.g.: &#8220;You may be interested&#8221;<\/p>\n\n<p><strong>REC image height (in px):<\/strong> the size in pixels relative to the height that the product image should have<\/p>\n\n<p><strong>REC name size (in px): The <\/strong>font size used for the product name<\/p>\n\n<p><strong>REC price size (in px): Font <\/strong>size used for the product price<\/p>\n\n<p><strong>REC before HTML content:<\/strong> shows the recommendation before\/after the text entered in the HTML box<\/p>\n\n<p><strong>Border color between REC and content:<\/strong> The color of the dividing line between HTML text and product recommendations<\/p>\n\n<p><strong>Border size between REC and content:<\/strong> Thickness of the dividing line between HTML text and product recommendations<\/p>\n\n<p><strong>Hide REC Title:<\/strong> Show\/hide the title of the recommendations section<\/p>\n\n<p><strong>Hide REC Name:<\/strong> Show\/hide the product name in the recommendation card<\/p>\n\n<p><strong>Hide img REC:<\/strong> Show\/hide the product image in the recommendation card<\/p>\n\n<p><strong>Hide REC Pricing:<\/strong> Show\/hide the product name in the recommendation card<\/p>\n\n<p><strong>Hide REC Button:<\/strong> Show\/hide the button with the link to the product in the recommendation card<\/p>\n\n<p><strong>Hide REC:<\/strong> Show\/hide the block containing product recommendations.<\/p>\n<div class=\"wrap-post-useful post_useful_13089\">\n<p><div style=\"color: black; margin-bottom: 15px;\"><strong>Was this content useful?<\/strong><\/div><\/p>\n<p class=\"post_useful_success post_useful_success_13089\">Thanks for contributing!<\/p>\n<div class=\"post-useful-buttons post_useful_buttons_13089\">\n<a href=\"javascript:;\" style=\"border:0px;\" title=\"Yes\" class=\"post-useful-vote post-useful-vote-yes\" data-id=\"13089\" data-rate=\"1\">Yes<\/a>\n<a href=\"javascript:;\" style=\"border:0px;\" title=\"No\" class=\"post-useful-vote post-useful-vote-no\" data-id=\"13089\" data-rate=\"0\">No<\/a>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;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: It [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[563],"article-tag":[177,190],"class_list":["post-13089","article","type-article","status-publish","format-standard","hentry","article-category-template-en","article-tag-recommendations-en","article-tag-template-en"],"_links":{"self":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13089"}],"collection":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/users\/24"}],"version-history":[{"count":3,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13089\/revisions"}],"predecessor-version":[{"id":13092,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13089\/revisions\/13092"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=13089"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=13089"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=13089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}