Share your Google reviews in your web app with angular

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.

Comments

[Axelle]

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

[amoghjain1988]

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!!

[vijayamurugan]

This is good one man. It saved my time

[Maneesh Rao]

Can I get the monthly count reviews from Google?

[Riyaz]

ALL_REVIEWS_LINK is not working.

[MartialNkwamen]

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 :)

[MartialNkwamen]

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?