COVID-19 Social Proof Banner

Social proof banners inform your customer about how many others have purchased your products since the quarantine has started.

Customers are uncertain and to remove doubt and reduce their anxiety, we can show social proof banners specific to the current situation we’re in now. The banner can include different messages, but we chose two options as default.

Purchase count banner

This goes into your data and counts the number of purchases by product_id in the last 2 weeks. Then it matches it with the product ID of the page the customer is on and displays the banner. The given text is: "This item recently got way more popular! X people bought it in the last 2 weeks". However, the text is parametric so you can adjust it within the web layer.

🚧

Make sure that the “purchase count report” uses the correct definition of purchase as an event.

Shipment count banner

This goes into your data and counts the number of shipments by product_id in the last 2 weeks. Then it matches it with the product ID of the page the customer is on and displays the banner. The given text is: "This item recently got way more popular! It was safely delivered to X people in the last 2 weeks". However, the text is parametric so you can adjust it within the web layer.

🚧

Make sure that the “shipment count report” uses the correct definition of shipment as an event.

Importing the Social Proof Banner

In order to import the package, copy the following JSON code into a text file and import it following the guide in the Initiatives article.

{"files":[],"initiative":{"archived":false,"cloned_from_id":"5e74ce7f6172a7f89654ea55","color":"#00b7db","description":"A play on Social Proof Banners:\n\"This item recently got way more popular! X people bought it in the last 2 weeks\"\n\"This item recently got way more popular! It was safely delivered to X people in the last 2 weeks\"","name":"CV19 Social Proof","pinned":false,"prevent_archivation":false},"items":[{"data":{"all_exposing_properties":[],"archived":false,"client":{"chart_type":"column","color_theme":0,"display":"table","items_per_page":50,"order_column":1,"order_direction":"desc","page":1,"report_type":"report","series_settings":[]},"cloned_from_id":"5e74ce7f6172a7f89654ea6c","description":null,"is_global_object":false,"name":"Purchase count report","prevent_archivation":false,"server":{"attributes_use_global_events":false,"columns":[],"customer_filter":{"filters":[],"formula":""},"event_filters":{"attributes":[{"filter":[],"type":"purchase_item"}],"date":{"absolute":false,"duration":{"count":14,"units":"days"},"enabled":true,"from_date":null,"offset":null,"to_date":null}},"metrics":[{"_id":null,"event_types":null,"format":"round(0)","formula":"A","is_formula":false,"members":[{"aggregation":"count","attribute":null,"customer_filter":{"filters":[],"formula":""},"date_filter":{"absolute":false,"duration":{"count":30,"units":"days"},"enabled":false,"from_date":null,"offset":null,"to_date":null},"event":{"filter":[],"type":"purchase_item"},"name":"count(view_item)","occurrence_per_customer":"first","type":"event"}],"modifiers":{"display":"default","summarize":{"average":false,"max":false,"min":false,"stddev":false,"sum":false,"variance":false},"visualization":{"type":"default"}},"name":"# items","type":"embedded_metric","value_filter":{"filters":[{"operands":[1],"operator":"greater than"}],"formula":"F0"}}],"rows":[{"attribute":{"property":"product_id","type":"property"},"event_type":"purchase_item","expand_lists":false,"format":"string","grouping":{"ascending":false,"number":9999,"type":"top"},"hide_null":true,"modifiers":[],"name":null,"type":"event"}]},"show_description_in_view":false,"tags":[]},"id":"5e7a8247296d38ff5e6e014d","type":"report"},{"data":{"all_exposing_properties":[],"archived":false,"client":{"chart_type":"column","color_theme":0,"display":"table","items_per_page":50,"order_column":1,"order_direction":"desc","page":1,"report_type":"report","series_settings":[]},"cloned_from_id":"5e74d7a98b120f30971015d3","description":null,"is_global_object":false,"name":"Shipment count report","prevent_archivation":false,"server":{"attributes_use_global_events":false,"columns":[],"customer_filter":{"filters":[],"formula":""},"event_filters":{"attributes":[{"filter":[],"type":"purchase_item"}],"date":{"absolute":false,"duration":{"count":14,"units":"days"},"enabled":true,"from_date":null,"offset":null,"to_date":null}},"metrics":[{"_id":null,"event_types":null,"format":"round(0)","formula":"A","is_formula":false,"members":[{"aggregation":"count","attribute":null,"customer_filter":{"filters":[],"formula":""},"date_filter":{"absolute":false,"duration":{"count":30,"units":"days"},"enabled":false,"from_date":null,"offset":null,"to_date":null},"event":{"filter":[],"type":"purchase_item"},"name":"count(view_item)","occurrence_per_customer":"first","type":"event"}],"modifiers":{"display":"default","summarize":{"average":false,"max":false,"min":false,"stddev":false,"sum":false,"variance":false},"visualization":{"type":"default"}},"name":"# items","type":"embedded_metric","value_filter":{"filters":[{"operands":[1],"operator":"greater than"}],"formula":"F0"}}],"rows":[{"attribute":{"property":"product_id","type":"property"},"event_type":"purchase_item","expand_lists":false,"format":"string","grouping":{"ascending":false,"number":9999,"type":"top"},"hide_null":true,"modifiers":[],"name":null,"type":"event"}]},"show_description_in_view":false,"tags":[]},"id":"5e7a8247296d38ff5e6e0153","type":"report"},{"data":{"ab_testing_options":{"type":"manual"},"archived":false,"cloned_from_id":"5e74ce7f6172a7f89654ea5a","consent_category":null,"control_group":{"script":"var viewThreshold = [[limit_wyswietlen]];\nvar count = parseInt(\"{{ report_value_by_key('5c73c607f2320700195a30df', params.product_id) or 0 }}\");\nif (count < viewThreshold) {\n    return;  \n}\n\nvar self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n    return {\n      action: action,\n      banner_id: self.data.banner_id,\n      banner_name: self.data.banner_name,\n      banner_type: self.data.banner_type,\n      variant_id: self.data.variant_id,\n      variant_name: self.data.variant_name,\n      interaction: interactive !== false ? true : false,\n      location: window.location.href,\n      path: window.location.pathname\n    };\n}","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":null,"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"always","general_consent":true,"is_global_object":false,"last_variant_id":0,"name":"Purchase count banner","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<a class=\"exponea-banner exponea-notification-1\" style=\"cursor: default;\" href=\"[[ bannerLink ]]\" id=\"exponea-socialproof\">\r\n  <span class=\"exponea-text\">[[ notificationTextBefore ]] {{ report_value_by_key('5e7a8247296d38ff5e6e014d', params.product_id) }} [[ notificationTextAfter ]]\r\n  </span>\r\n</a>","id":0,"name":"Variant A","parametrized_parts":{"html":"<a class=\"exponea-banner exponea-notification-1\" style=\"cursor: default;\" href=\"\" id=\"exponea-socialproof\">\r\n  <span class=\"exponea-text\">This item recently got way more popular! {{ report_value_by_key('5e7a8247296d38ff5e6e014d', params.product_id) }} people bought it in the last 2 weeks\r\n  </span>\r\n</a>","script":"var viewThreshold = 5;\r\nvar count = parseInt(\"{{ report_value_by_key('5e7a8247296d38ff5e6e014d', params.product_id) or 0 }}\");\r\nif (count < viewThreshold) {\r\n    return;  \r\n}\r\n\r\nvar self = this;\r\nvar showDelay = parseInt('100' || '0', 10);\r\nvar hideDelay = parseInt('5500' || '0', 10);\r\n\r\nsetTimeout(function () {\r\n    self.sdk.track('banner', getEventProperties('show', false));\r\n    requestAnimationFrame(function () {\r\n        document.body.insertAdjacentHTML('beforeend', self.html);\r\n        var banner = self.banner = document.querySelector(`.exponea-notification-1`);\r\n        console.log(banner);\r\n        banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\r\n        var btnClose = banner.querySelector('.exponea-close');\r\n        self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\r\n        requestAnimationFrame(function () {\r\n            document.querySelector(`.exponea-notification-1`).className += ' exponea-animate';\r\n        });\r\n        btnClose.onclick = function (e) {\r\n            removeBanner();\r\n            self.sdk.track('banner', getEventProperties('close'));\r\n            e.preventDefault();\r\n            if (e.stopPropagation) {\r\n                e.stopPropagation();\r\n            } else {\r\n                e.cancelBubble = true;\r\n            }\r\n            return false;\r\n        }\r\n    });\r\n}, showDelay);\r\n\r\nsetTimeout(function() { \r\n\t$('#exponea-socialproof').fadeOut();\r\n}, 12000);\r\n\r\nsetTimeout(function () {\r\n\tremoveBanner();\r\n}, hideDelay);\r\n\r\nfunction getEventProperties(action, interactive) {\r\n    return {\r\n        action: action,\r\n        banner_id: self.data.banner_id,\r\n        banner_name: self.data.banner_name,\r\n        banner_type: self.data.banner_type,\r\n        variant_id: self.data.variant_id,\r\n        variant_name: self.data.variant_name,\r\n        interaction: interactive !== false ? true : false,\r\n        location: window.location.href,\r\n        path: window.location.pathname\r\n    };\r\n}\r\n\r\nfunction removeBanner() {\r\n    if (self.banner) {\r\n        self.banner.parentNode.removeChild(self.banner);\r\n    }\r\n}\r\nreturn {\r\n    remove: removeBanner\r\n};","sdk_object_name":"exponea","style":".exponea-notification-1 {\r\n    display: block;\r\n    position: fixed;\r\n    left: -100px;\r\n    top: 300px;\r\n    max-width: 250px;\r\n    z-index: 9999999;\r\n    background: #00b7db;\r\n    transition: all 0.7s;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    text-align: left;\r\n    line-height: normal;\r\n    text-decoration: inherit;\r\n    cursor: pointer;\r\n    padding: 25px;\r\n}\r\n\r\n.exponea-notification-1,\r\n.exponea-notification-1 * {\r\n    box-sizing: content-box;\r\n}\r\n\r\n.exponea-notification-1:hover,\r\n.exponea-notification-1:active {\r\n    text-decoration: inherit;\r\n}\r\n\r\n.exponea-notification-1.exponea-animate {\r\n    left: 30px;\r\n}\r\n\r\n.exponea-notification-1 span {\r\n    display: block;\r\n}\r\n\r\n.exponea-notification-1 .exponea-text {\r\n    font-size: 14px;\r\n    font-weight: normal;\r\n    color: #ffffff;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close {\r\n    padding: 15px;\r\n    position: absolute;\r\n    top: -5px;\r\n    right: -5px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross {\r\n    position: absolute;\r\n    display: inline-block;\r\n    width: 10px;\r\n    height: 10px;\r\n    overflow: hidden;\r\n    top: 10px;\r\n    right: 10px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close:hover {\r\n    cursor: pointer;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before,\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n    content: '';\r\n    position: absolute;\r\n    height: 2px;\r\n    width: 100%;\r\n    top: 50%;\r\n    left: 0;\r\n    margin-top: -1px;\r\n    background: #1c1733;\r\n    height: 1px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before {\r\n    -webkit-transform: rotate(45deg);\r\n    transform: rotate(45deg);\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n    -webkit-transform: rotate(45deg);\r\n    transform: rotate(-45deg);\r\n}\r\n"},"params":{"backgroundColor":"#00b7db","bannerHideDelayInMilliseconds":"5500","bannerNumber":"1","bannerShowDelayInMilliseconds":"100","bodyText":"Subscribe now and get 50% discount for first three months.","bodyTextColor":"#ffffff","buttonBackgroundColor":"#1c1733","buttonText":"Subscribe","buttonTextColor":"#ffffff","closeButtonColor":"#1c1733","count_threshold":"5","headerText":"MyNews.com","headerTextColor":"#1c1733","limit_wyswietlen":"0","notificationText":"DOBRY WYBÓR... \nTen produkt ogląda xxx klientów","notificationText2":"","notificationTextAfter":"people bought it in the last 2 weeks","notificationTextBefore":"This item recently got way more popular!","notificationTextColor":"#ffffff","product_view_report_id":"5e7a8247296d38ff5e6e014d","sliderNumber":"1","view_report_id":"5dd12e0e9a51ca5558430a73","view_threshold":"5"},"percentage":100,"script":"var viewThreshold = [[count_threshold]];\r\nvar count = parseInt(\"{{ report_value_by_key('5e7a8247296d38ff5e6e014d', params.product_id) or 0 }}\");\r\nif (count < viewThreshold) {\r\n    return;  \r\n}\r\n\r\nvar self = this;\r\nvar showDelay = parseInt('[[ bannerShowDelayInMilliseconds ]]' || '0', 10);\r\nvar hideDelay = parseInt('[[ bannerHideDelayInMilliseconds ]]' || '0', 10);\r\n\r\nsetTimeout(function () {\r\n    self.sdk.track('banner', getEventProperties('show', false));\r\n    requestAnimationFrame(function () {\r\n        document.body.insertAdjacentHTML('beforeend', self.html);\r\n        var banner = self.banner = document.querySelector(`.exponea-notification-1`);\r\n        console.log(banner);\r\n        banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\r\n        var btnClose = banner.querySelector('.exponea-close');\r\n        self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\r\n        requestAnimationFrame(function () {\r\n            document.querySelector(`.exponea-notification-1`).className += ' exponea-animate';\r\n        });\r\n        btnClose.onclick = function (e) {\r\n            removeBanner();\r\n            self.sdk.track('banner', getEventProperties('close'));\r\n            e.preventDefault();\r\n            if (e.stopPropagation) {\r\n                e.stopPropagation();\r\n            } else {\r\n                e.cancelBubble = true;\r\n            }\r\n            return false;\r\n        }\r\n    });\r\n}, showDelay);\r\n\r\nsetTimeout(function() { \r\n\t$('#exponea-socialproof').fadeOut();\r\n}, 12000);\r\n\r\nsetTimeout(function () {\r\n\tremoveBanner();\r\n}, hideDelay);\r\n\r\nfunction getEventProperties(action, interactive) {\r\n    return {\r\n        action: action,\r\n        banner_id: self.data.banner_id,\r\n        banner_name: self.data.banner_name,\r\n        banner_type: self.data.banner_type,\r\n        variant_id: self.data.variant_id,\r\n        variant_name: self.data.variant_name,\r\n        interaction: interactive !== false ? true : false,\r\n        location: window.location.href,\r\n        path: window.location.pathname\r\n    };\r\n}\r\n\r\nfunction removeBanner() {\r\n    if (self.banner) {\r\n        self.banner.parentNode.removeChild(self.banner);\r\n    }\r\n}\r\nreturn {\r\n    remove: removeBanner\r\n};","source_mode":true,"style":".exponea-notification-1 {\r\n    display: block;\r\n    position: fixed;\r\n    left: -100px;\r\n    top: 300px;\r\n    max-width: 250px;\r\n    z-index: 9999999;\r\n    background: [[ backgroundColor ]];\r\n    transition: all 0.7s;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    text-align: left;\r\n    line-height: normal;\r\n    text-decoration: inherit;\r\n    cursor: pointer;\r\n    padding: 25px;\r\n}\r\n\r\n.exponea-notification-1,\r\n.exponea-notification-1 * {\r\n    box-sizing: content-box;\r\n}\r\n\r\n.exponea-notification-1:hover,\r\n.exponea-notification-1:active {\r\n    text-decoration: inherit;\r\n}\r\n\r\n.exponea-notification-1.exponea-animate {\r\n    left: 30px;\r\n}\r\n\r\n.exponea-notification-1 span {\r\n    display: block;\r\n}\r\n\r\n.exponea-notification-1 .exponea-text {\r\n    font-size: 14px;\r\n    font-weight: normal;\r\n    color: [[ notificationTextColor ]];\r\n}\r\n\r\n.exponea-notification-1 .exponea-close {\r\n    padding: 15px;\r\n    position: absolute;\r\n    top: -5px;\r\n    right: -5px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross {\r\n    position: absolute;\r\n    display: inline-block;\r\n    width: 10px;\r\n    height: 10px;\r\n    overflow: hidden;\r\n    top: 10px;\r\n    right: 10px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close:hover {\r\n    cursor: pointer;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before,\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n    content: '';\r\n    position: absolute;\r\n    height: 2px;\r\n    width: 100%;\r\n    top: 50%;\r\n    left: 0;\r\n    margin-top: -1px;\r\n    background: [[ closeButtonColor ]];\r\n    height: 1px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before {\r\n    -webkit-transform: rotate(45deg);\r\n    transform: rotate(45deg);\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n    -webkit-transform: rotate(45deg);\r\n    transform: rotate(-45deg);\r\n}\r\n","template_id":null,"type":"medium_rectangle"}],"variants_enabled":false},"id":"5e7a8247296d38ff5e6e0137","type":"banner"},{"data":{"ab_testing_options":{"type":"manual"},"archived":false,"cloned_from_id":"5e74ce7f6172a7f89654ea5a","consent_category":null,"control_group":{"script":"var viewThreshold = [[limit_wyswietlen]];\nvar count = parseInt(\"{{ report_value_by_key('5c73c607f2320700195a30df', params.product_id) or 0 }}\");\nif (count < viewThreshold) {\n    return;  \n}\n\nvar self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n    return {\n      action: action,\n      banner_id: self.data.banner_id,\n      banner_name: self.data.banner_name,\n      banner_type: self.data.banner_type,\n      variant_id: self.data.variant_id,\n      variant_name: self.data.variant_name,\n      interaction: interactive !== false ? true : false,\n      location: window.location.href,\n      path: window.location.pathname\n    };\n}","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":null,"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"always","general_consent":true,"is_global_object":false,"last_variant_id":0,"name":"Shipment count banner","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<a class=\"exponea-banner exponea-notification-1\" style=\"cursor: default;\" href=\"[[ bannerLink ]]\" id=\"exponea-socialproof\">\r\n  <span class=\"exponea-text\">[[ notificationTextBefore ]] {{ report_value_by_key('5e7a8247296d38ff5e6e0153', params.product_id) }} [[ notificationTextAfter ]]\r\n  </span>\r\n</a>","id":0,"name":"Variant A","parametrized_parts":{"html":"<a class=\"exponea-banner exponea-notification-1\" style=\"cursor: default;\" href=\"\" id=\"exponea-socialproof\">\r\n  <span class=\"exponea-text\">This item recently got way more popular! It got safely delivered to {{ report_value_by_key('5e7a8247296d38ff5e6e0153', params.product_id) }} customers in the last 2 weeks\r\n  </span>\r\n</a>","script":"var viewThreshold = 5;\r\nvar count = parseInt(\"{{ report_value_by_key('5e7a8247296d38ff5e6e0153', params.product_id) or 0 }}\");\r\nif (count < viewThreshold) {\r\n    return;  \r\n}\r\n\r\nvar self = this;\r\nvar showDelay = parseInt('100' || '0', 10);\r\nvar hideDelay = parseInt('5500' || '0', 10);\r\n\r\nsetTimeout(function () {\r\n    self.sdk.track('banner', getEventProperties('show', false));\r\n    requestAnimationFrame(function () {\r\n        document.body.insertAdjacentHTML('beforeend', self.html);\r\n        var banner = self.banner = document.querySelector(`.exponea-notification-1`);\r\n        console.log(banner);\r\n        banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\r\n        var btnClose = banner.querySelector('.exponea-close');\r\n        self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\r\n        requestAnimationFrame(function () {\r\n            document.querySelector(`.exponea-notification-1`).className += ' exponea-animate';\r\n        });\r\n        btnClose.onclick = function (e) {\r\n            removeBanner();\r\n            self.sdk.track('banner', getEventProperties('close'));\r\n            e.preventDefault();\r\n            if (e.stopPropagation) {\r\n                e.stopPropagation();\r\n            } else {\r\n                e.cancelBubble = true;\r\n            }\r\n            return false;\r\n        }\r\n    });\r\n}, showDelay);\r\n\r\nsetTimeout(function() { \r\n\t$('#exponea-socialproof').fadeOut();\r\n}, 7000);\r\n\r\nsetTimeout(function () {\r\n\tremoveBanner();\r\n}, hideDelay);\r\n\r\nfunction getEventProperties(action, interactive) {\r\n    return {\r\n        action: action,\r\n        banner_id: self.data.banner_id,\r\n        banner_name: self.data.banner_name,\r\n        banner_type: self.data.banner_type,\r\n        variant_id: self.data.variant_id,\r\n        variant_name: self.data.variant_name,\r\n        interaction: interactive !== false ? true : false,\r\n        location: window.location.href,\r\n        path: window.location.pathname\r\n    };\r\n}\r\n\r\nfunction removeBanner() {\r\n    if (self.banner) {\r\n        self.banner.parentNode.removeChild(self.banner);\r\n    }\r\n}\r\nreturn {\r\n    remove: removeBanner\r\n};","sdk_object_name":"exponea","style":".exponea-notification-1 {\r\n    display: block;\r\n    position: fixed;\r\n    left: -100px;\r\n    top: 300px;\r\n    max-width: 250px;\r\n    z-index: 9999999;\r\n    background: #00b7db;\r\n    transition: all 0.7s;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    text-align: left;\r\n    line-height: normal;\r\n    text-decoration: inherit;\r\n    cursor: pointer;\r\n    padding: 25px;\r\n}\r\n\r\n.exponea-notification-1,\r\n.exponea-notification-1 * {\r\n    box-sizing: content-box;\r\n}\r\n\r\n.exponea-notification-1:hover,\r\n.exponea-notification-1:active {\r\n    text-decoration: inherit;\r\n}\r\n\r\n.exponea-notification-1.exponea-animate {\r\n    left: 30px;\r\n}\r\n\r\n.exponea-notification-1 span {\r\n    display: block;\r\n}\r\n\r\n.exponea-notification-1 .exponea-text {\r\n    font-size: 14px;\r\n    font-weight: normal;\r\n    color: #ffffff;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close {\r\n    padding: 15px;\r\n    position: absolute;\r\n    top: -5px;\r\n    right: -5px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross {\r\n    position: absolute;\r\n    display: inline-block;\r\n    width: 10px;\r\n    height: 10px;\r\n    overflow: hidden;\r\n    top: 10px;\r\n    right: 10px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close:hover {\r\n    cursor: pointer;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before,\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n    content: '';\r\n    position: absolute;\r\n    height: 2px;\r\n    width: 100%;\r\n    top: 50%;\r\n    left: 0;\r\n    margin-top: -1px;\r\n    background: #1c1733;\r\n    height: 1px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before {\r\n    -webkit-transform: rotate(45deg);\r\n    transform: rotate(45deg);\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n    -webkit-transform: rotate(45deg);\r\n    transform: rotate(-45deg);\r\n}\r\n"},"params":{"backgroundColor":"#00b7db","bannerHideDelayInMilliseconds":"5500","bannerNumber":"1","bannerShowDelayInMilliseconds":"100","bodyText":"Subscribe now and get 50% discount for first three months.","bodyTextColor":"#ffffff","buttonBackgroundColor":"#1c1733","buttonText":"Subscribe","buttonTextColor":"#ffffff","closeButtonColor":"#1c1733","count_threshold":"5","headerText":"MyNews.com","headerTextColor":"#1c1733","limit_wyswietlen":"0","notificationText":"DOBRY WYBÓR... \nTen produkt ogląda xxx klientów","notificationText2":"","notificationTextAfter":"customers in the last 2 weeks","notificationTextBefore":"This item recently got way more popular! It got safely delivered to","notificationTextColor":"#ffffff","product_view_report_id":"5e7a8247296d38ff5e6e014d","sliderNumber":"1","view_report_id":"5dd12e0e9a51ca5558430a73","view_threshold":"5"},"percentage":100,"script":"var viewThreshold = [[count_threshold]];\r\nvar count = parseInt(\"{{ report_value_by_key('5e7a8247296d38ff5e6e0153', params.product_id) or 0 }}\");\r\nif (count < viewThreshold) {\r\n    return;  \r\n}\r\n\r\nvar self = this;\r\nvar showDelay = parseInt('[[ bannerShowDelayInMilliseconds ]]' || '0', 10);\r\nvar hideDelay = parseInt('[[ bannerHideDelayInMilliseconds ]]' || '0', 10);\r\n\r\nsetTimeout(function () {\r\n    self.sdk.track('banner', getEventProperties('show', false));\r\n    requestAnimationFrame(function () {\r\n        document.body.insertAdjacentHTML('beforeend', self.html);\r\n        var banner = self.banner = document.querySelector(`.exponea-notification-1`);\r\n        console.log(banner);\r\n        banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\r\n        var btnClose = banner.querySelector('.exponea-close');\r\n        self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\r\n        requestAnimationFrame(function () {\r\n            document.querySelector(`.exponea-notification-1`).className += ' exponea-animate';\r\n        });\r\n        btnClose.onclick = function (e) {\r\n            removeBanner();\r\n            self.sdk.track('banner', getEventProperties('close'));\r\n            e.preventDefault();\r\n            if (e.stopPropagation) {\r\n                e.stopPropagation();\r\n            } else {\r\n                e.cancelBubble = true;\r\n            }\r\n            return false;\r\n        }\r\n    });\r\n}, showDelay);\r\n\r\nsetTimeout(function() { \r\n\t$('#exponea-socialproof').fadeOut();\r\n}, 7000);\r\n\r\nsetTimeout(function () {\r\n\tremoveBanner();\r\n}, hideDelay);\r\n\r\nfunction getEventProperties(action, interactive) {\r\n    return {\r\n        action: action,\r\n        banner_id: self.data.banner_id,\r\n        banner_name: self.data.banner_name,\r\n        banner_type: self.data.banner_type,\r\n        variant_id: self.data.variant_id,\r\n        variant_name: self.data.variant_name,\r\n        interaction: interactive !== false ? true : false,\r\n        location: window.location.href,\r\n        path: window.location.pathname\r\n    };\r\n}\r\n\r\nfunction removeBanner() {\r\n    if (self.banner) {\r\n        self.banner.parentNode.removeChild(self.banner);\r\n    }\r\n}\r\nreturn {\r\n    remove: removeBanner\r\n};","source_mode":true,"style":".exponea-notification-1 {\r\n    display: block;\r\n    position: fixed;\r\n    left: -100px;\r\n    top: 300px;\r\n    max-width: 250px;\r\n    z-index: 9999999;\r\n    background: [[ backgroundColor ]];\r\n    transition: all 0.7s;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    text-align: left;\r\n    line-height: normal;\r\n    text-decoration: inherit;\r\n    cursor: pointer;\r\n    padding: 25px;\r\n}\r\n\r\n.exponea-notification-1,\r\n.exponea-notification-1 * {\r\n    box-sizing: content-box;\r\n}\r\n\r\n.exponea-notification-1:hover,\r\n.exponea-notification-1:active {\r\n    text-decoration: inherit;\r\n}\r\n\r\n.exponea-notification-1.exponea-animate {\r\n    left: 30px;\r\n}\r\n\r\n.exponea-notification-1 span {\r\n    display: block;\r\n}\r\n\r\n.exponea-notification-1 .exponea-text {\r\n    font-size: 14px;\r\n    font-weight: normal;\r\n    color: [[ notificationTextColor ]];\r\n}\r\n\r\n.exponea-notification-1 .exponea-close {\r\n    padding: 15px;\r\n    position: absolute;\r\n    top: -5px;\r\n    right: -5px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross {\r\n    position: absolute;\r\n    display: inline-block;\r\n    width: 10px;\r\n    height: 10px;\r\n    overflow: hidden;\r\n    top: 10px;\r\n    right: 10px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close:hover {\r\n    cursor: pointer;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before,\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n    content: '';\r\n    position: absolute;\r\n    height: 2px;\r\n    width: 100%;\r\n    top: 50%;\r\n    left: 0;\r\n    margin-top: -1px;\r\n    background: [[ closeButtonColor ]];\r\n    height: 1px;\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::before {\r\n    -webkit-transform: rotate(45deg);\r\n    transform: rotate(45deg);\r\n}\r\n\r\n.exponea-notification-1 .exponea-close .exponea-close-cross::after {\r\n    -webkit-transform: rotate(45deg);\r\n    transform: rotate(-45deg);\r\n}\r\n","template_id":null,"type":"medium_rectangle"}],"variants_enabled":false},"id":"5e7b16e94f21d3b453e365bb","type":"banner"},{"data":{"archived":false,"cloned_from_id":"5e74ce7f6172a7f89654ea65","consent_category":null,"customer_filter":{"filters":[{"attribute":{"id":"cookie","type":"id"},"constraint":{"constraint":{"operands":[{"type":"constant","value":"4974264d-82d0-4516-90cb-8d0d146472b8"}],"operator":"equals","type":"string"},"operands":[],"operator":"contains matching","quantifier":"any","type":"list"},"type":"attribute"}],"formula":"A"},"definition":"/* ACTION REQUIRED: Customize the container above to get the product_id on your product page */\n\nvar product_id = [[productIdContainer]];\n\nif ([[launchShipmentCount]] == 1){\n\tif (product_id) {\n    exponea.showBanner('5e7b16e94f21d3b453e365bb', { \"product_id\": product_id });\n\t}\n}\n\nelse if ([[launchPurchaseCount]] == 1){\n\tif (product_id) {\n    exponea.showBanner('5e7a8247296d38ff5e6e0137', { \"product_id\": product_id });\n\t}\n}","description":null,"general_consent":true,"is_constant":false,"is_global_object":false,"load_priority":null,"name":"Social proof trigger","parametrized_definition":"/* ACTION REQUIRED: Customize the container above to get the product_id on your product page */\n\nvar product_id = dataLayer[1].ecommerce.detail.products[0].id;\n\nif (0 == 1){\n\tif (product_id) {\n    exponea.showBanner('5e7b16e94f21d3b453e365bb', { \"product_id\": product_id });\n\t}\n}\n\nelse if (1 == 1){\n\tif (product_id) {\n    exponea.showBanner('5e7a8247296d38ff5e6e0137', { \"product_id\": product_id });\n\t}\n}","params":{"launchPurchaseCount":"1","launchShipmentCount":"0","productIdContainer":"dataLayer[1].ecommerce.detail.products[0].id"},"preset_id":null,"prevent_archivation":false,"show_description_in_view":false,"status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"type":"js","uses_overlay":false},"id":"5e7a8247296d38ff5e6e0147","type":"managed_tag"},{"data":{"archived":false,"cloned_from_id":"5e74ce7f6172a7f89654ea60","components":[{"evaluate":false,"position":{"height":{"type":"fixed","value":9},"width":12,"x":0,"y":0},"project_id":"f0ddd9fe-6751-11e9-aed1-0a580a203507","text":"<p><strong>Purchase Count / Shipment Count Weblayers</strong></p>\n\n<p>Documentation for similar view count banner:&nbsp;<a href=\"https://docs.exponea.com/docs/view-count-banner\">https://docs.exponea.com/docs/view-count-banner</a></p>\n\n<p>You can find how to launch this use case <a href=\"https://docs.google.com/document/d/1gBYU-LLdEh7CNRhhVCmZFRWFZJs--1PR2B9YlE7oIYs/edit?usp=sharing\">in this walkthrough</a></p>\n","type":"html"}],"filters":{"attributes":[],"date_filter":{"absolute":false,"duration":{"count":30,"units":"days"},"enabled":false,"from_date":null,"offset":null,"to_date":null},"date_filter_override":false},"is_global_object":false,"name":"Readme","prevent_archivation":false,"tags":[],"used_project_ids":["f0ddd9fe-6751-11e9-aed1-0a580a203507"]},"id":"5e7a8247296d38ff5e6e0142","type":"dashboard"}],"version":"v1.164.11"}

🚧

It might not be possible to import the JSON file if your Exponea instance has not gone through the release 1.164 yet.

Launching the Social Proof Banner

  1. Go to the "Social Proof Trigger" tag under Data & Assets > Tag Manager and customize the part where you get product_id identifier from dataLayer
  1. If you would like to assure quality, you can first launch the web layer only for test users: "Social Proof Trigger" tag > Settings tab > Customer filter section where you can select your email address (if you’re signed in as a customer on your website) or your cookie ID.

  2. Launch the banner for all users

Updated 6 months ago


COVID-19 Social Proof Banner


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.


We rely on cookies

to optimize our communication and to enhance your customer experience. By clicking on the Accept and Close button, you agree to the collection of cookies. You can also adjust your preferences by clicking on Manage Preferences. For more information please see our Privacy policy.

Manage cookies
Accept & close

Cookies preferences

Accept & close
Back