Google review in WordPress

Install two plugins:

Google Review Slider by Local map co.
Google Reviews Widget by Rich plugins

Now go to plugins>widget-google-reviews>static>css>google-review.css and replace all !important with '' (empty).

Add the following CSS code inside style.css

/*Google Review popup*/
.wp-gr .wp-google-content-inner {
display:none;
background:#FFF;
position:fixed;
right:0;
top:0;
z-index:1;
bottom:0;
width:220px;
border:1px solid #AAA;
padding:10px;
}
.wp-gr .wp-google-content-inner:before {
content:'x';
position:absolute;
top:0;
right:0;
font-size:24px;
padding:10px;
cursor:pointer;
color:#FFF;
text-shadow: 0 0 3px #000;
}
.wp-gr.wpac {
overflow: hidden;
min-height:80px;
white-space: nowrap;
}
.wp-google-right span {
white-space: nowrap;
}
.wp-gr .wp-google-powered {
display:none;
}

Add the following code inside foooter.php before body

<script>
var trigger = document.querySelector('.wp-gr .wp-google-place');
var span = document.querySelector('.wp-gr .wp-google-content-inner');
trigger.addEventListener('click', function (e) {
span.style.display = 'block';
});
span.addEventListener('click', function (e) {
/**
** 1. e.offsetX is horisontal distance starting from left top corent of .wp-google-content-inner
** 2. span.offsetWidth is the width of .wp-google-content-inner
**/
if ((e.offsetX > (span.offsetWidth-35)) && (e.offsetY < 35)) {
span.style.display = 'none';
} else {
span.style.display = 'block';
}
});
</script>

Create your sidebar where to put the slider(by Google Review Slider) and where to put the button for popup at right side (by Google Reviews Widget)

Labels: Google, Web development, WordPress

Edit This post