{"id":13166,"date":"2024-03-20T15:11:41","date_gmt":"2024-03-20T14:11:41","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/template-next-pushbar\/"},"modified":"2024-03-20T15:11:43","modified_gmt":"2024-03-20T14:11:43","slug":"template-next-pushbar","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/template-next-pushbar\/","title":{"rendered":"Template “NEXT PUSHBAR”"},"content":{"rendered":"\n

This template is designed to show the user, when the page loads, a popup that can appear from above or below. This popup can optionally contain an image, form, text, additional button, or countdown timer.<\/p>\n\n

\"\"<\/a>
Pushbar from bottom (from left to right): text box with countdown, recommendation, custom image.<\/figcaption><\/figure>\n\n
<\/div>\n\n
\"Next<\/a>
Pushbar from top (left to right): text box, recommendation, form<\/figcaption><\/figure>\n\n
<\/div>\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

OPTIONS>Other<\/h3>\n\n\n\n

Exit animation:<\/strong> Animation time in milliseconds to close pop-up<\/p>\n\n\n\n

Animation speed (in ms): Time<\/strong> in milliseconds of the opening animation<\/p>\n\n\n\n

Show Form<\/strong>: Show or hide the selected form in the behavioural message configuration step<\/p>\n\n\n\n

Cookie duration when closed<\/strong>: how long it will take for the message to be shown to the user again (days, hours and minutes)<\/p>\n\n\n\n

Additional Button Container Percentage Width: The<\/strong> percentage occupied by the additional button within the additional text block<\/p>\n\n\n\n

Form Width Percentage: The<\/strong> percentage of the space occupied by the form within the container<\/p>\n\n\n\n

Container Percentage Width*<\/sup>: Percentage <\/strong>width of the parent container <\/p>\n\n\n\n

*only in behavioural messages with rec<\/sub><\/p>\n<\/div>\n<\/div>\n\n

LAYOUT>Other<\/h3>\n\n

Image size\/Image width in pixels*<\/sup>:<\/strong> width of the image in pixels, the Show side image<\/em> field must be activated to display it<\/p>\n\n

Drop Shadow: Toggle<\/strong> the background shadow at the pushbar container<\/p>\n\n

Rounded corners<\/strong>: radius of rounding of the corners of the pushbar container, value 0 indicates the non-rounded corner<\/p>\n\n

Edge Width (in px)<\/strong>: thickness of the rim of the container<\/p>\n\n

Input Field Border Color: The<\/strong> color of the form’s input fields, if present<\/p>\n\n

Background Image Opacity (0.1 to 1):<\/strong> Container Background Transparency, 0 – Invisible, 1 – Fully Visible<\/p>\n\n

Background color<\/strong>: as the background of the container it is possible to set a color, selectable in the window or by entering the hexadecimal code directly, to have the transparency add two additional digits that indicate the percentage of opacity of the color<\/p>\n\n

Show side image<\/strong>: You can turn on or off the display of an image inside the container<\/p>\n\n

Border Color: The<\/strong> color of the container border, visible if the Border Thickness<\/em> field is set to a value greater than 0<\/p>\n\n

Side image link<\/strong>: You can set a link on the image inside the container<\/p>\n\n

Side image<\/strong>: from here you can select or upload an image to the Blendee media gallery, which will be placed to the left of the container by default. You can change the position from the “Position and size”<\/em> menu. <\/p>\n\n

Background image<\/strong>: from here you can select or upload an image to the Blendee media gallery, that image will be shown as the background of the container<\/p>\n\n

Additional CSS code<\/strong>: we can insert custom CSS code <\/p>\n\n

<\/i> WARNING: Enter valid CSS code.<\/strong><\/p>\n\n

Padding pushbar:<\/strong> padding of the pushbar<\/p>\n\n

Padding form<\/strong>: padding of the form, if enabled<\/p>\n\n

Additional Button Link:<\/strong> Additional Button URL<\/p>\n\n

<\/p>\n\n

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

Link color: The<\/strong> color of the links within the text<\/p>\n\n

Form Placeholder Color: The<\/strong> color of the placeholders within the form fields<\/p>\n\n

Content Color: The<\/strong> color of the content of the text message<\/p>\n\n

Hover Link Color: The<\/strong> color of hover links<\/p>\n\n

Title Color: Selecting<\/strong> the color of the text message title<\/p>\n\n

Title Font: The<\/strong> size of the font used in the title<\/p>\n\n

Content<\/strong>: Text editor for inserting and formatting content<\/p>\n\n

Content font size: The<\/strong> size of the font used in the paragraph of the text content<\/p>\n\n

Content Font:<\/strong> font style of text content (e.g.: Arial, Helvetica, sans-serif)<\/p>\n\n

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

Left Image: Positioning<\/strong> of the image inside the container, yes – left image, no – right image<\/p>\n\n

Fixed Position<\/strong>: unlocking of the possibility to place the popup with fixed or relative positioning, only in the template without recommendation<\/p>\n\n

Pushbar at the top<\/strong>: Place the popup at the top<\/p>\n\n

Position of the additional button ( YES = Right \/ No = Left):<\/strong> position of the additional button on the right or left<\/p>\n\n

Show additional button in text<\/strong>: Adds a button with a link to the text container<\/p>\n\n

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

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

Rec button text<\/strong>: Item product link label<\/p>\n\n\n\n

Original Rec Price Color: Font <\/strong>color of the item’s starting price<\/p>\n\n\n\n

Product Description Color rec:<\/strong> Font color of the product description<\/p>\n<\/div>\n<\/div>\n\n

Rec button text color:<\/strong> font color of the button label with the link to the article <\/p>\n\n

Rec button background color: The<\/strong> background color of the button that links to the article<\/p>\n\n

Rec Product Title Font: Size<\/strong> of the rec title<\/p>\n\n

Rec Product Title Color: Product Title<\/strong> Color <\/p>\n\n

Show rec description:<\/strong> enables\/disables the display of the rec description<\/p>\n\n

Show rec title:<\/strong> enables\/disables the display of the rec title<\/p>\n\n

Show rec product image:<\/strong> enables\/disables the display of the product image<\/p>\n\n

Rec margin in px:<\/strong> margin of the article card in px<\/p>\n\n

Padding rec image in px:<\/strong> padding of the card image <\/p>\n\n

Rec Price Font Size: Font<\/strong> size of the product’s original price<\/p>\n\n

Rec Price Cut Bar Color: Price<\/strong> Cut Bar Color<\/p>\n\n

Discount price color rec:<\/strong> color of the final price net of the discount<\/p>\n\n

*only in behavioural messages with rec<\/sub><\/p>\n\n

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

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

Button Border: Activating<\/strong> \/deactivating the button border<\/p>\n\n\n\n

Button Background Color: The<\/strong> background color of the buttons<\/p>\n\n\n\n

Button border size (in px): Thickness<\/strong> of the button border in pixels<\/p>\n\n\n\n

Close button position YES = Right \/ No = Left: Placement<\/strong> of the popup close button to the right or left<\/p>\n<\/div>\n<\/div>\n\n

Button hover background color:<\/strong> Hover button background color<\/p>\n\n

Button hover text color:<\/strong> The color of the hover button text<\/p>\n\n

Button Border Color: Color<\/strong> of the “close” button border<\/p>\n\n

Hover Close Button Color: Color<\/strong> of the “close” button on hover<\/p>\n\n

Close button color: color<\/strong> of the “close” button<\/p>\n\n

Close button icon color<\/strong>: color of the “x” of the “close” button<\/p>\n\n

Button Text Color: The<\/strong> color of the text inside the button<\/p>\n\n

COUNTDOWN > More<\/h3>\n\n

Second Expiration _ Countdown [ES: 01]:<\/strong> Setting the seconds of the countdown expiration date (accepted values: 0 -59)<\/p>\n\n

Expiration Minute _ Countdown [ES:30]:<\/strong> Setting the minutes of the countdown expiration date (accepted values: 0 -59)<\/p>\n\n

Expiration time _ Countdown [ES: 16]:<\/strong> setting the time of the countdown expiration date (accepted values: 0 -23)<\/p>\n\n

Expiry year _ Countdown [ES: 2024]:<\/strong> setting the year of the countdown expiry date (accepted values: current or future year)<\/p>\n\n

Expiration day _ Countdown [ES: 2]:<\/strong> setting the day of the countdown expiration date (accepted values: 1 -31)<\/p>\n\n

Expiration Month _ Countdown [ES: 1 ]:<\/strong> Setting the month of the countdown expiration date (accepted values: 1-12)<\/p>\n\n

Show Countdown:<\/strong> Show or hide the countdown<\/p>\n\n

Countdown padding box:<\/strong> padding of the countdown container<\/p>\n\n

Countdown border radius box (in px):<\/strong> radius of the corners of the countdown container<\/p>\n\n

Background Color Countdown:<\/strong> Window for selecting the background color of the countdown. To have transparency, add two numbers after the hexadecimal code to indicate the percentage of opacity (e.g.: #FF000050<\/strong>: red color with 50% opacity)<\/p>\n\n

Countdown font color:<\/strong> The color of the countdown text<\/p>\n\n

Timeout end text<\/strong>: text that will appear at the end of the countdown in its place<\/p>\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":"

This template is designed to show the user, when the page loads, a popup that can appear from above or below. This popup can optionally contain an image, form, text, additional button, or countdown timer. OPTIONS>Other Exit animation: Animation time in milliseconds to close pop-up Animation speed (in ms): Time in milliseconds of the opening […]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[563],"article-tag":[590,589,170,190],"class_list":["post-13166","article","type-article","status-publish","format-standard","hentry","article-category-template-en","article-tag-behavioural-messages-en","article-tag-personalization","article-tag-recommendation-en","article-tag-template-en"],"_links":{"self":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13166"}],"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\/13166\/revisions"}],"predecessor-version":[{"id":13169,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13166\/revisions\/13169"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=13166"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=13166"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=13166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}