Grwidget NPM | npm.io

GRWidgetExample

GRWidget

GRWidget is an always up-to-date Google review widget for your website using Google Maps Javascript API and Places API. This widget displays up to five Google Reviews from your non-search area Google Business location.

Why GRWidget?

Lightweight - One JS file and two CSS themes all under 15KB
Responsive - Shows three different columns layouts at different breakpoints
Themes - Choose from a light or dark theme
Zero Dependencies - Only CSS and JS
Customization - Control which reviews show

See a demo

Setup Instructions

Follow these steps to get your own widget running on your site:

Configure your Google Cloud project.
Create your API key
Add a website restriction to your API key. Click your API key in Google Cloud developer console and select HTTP referrers (web sites) under application restrictions. Add your site's URL to the web restriction section
Add two API restrictions to your API key. Click your API key in the Google Cloud developer console and select restrict key under API restrictions. Then add the following API's from the drop-down:

Maps JavaScript API
Places API

Install GRWidget:

npm install GRWidget

Insert the code below into your project's <body>:

<script src="src/index.js"></script>
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places&v=weekly"></script>
<div id="widget"></div>

Replace YOUR_API_KEY with your API key from the script you added above:

<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places&v=weekly"></script>

Copy GRWidget's src/ and images/ directory into your project
Choose either the light.css or dark.css theme and link it inside the <head> tag:

<link rel="stylesheet" type="text/css" href="src/themes/light/light.css" />

<link rel="stylesheet" type="text/css" href="src/themes/dark/dark.css" />

Find your Place ID and save it to your clipboard
Replace the demo Place ID in the index.js file that you placed in your src/ directory:

var request = {
  placeId: "ChIJldeDxyahVogRGKNE9zcaFt0",
  fields: ["name", "adr_address", "reviews", "rating", "user_ratings_total"],
  };

Customization Option

Edit this constant in index.js to show reviews only over that score:

const LOWEST_REVIEW_SCORE = 3;

@infinitebrahmanuniverse/nolb-grw @everything-registry/sub-chunk-1800

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago