{"id":13175,"date":"2024-03-20T15:13:10","date_gmt":"2024-03-20T14:13:10","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/next-on-exit-and-next-on-exit-recommendations-templates\/"},"modified":"2024-03-20T15:13:12","modified_gmt":"2024-03-20T14:13:12","slug":"next-on-exit-and-next-on-exit-recommendations-templates","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/next-on-exit-and-next-on-exit-recommendations-templates\/","title":{"rendered":"“NEXT ON EXIT” and “NEXT ON EXIT RECOMMENDATIONS” 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

Throughout the article, when the On Exit event is referred to, it will mean when the user has passed the viewport of the website with the mouse.<\/p>\n\n

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

OPTIONS > More<\/h3>\n\n\n\n

Cookie Duration (in days):<\/strong> We can indicate the time in which the message will not be shown to the user again after the user has closed it.<\/p>\n\n\n\n

Timeout<\/strong> : Indicates how long the message remains in seconds.<\/p>\n\n\n\n

Interval between displays (milliseconds):<\/strong> Indicates the delay time for the message to be displayed.<\/p>\n\n\n\n

Sensitivity,<\/strong> the higher its value, the more easily the On Exit event will be triggered.<\/p>\n\n\n\n

Only after x seconds<\/strong> can we enter a time in which the message will not be shown even if the On Exit event has occurred.<\/p>\n<\/div>\n<\/div>\n\n

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

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

Rounded corners (in px)<\/strong> to set the rounded corners of the message.<\/p>\n\n\n\n

Content padding (in px): The<\/strong> distance of the content from the edges of the message.<\/p>\n\n\n\n

Top Position Close Icon (in px) <\/strong>indicates the distance between the top edge and the close icon (can have negative values).<\/p>\n\n\n\n

Right Position Close Icon (in px) <\/strong>indicates the distance between the side edge and the close icon (can have negative values).<\/p>\n\n\n\n

Background color<\/strong> to set the background color of the entire message.<\/p>\n\n\n\n

Border width (in px): The<\/strong> outer border thickness of the message.<\/p>\n\n\n\n

Outer border color: Outer border color<\/strong> of the message.<\/p>\n\n\n\n

Close Icon Color<\/strong> to set the close icon color of the message.<\/p>\n\n\n\n

Close box icon <\/strong>: Set the icon for the close message button.<\/p>\n\n\n\n

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

Live Background Shape Opacity (in %)<\/strong> sets the intensity of animated outer shapes from 0 to 100.<\/p>\n\n\n\n

Live Background Shape Color<\/strong> sets the color of animated outer shapes.<\/p>\n\n\n\n

Outer Overlay Opacity (in %)<\/strong> sets the transparency of the outer overlay, accepted values from 0 to 100.<\/p>\n\n\n\n

Outer Overlay Color<\/strong> sets the background color of the outer overlay.<\/p>\n\n\n\n

Show Drop Shadow<\/strong> : We can turn the drop shadow on or off.<\/p>\n\n\n\n

Animated outer overlay:<\/strong> we can decide whether or not to show animated shapes.<\/p>\n\n\n\n

To show the outer overlay<\/strong> we can turn on or off all the outer overlay, if I turn it off the animated shapes will also not be visible.<\/p>\n\n\n\n

Box position<\/strong> a select appears where we can set the position of our message.<\/p>\n\n\n\n

Distance of the box from the sides (in px):<\/strong> set a minimum distance from the edges that the message must respect.<\/p>\n\n\n\n

We<\/strong> can insert a CSS shape, we refer you to the site<\/a>, to be able to generate your custom shapes.<\/p>\n\n\n\n

Maximum box width (in px):<\/strong> We can set a maximum width of the message.<\/p>\n\n\n\n

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

Side Image Width (in px):<\/strong> We set the maximum width of the side image.<\/p>\n\n\n\n

Side image on the left<\/strong> if we choose if the image goes to the left, otherwise it is positioned on the right.<\/p>\n\n\n\n

Display side image<\/strong> : we can decide whether to show or hide the side image.<\/p>\n\n\n\n

Side image<\/strong> : we select the image through the media gallery.<\/p>\n\n\n\n

Text content<\/strong> : We enter the text content you want to display.<\/p>\n\n\n\n

Title Color<\/strong> : We can set a color for all the titles inserted in the previous text.<\/p>\n\n\n\n

Text color<\/strong> : We set the color for the text (excluding titles).<\/p>\n\n\n\n

Title Size (in px)<\/strong> – Text Size (in px)<\/strong><\/p>\n\n\n\n

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

These keys are only present in the “NEXT ON EXIT RECOMMENDATIONS” template.<\/p>\n\n\n\n

Border Color between REC and Content<\/strong> : We set the color of the separator line between the text content and the carousel.<\/p>\n\n\n\n

REC Image Height (in px):<\/strong> We set the height of the images inside the carousel cards.<\/p>\n\n\n\n

Show REC before content<\/strong> if set to “yes” shows the carousel with recommendations first and then the content, otherwise it inserts it after.<\/p>\n\n\n\n

Show REC<\/strong> : We can decide whether to show or hide the carousel with recommendations.<\/p>\n\n\n\n

Border Thickness between REC and Content (in px):<\/strong> We set the thickness of the separator line between the content and the carousel.<\/p>\n\n\n\n

REC button text<\/strong> : we enter the text that we want to be inserted into the button of each individual card.<\/p>\n\n\n\n

REC Title<\/strong> : we enter the title that appears before the carousel (color and size takes those already set).<\/p>\n\n\n\n

Hide REC Button:<\/strong> We can hide the button on each individual card.<\/p>\n\n\n\n

Hide img REC<\/strong> we can hide the image on the cards.<\/p>\n\n\n\n

Hide REC Prices<\/strong> : We can hide prices on cards.<\/p>\n\n\n\n

Hide REC Description:<\/strong> We can hide the short description on the cards.<\/p>\n\n\n\n

Hide REC Name<\/strong> : We can hide the name on the cards.<\/p>\n\n\n\n

Hide REC Title<\/strong> : You can hide the title before the carousel.<\/p>\n\n\n\n

REC Price Order<\/strong> | REC Image Order<\/strong> | Order description REC<\/strong> | Order Name REC<\/strong> We can decide the order of each item the higher the value and the sooner it will be entered.<\/p>\n\n\n\n

Colour description REC<\/strong> | REC Name Color<\/strong> : We can set the color for the name and description inside the cards.<\/p>\n\n\n\n

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

Z-Index<\/strong> We set up a Z-index to place the message above our website.Additional CSS code<\/strong> : we can insert custom <\/i> CSS code WARNING: insert valid CSS code.<\/strong><\/p>\n\n\n\n

<\/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

To show form background,<\/strong> we can activate or deactivate the background of the form (if deactivated, the padding will be 0).<\/p>\n\n\n\n

Padding form (in px if background is active)<\/strong> If the background is active, we can set a margin between the border of the form and the contents.<\/p>\n\n\n\n

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

Form background color<\/strong> : Set the background color of the form.<\/p>\n\n\n\n

Link color<\/strong> : we set the colors of the links within the form labels.<\/p>\n\n\n\n

Form label color:<\/strong> The color of the text on the form labels.<\/p>\n\n\n\n

Checkbox\/radio form color:<\/strong> we set the color with which we highlight selected checkboxes and radios.<\/p>\n\n\n\n

The color of the form input border color<\/strong> of the outside border of the form inputs.<\/p>\n\n\n\n

Form Input Background Color: The<\/strong> background color of the form inputs.<\/p>\n\n\n\n

Hide Form:<\/strong> We can hide or show the form.<\/p>\n\n\n\n

<\/p>\n<\/div>\n<\/div>\n\n

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

BUTTONS > Button (valid for all buttons)<\/h3>\n\n\n\n

Text color: Buttons<\/strong> : The color of the text for the buttons.<\/p>\n\n\n\n

Text color: Button rollover<\/strong> : The color of the text when the mouse is hovered over.<\/p>\n\n\n\n

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

Buttons background rollover<\/strong> background color on hover.<\/p>\n\n\n\n

Button text size (in px)<\/strong><\/p>\n\n\n\n

Rounded corners: buttons (in px): Rounded<\/strong> corners of buttons.<\/p>\n\n\n\n

Button border color: rollover<\/strong> button color: hover border color.<\/p>\n\n\n\n

Border color: Buttons<\/strong> , border color.<\/p>\n\n\n\n

Button border size<\/strong> button border thickness (in px).<\/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. Throughout the article, when the On Exit event is referred to, it will mean when the user has passed the viewport of the website […]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[563],"article-tag":[190],"class_list":["post-13175","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\/13175"}],"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\/13175\/revisions"}],"predecessor-version":[{"id":13178,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13175\/revisions\/13178"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=13175"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=13175"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=13175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}