Social Proof Marketing is a small popup that appears on the browser's screen. It displays how other customers are responding to your page. It boosts confidence in your new visitors/prospective customers to respond positively to your product.
There are many online businesses that provide this software to different companies and help them to boost their conversion rate. In this article, I am going to show how as a developer we can develop a simple code snippet to do this. The below consists of only the Frontend part. The backend part varies depending on the database of the project you have. You should know where to fetch the data and can post the data in the front end accordingly.
There is always a scope for improvement. Some of my suggestions are to improve the look by adding Font Awesome Icons like a tick mark, adding a close button at the right corner and the popup will be hidden as the user clicks on the close button. You can make changes in the Javascript part by changing the time interval in which the popup reappears. A popup can increase the conversion rate but at the same time, it can also annoy the visitor. Hence giving a long interval between the disappearance and reappearance when the user clicks a close button can help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.popup-box {
display: none;
position: fixed;
text-align: left;
width: 100%;
height: 15%;
z-index: 10;
bottom: 5%;
left: 0;
}
.popup-inner {
min-width: fit-content;
min-height: fit-content;
background: #f6f6f6;
border-radius: 6.25rem;
padding: 0.3rem;
margin: auto;
bottom: 5%;
position: absolute;
left: 0.125rem;
transform: translateX(-100%);
}
.popup-msg {
color: #696969;
padding: 1rem 0.5rem 0 0.5rem;
line-height: 0.6rem;
}
.name {
font-size: 1.2rem;
font-weight: bold;
}
.content2 {
padding-top: 0.2rem;
font-size: 1.1rem;
}
.fas {
color: #45b1f9;
}
.tick {
font-size: 1rem;
}
.mapImg {
width: 11rem;
height: 6rem;
border-radius: 6.25rem;
}
.column-7 {
width: 22%;
padding-left: 0.25rem;
padding-top: 0.25rem;
}
.column-5 {
width: 78%;
}
/* animation part */
@keyframes slide-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes slide-out {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@media (max-width: 1300px) {
html {
font-size: 80%;
}
}
@media (max-width: 768px) {
html {
font-size: 65%;
}
}
</style>
</head>
<body>
<div class="container-fluid popup-box px-0" id="hid" style="display: block; visibility: hidden">
<div class="row popup-inner">
<div class="column-7">
<img src="https://images.pexels.com/photos/269790/pexels-photo-269790.jpeg" alt="KY"
class="img-fluid mapImg">
</div>
<div class="column-5 popup-msg">
<p><span class="name">Sample Name from Sample Country</span></p>
<p class="content2">Recently purchased <span class="program">Sample Product</span></p>
<p class="tick"><span class="date">X minutes ago </span> <i class="fas fa-check-circle tick">
</i><i>Verified</i> </p>
</div>
<div class="column-small" id="close-btn"
style="position: absolute; right: 2rem; top: 0.625rem; cursor: pointer;">
<i class="fas fa-times"></i>
</div>
</div>
</div>
<script>
const main_popup = document.querySelector('.popup-inner')
function closeIt() {
main_popup.style.cssText = 'animation:slide-out .5s ease; animation-fill-mode: forwards;'
setTimeout(() => {
document.getElementById("hid").style.visibility = "hidden";
}, 500);
}
function showIt() {
document.getElementById("hid").style.visibility = "visible";
main_popup.style.cssText = 'animation:slide-in .5s ease; animation-fill-mode: forwards;'
}
var flag = true;
var interval;
var currentdate = new Date();
document.getElementById("close-btn").addEventListener("click", function() {
flag = false;
closeIt();
});
function afterBtn() {
setInterval(() => {
console.log(currentdate.getMinutes() + ":" + currentdate.getSeconds());
showIt();
setTimeout("closeIt()", 3000);
}, 40000);
}
interval = setInterval(() => {
if (flag === true) {
showIt();
setTimeout("closeIt()", 3000);
} else {
clearInterval(interval);
afterBtn();
}
},
12000);
</script>
</body>
</html>
Top comments (0)