SimpleReviewKit Setup: Show Google Reviews on Your Site

The code takes about 5 minutes. If you do not have a Google Cloud account with billing yet, creating one for the first time can take longer. This guide shows the Lite setup: your own Google key, up to 5 live reviews. (Pro mode, with all reviews, is planned and needs Google's approval.)

On this page: Before you start · Step 1: Get a Google key · Step 2: Find your Place ID · Step 3: Add the script · Step 4: Add the widget · Step 5: Check it · HTML, PHP and other sites · Frameworks · Troubleshooting · Options

Before you start

You need:

A Google account and a Google Cloud project with billing enabled. Google bills by usage and gives a free monthly allowance, so a small site often pays little, but billing must be switched on.
Your business's listing on Google Maps with reviews.
Access to edit your website's HTML or components.

SimpleReviewKit is a prototype. It is not affiliated with or endorsed by Google. Google and Google Maps are trademarks of Google LLC.

Step 1: Get a Google key

Time: about 2 minutes once billing is set up.

Open Google Maps Platform: Get started. Create or choose a project, add billing, and enable Places API (New). Google's own walkthrough is here.
Create an API key on the Credentials page.
Restrict the key (next section), then copy it. It starts with AIza.

Restrict the key (important)

Anyone can read the key in your page source, so the restrictions are what keep it safe. On the key's settings page:

Application restrictions: choose Websites, then add your full address including https://, for example https://example.com and https://*.example.com.
API restrictions: allow only Places API (New).
More detail: API key security best practices.

Step 2: Find your Place ID

Time: 30 seconds.

Use Google's Place ID guide and finder, search for your business and copy the ID. It starts with ChIJ.

Step 3: Add the script

Time: 30 seconds.

Download the widget file (about 16 KB, about 6 KB compressed; right-click and choose Save link as), save it as simple-review-kit.js in your website's public files, and load it on the page:

<script src="/simple-review-kit.js" defer></script>

We recommend hosting the file yourself instead of linking to ours, so your site does not depend on another server and the version stays fixed. The npm package is not published yet.

Time: 1 minute.

Put this where you want the reviews to appear:

<simple-review-kit
  place-id="YOUR_PLACE_ID"
  api-key="YOUR_RESTRICTED_KEY"
  layout="grid"
  theme="auto"
></simple-review-kit>

Save and open the page. The reviews load when you scroll near them.

Step 5: Check it and protect your bill

Time: 1 minute.

You see up to 5 reviews, the star rating, "Reviews from Google" and a "View on Google Maps" link.
In the Google Cloud Console your key shows both restrictions (website and Places API only).
You created a budget alert so a surprise cannot grow. Google bills the reviews data in a higher-priced tier, and every page load that reaches the widget makes a call. Check the current free allowance on Google's pricing page.

Because loading waits until the widget is near the screen, visitors who never scroll to it cost you nothing. Add loading="eager" if you want it to fetch immediately.

Plain HTML, PHP and similar websites

No build tools, npm or framework needed. This works on any site that lets you edit a page and upload a file: plain HTML, PHP, Laravel, CodeIgniter, ASP.NET, Java/JSP, Ruby on Rails, Django, Flask, Hugo, Jekyll and most website builders that allow custom code.

1. Upload the file

Upload simple-review-kit.js (Step 3) to a public folder of your site, for example /js/ or /assets/. Note its address, such as /js/simple-review-kit.js.

2. A complete HTML page

This is a whole working page. Replace the two placeholders and the script path:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Customer reviews</title>
  <script src="/js/simple-review-kit.js" defer></script>
</head>
<body>
  <h2>What our customers say</h2>

  <simple-review-kit
    place-id="YOUR_PLACE_ID"
    api-key="YOUR_RESTRICTED_KEY"
    layout="grid"
    theme="light"
  ></simple-review-kit>
</body>
</html>

The script can also go just before </body>. Keep defer if it is in the <head>. One script tag per page is enough, even with several widgets.

3. PHP (and other server languages)

Put the script tag once in your shared header or layout file, and the widget tag where the reviews should appear. In plain PHP:

<?php // header.php, loaded on every page ?>
<script src="/js/simple-review-kit.js" defer></script>

<?php // reviews.php, include it wherever you want the reviews ?>
<?php $placeId = "YOUR_PLACE_ID"; $key = getenv("GOOGLE_PLACES_KEY"); ?>
<simple-review-kit
  place-id="<?= htmlspecialchars($placeId, ENT_QUOTES) ?>"
  api-key="<?= htmlspecialchars($key, ENT_QUOTES) ?>"
  layout="grid"
  theme="auto"
></simple-review-kit>

Then use <?php include "reviews.php"; ?> on the pages that need it. The same idea works everywhere: Laravel Blade (@include('reviews')), Twig, Django templates, Rails partials, Razor and so on. Put the tag in a shared partial and the script in the base layout.

Reading the key from an environment variable or config file just keeps it out of your code repository. The browser still receives it, so the website restriction from Step 1 is what protects it. The widget calls Google directly from the visitor's browser, so you do not need any PHP code to fetch reviews.

4. WordPress without a plugin

Upload simple-review-kit.js to your theme folder, then add this to the theme's functions.php (or a code-snippets plugin):

add_action('wp_enqueue_scripts', function () {
  wp_enqueue_script('simple-review-kit', get_stylesheet_directory_uri() . '/simple-review-kit.js', [], '0.2.0', ['strategy' => 'defer', 'in_footer' => true]);
});

add_shortcode('google_reviews', function ($atts) {
  $a = shortcode_atts(['layout' => 'grid', 'theme' => 'auto', 'max' => ''], $atts);
  return '<simple-review-kit place-id="YOUR_PLACE_ID" api-key="YOUR_RESTRICTED_KEY"'
    . ' layout="' . esc_attr($a['layout']) . '" theme="' . esc_attr($a['theme']) . '"'
    . ($a['max'] !== '' ? ' max="' . esc_attr($a['max']) . '"' : '')
    . '></simple-review-kit>';
});

Now type [google_reviews layout="grid"] in any page or post. If you use a page builder, an HTML or shortcode block works the same way.

5. Website builders (Wix, Squarespace, Webflow, Shopify and others)

Use the custom code / embed HTML feature. Two cases:

You can upload files: upload the script and use Step 2 as shown.
You cannot upload files: host simple-review-kit.js on any static host you control (for example a subdomain, S3 bucket or CDN) and use its full https:// address in the script tag. Then add the CSP rule below if your site sends one.

Some plans block custom code. If the embed shows nothing, check your plan allows script embeds.

Show your own testimonials in plain HTML

You do not need the Google keys to show testimonials you collected yourself. Leave out place-id and api-key and give the widget a list. Only use reviews you have permission to show, and do not label them as Google reviews.

<simple-review-kit id="reviews" layout="grid" heading="What clients say"></simple-review-kit>
<script>
  document.getElementById("reviews").reviews = [
    { author: "Asha Patel", rating: 5, date: "2026-10-11", text: "Fast, clear and on budget." },
    { author: "Ravi Shah", rating: 4, date: "2026-09-28", text: "Easy to work with." }
  ];
</script>

In PHP you can fill the list from your database with json_encode:

<script>
  document.getElementById("reviews").reviews = <?= json_encode($rows, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>;
</script>

The widget shows review text as plain text, never as HTML.

Use it in your framework

The widget is a standard web component, so it works anywhere. Load the file once, then use the tag.

Next.js (App Router)

"use client";
import { useEffect } from "react";

export default function Reviews() {
  useEffect(() => {
    const s = document.createElement("script");
    s.src = "/simple-review-kit.js";
    document.head.append(s);
  }, []);
  return <simple-review-kit place-id="YOUR_PLACE_ID" api-key={process.env.NEXT_PUBLIC_GOOGLE_PLACES_KEY} layout="grid" theme="auto" />;
}

Keep the key in NEXT_PUBLIC_GOOGLE_PLACES_KEY. It is public by design; the website restriction from Step 1 is what protects it.

React (Vite)

useEffect(() => {
  const s = document.createElement("script");
  s.src = "/simple-review-kit.js";
  document.head.append(s);
}, []);

return <simple-review-kit place-id="YOUR_PLACE_ID" api-key={import.meta.env.VITE_GOOGLE_PLACES_KEY} layout="grid" />;

Vue 3

Tell Vue the tag is a custom element, in main.js:

app.config.compilerOptions.isCustomElement = (tag) => tag === "simple-review-kit";

Then in a component: <simple-review-kit place-id="YOUR_PLACE_ID" :api-key="key" layout="grid" />. Add the script tag to index.html.

Angular

Add schemas: [CUSTOM_ELEMENTS_SCHEMA] to your component, load the script in index.html, and use the tag in the template.

Svelte and Astro

Load the script in your main layout and use the tag in any component. Use import.meta.env.VITE_... (Svelte) or import.meta.env.PUBLIC_... (Astro) for the key.

WordPress

Upload the file to your theme and register a small shortcode. A ready-to-copy snippet is in the package examples. A proper plugin is planned.

Content Security Policy

If your site sends a CSP, allow https://places.googleapis.com in connect-src and https://*.googleusercontent.com in img-src.

Troubleshooting

Nothing appears.

Scroll to the widget, or add loading="eager".
Open the browser console. The widget reports an error event named srk-error.
Check the key restrictions: the website address must match exactly, including https:// and the subdomain.

"Reviews are not available right now" / error 403.

Places API (New) is not enabled for the project, billing is off, or the website restriction does not match your address.

Only 5 reviews show.

That is Google's limit for this API. Showing all reviews needs Pro mode (planned).

Photos are missing.

Your CSP may block googleusercontent.com. See above.

My bill is higher than expected.

Add loading="eager" only where needed, put the widget lower on the page, set a budget alert, and consider fewer pages with the widget.

Can I store the reviews or use them in search-result stars?

No. Google's terms do not allow storing Places API review text, and Google does not give review stars in search for a business's own site, even through widgets. SimpleReviewKit helps visitors already on your site trust you.

Options

layout: list, grid, carousel or badge (a compact score).
theme: light, dark or auto.
max: how many reviews to show (Google Lite mode gives up to 5; your own list can be longer).
min-rating: hide reviews below this many stars.
heading: your own title.
language: for example en or hi.
write-review="off": hide the "Write a review" link.
page-size: grid only. How many cards show first and with each Load More click (default 8, or all).
load-more-label: grid only. The text on the Load More button.
powered-by: grid only. off hides the "Powered by" credit, or write your own text.
header="off": hide the title and score row.
loading="eager": fetch immediately instead of waiting until the widget is near the screen.

Style it with CSS variables on the tag: --srk-bg, --srk-card, --srk-text, --srk-muted, --srk-border, --srk-accent, --srk-link, --srk-radius and --srk-font.

You can also show your own testimonials in the same design by setting the reviews property in JavaScript. Only show reviews you have the right to show, and never label invented text as Google reviews.

SimpleReviewKit setup in 5 minutes