There are many cases when you want to share the reviews of your clients. In this case I bring to you how to share google reviews in a simple way.
This is how it looks:
Or you can see this live demo
First Step
Go to your index.html in your angular project and add this script
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=
<HERE_YOUR_GOOGLE_PRIVATE_API_KEY>&libraries=places">
</script>
// without <>
You can obtain your Google Api Key from here GoogleApiKey
Second Step
Create a component for your's reviews in your project
reviews.component.ts
import { Component, AfterViewInit } from '@angular/core';
import { environment } from 'src/environments/environment';
declare const google: any;
@Component({
selector: 'app-reviews',
template: `
<div id="googleReviews"></div>
<section id='reviews'>
<div id="title">
<h4>Google Reviews</h4>
</div>
<div id="reviews" class="row">
<mat-card *ngFor="let review of reviews" class="card">
<mat-card-header>
<div class="avatar" mat-card-avatar>
<img src="{{ review.profile_photo_url }}" alt="Avatar" height="50"
width="50" />
</div>
<mat-card-title>{{ review.author_name }}</mat-card-title>
<h6>{{ review.relative_time_description }}</h6>
<div class="stars"><mat-icon *ngFor="let item of
createRange(review.rating)">grade</mat-icon></div>
</mat-card-header>
<mat-card-content>
<p>{{ review.text }}</p>
</mat-card-content>
</mat-card>
</div>
<div class="rowButton">
<a mat-raised-button href="${ALL_REVIEWS_LINK}" target="_blank">View all reviews</a>
</div>
</section>
`,
styleUrls: ['./reviews.component.scss']
})
export class ReviewsComponent implements AfterViewInit {
service;
public reviews = [];
constructor() {}
ngAfterViewInit() {
const request = {
placeId: GOOGLE_PLACE_ID,
fields: ['reviews']
};
this.service = new google.maps.places.PlacesService(document.getElementById('googleReviews'));
this.service.getDetails(request, this.callback);
}
public callback = (place, status) => {
if (status === google.maps.places.PlacesServiceStatus.OK) {
this.reviews = place.reviews.slice();
}
};
createRange(number) {
const items: number[] = [];
for (let i = 1; i <= number; i++) {
items.push(i);
}
return items;
}
}
In this example I put the html template in the .ts file, but if you want you can separate and put the template in the reviews.component.html
You can find you GOOGLE_PLACE_ID here: GooglePlaceId
ALL_REVIEWS_LINK is a link to see all the google reviews of your site. You can get this link in your place profile.
Here's some styles...
reviews.component.css
.row {
align-items: center;
flex-direction: column;
align-content: center;
display: flex;
flex: 1 1 auto;
}
.rowButton {
margin: 10px;
display: flex;
justify-content: center;
a {
background-color: #056571;
color: white;
font-family: 'Roboto', sans-serif;
font-size: 1.5em;
padding: 10px;
}
a:hover {
box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.3);
}
}
.card {
background-color: whitesmoke;
max-width: 250px;
height: 300px;
margin: 10px;
}
.mat-card {
box-shadow: none;
}
.card:hover {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}
mat-card-content {
height: 150px;
text-align: justify;
overflow-y: auto;
}
.avatar {
margin-bottom: 15px;
}
mat-card-title {
margin-bottom: 5px;
}
mat-card-header {
display: flex;
flex-direction: column;
align-items: center;
}
mat-icon {
color: #fad201;
width: 10px;
height: 10px;
margin: 5px;
padding: 5px;
margin-bottom: 15px;
}
h6 {
margin: 2px;
}
mat-card {
display: block;
position: relative;
font-size: 20px;
text-align: center;
text-decoration: none;
color: #262626;
margin: 0 10px;
transition: 0.5s;
}
mat-card span {
position: absolute;
transition: transform 0.5s;
}
#title {
display: flex;
flex-direction: row;
justify-content: center;
h4 {
text-align: center;
font-family: 'raisa', sans-serif;
font-size: 90px;
margin: 40px 0 40px 0;
color: black;
letter-spacing: 5px;
font-weight: bold;
}
}
And that's it. You can see now the last reviews of your clients.
Top comments (7)
hello, is this an outdated post or could I be missing something? when using your code I get a completely different result - the stars don't appear amongst other issues (ng-star-inserted not applied)
thank you for the awesome tutorial, though
the code as you said, I copy pasted and just moved the HTML doc to HTML file in angular component, but for some reason, reviews load extremely slowly. They load up after 20-30 seconds, on both localhost and production :-( can anyone guide me a bit as to what might I be doing wrong?
Thanks!!
This is good one man. It saved my time
Can I get the monthly count reviews from Google?
ALL_REVIEWS_LINK is not working.
Hello,
a solution to load the reviews faster.
you can create a function in OnInit which will click the element with the id ="leReviews" once the page is loaded :)
Hello,
i had the same problem like #amoghjain1988
They reviews load extremely slowly. They load up after 20-30 seconds, on both localhost and production.
can any one help?