{"id":13147,"date":"2024-03-20T15:06:10","date_gmt":"2024-03-20T14:06:10","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/next-drop-down-message-recommendations-and-next-drop-down-message-templates\/"},"modified":"2024-03-20T15:06:13","modified_gmt":"2024-03-20T14:06:13","slug":"next-drop-down-message-recommendations-and-next-drop-down-message-templates","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/next-drop-down-message-recommendations-and-next-drop-down-message-templates\/","title":{"rendered":"“NEXT DROP DOWN MESSAGE RECOMMENDATIONS” and “NEXT DROP DOWN MESSAGE” templates"},"content":{"rendered":"\n

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<\/a>.<\/p>\n\n

\"\"<\/a><\/figure>\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

LAYOUT > More<\/h3>\n\n\n\n

Zindex box<\/strong> : We set up a z-index to place the message above our website.<\/p>\n\n\n\n

Box position<\/strong> : we can set a starting position for the box message.<\/p>\n\n\n\n

Hide icon on title box<\/strong> : we can hide the icon within the text on the open button.<\/p>\n\n\n\n

Text animation on the title box<\/strong> : we can activate or deactivate the animation on the initial text (effect on the text when the button is displayed).<\/p>\n\n\n\n

Movable box<\/strong> : if set to “yes” the box will be draggable, if set to no, the box will be fixed in its opening position.<\/p>\n\n\n\n

Animation speed (in milliseconds)<\/strong> is the speed at which it animates the text when the box is displayed, the higher the value, the slower the animation will run.<\/p>\n\n\n\n

Additional CSS code<\/strong> : we can insert custom <\/i> CSS code WARNING: insert valid CSS code.<\/strong><\/p>\n\n\n\n

LAYOUT > Location & Size<\/h3>\n\n\n\n

Drop Shadow Color<\/strong> : Set the color of the drop shadow.<\/p>\n\n\n\n

Side Image Width (in px) | Minimum side image height (in px):<\/strong> we set the size of the side image.<\/p>\n\n\n\n

Distance from the sides (in px):<\/strong> The starting distance of the left or right box (depending on the position) from the boundaries of the viewport.<\/p>\n\n\n\n

Inner padding (in px)<\/strong> is the margin between the edge of the box and the contents.<\/p>\n\n\n\n

Title Box Background Color | Rollover Title Icon Color | Rollover Title Box Background Color | Close Icon Color<\/strong> : We set the colors of the open button (the colors and text size will be configured in the next group of options).<\/p>\n\n\n\n

Background Color | Outer Edge Color | Rounded corners (in px) | Border size (in px)<\/strong> we set the border colors of the content box.Side image link destination<\/strong> : we can set the destination for the side image link.<\/p>\n\n\n\n

Distance above\/below<\/strong> : The starting distance of the box above or below (depending on location) relative to the boundaries of the viewport.<\/p>\n\n\n\n

Minimum width of the content (in px)<\/strong> we can set a minimum width of the content box, but this will never exceed the width of the viewport.<\/p>\n\n\n\n

Close icon<\/strong> : we select the icon we want for the close button of the message.<\/p>\n\n\n\n

To show the drop shadow<\/strong> , we can decide whether to show or hide the drop shadow.<\/p>\n\n\n\n

LAYOUT > Message Text<\/h3>\n\n\n\n

Link Color: We <\/strong>set the colors of the links to the internal text.<\/p>\n\n\n\n

Title Box Text Color<\/strong> | Rollover Title Box Text Color | Title box text size (in px) | Title icon color<\/strong> : we set colors and sizes of the open message button.<\/p>\n\n\n\n

Side image on the left<\/strong> : we can place the image on the left (option yes) or on the right (option no).<\/p>\n\n\n\n

Side image link<\/strong> : Enter the URL for the side image.<\/p>\n\n\n\n

Show side image<\/strong> : we can hide the side image.<\/p>\n\n\n\n

Side image<\/strong> : we select the image to be shown next to the content through the media gallery.<\/p>\n\n\n\n

Title icon<\/strong> : Select the icon to show next to the title in the open button.<\/p>\n\n\n\n

Inner Text Color | Interior Title Color | Internal text size (in px) | Internal Title Size (in px):<\/strong> We configure the color and size of the text content.<\/p>\n\n\n\n

Uppercase internal titles<\/strong> : We can force the “UPPERCASE” style for internal content titles. <\/p>\n\n\n\n

Box title<\/strong> : we enter the text to be displayed in the open button.<\/p>\n\n\n\n

Hide side image<\/strong> in responsive: if set to “yes” the side image for mobile resolutions will not be displayed.<\/p>\n\n\n\n

Internal text in the box<\/strong> we enter the text content to be displayed.<\/p>\n\n\n\n

Hide HTML content<\/strong> : We can choose to hide text content.<\/p>\n\n\n\n

LAYOUT > Content recommendation<\/h3>\n\n\n\n

REC size original price (in px _ if on offer) | REC color original price (if on offer) | REC bar color original price (if on offer) | REC Color Text Price | REC text size price (in px):<\/strong> We configure the color and size of the text with the prices.<\/p>\n\n\n\n

REC image height (in px)<\/strong> we set the height of the image on the product card.<\/p>\n\n\n\n

REC button text<\/strong> we enter the text to be inserted into the card button.<\/p>\n\n\n\n

REC color text product description | REC Color Text Product Name | REC Product Description Text Size (in px) | REC product name text size (in px)<\/strong> we configure the color and size for the text on the product card.<\/p>\n\n\n\n

REC uppercase product name<\/strong> : We can force the “UPPERCASE” style for the product name. <\/p>\n\n\n\n

REC Separation Line Thickness | REC separator line color<\/strong> : We configure the thickness (in px) and color of the separator line between the rec and the text content.<\/p>\n\n\n\n

Hide REC Name | Hide REC Description | Hide img REC | Hide REC Pricing | Hide REC button:<\/strong> we can decide to hide or show the individual elements of the cards.<\/p>\n\n\n\n

REC Price Order | Order description REC | REC Image Order | Order REC name<\/strong> we can decide the order of each element, the higher the value will be the sooner it will be inserted.<\/p>\n<\/div>\n<\/div>\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

FORM > Location and Dimensions<\/h3>\n\n\n\n

Show Form Hide REC<\/strong> We can decide whether to show the form or the rec.<\/p>\n\n\n\n

Form Input Background Color | Form Input Border Color | Color checkbox\/radio form | Label form color | Form Background Color<\/strong> : We set the colors for label, input, and background.<\/p>\n\n\n\n

Rounded corners of the form (in px):<\/strong> if the background of the form is active, we can set the rounded corners.<\/p>\n\n\n\n

Form inner padding (in px if background color is active) <\/strong>we set the distance of the form’s contents from its outer margin.<\/p>\n\n\n\n

Show Form Background<\/strong> if set to “yes” the background will be visible, otherwise it will not be visible.<\/p>\n\n\n\n

Form Label Text Size (in px):<\/strong> We set the text size on the form’s labels.<\/p>\n<\/div>\n<\/div>\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

BUTTONS > Button<\/h3>\n\n\n\n

Button rounded corners (in px) | Rollover Buttons Text Color | Rollover Buttons Background Color | Button Background Color | Button text size (in px) | Button Text Color | Rollover Button Border Color | Button Border Color | Button border size (in px)<\/strong> We set colors and text sizes for all buttons.<\/p>\n\n\n\n

Uppercase button text<\/strong> : We can force the “UPPERCASE” style for all buttons.<\/p>\n<\/div>\n<\/div>\n

\n

Was this content useful?<\/strong><\/div><\/p>\n

Thanks for contributing!<\/p>\n

\nYes<\/a>\nNo<\/a>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

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. LAYOUT > More Zindex box : We set up a z-index to place the message above our website. Box position : we can set […]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[563],"article-tag":[190],"class_list":["post-13147","article","type-article","status-publish","format-standard","hentry","article-category-template-en","article-tag-template-en"],"_links":{"self":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13147"}],"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\/1"}],"version-history":[{"count":3,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13147\/revisions"}],"predecessor-version":[{"id":13150,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13147\/revisions\/13150"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=13147"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=13147"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=13147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}