Google reviews on any HTML site
If you control your site's HTML, this is the shortest path there is: build the widget, paste two lines, done. There is no package to install, no build step, no API key to obtain and no server-side code to run — the script fetches your reviews from Zyff at page load and renders them into the container you placed. It works identically in a hand-written HTML file, a static site generator such as Hugo, Jekyll, Astro or Eleventy, a React or Next.js component, and any CMS with a raw HTML field. The two things worth reading below are where exactly the script tag goes, and what to add to your Content Security Policy if you run one.
Build and style the widget in the Google Reviews widget builder, then follow the any HTML site steps below to put it on your site.
How to embed Google reviews in HTML
Build your widget
In Zyff's Google Reviews builder, connect your Google Business Profile, choose a layout, set your filters and colors, then copy the embed code. It is one <div> with a data attribute and one <script> tag.
Put the container where the reviews should appear
Paste the div into your markup at the exact point in the page where you want the widget to render. It behaves like any block element, so wrap it in your own section or container to control width, padding and alignment.
Add the script tag
Keep the script tag with the div, or move it to just before the closing </body> tag if you prefer to group your scripts. Either works — the script waits for the container to exist rather than assuming a load order. Include it once per page even if you place several widgets.
Allow zyff.app if you run a Content Security Policy
A CSP that restricts script-src or connect-src will block the widget. Add https://www.zyff.app to both directives. If nothing renders and your browser console shows a CSP violation, this is the cause — the widget does not fail loudly on the page by design.
Load the page and check a phone width
Open the page in a browser to confirm it renders, then narrow the window to about 390px. The widget is responsive, but the section you placed it in might not be, and that is where layout problems usually come from.
Implementation notes
The script is order-independent
It waits for its container rather than assuming it has already parsed, so you can put the script tag inline next to the div or at the end of the body. One script tag covers every widget container on the page.
It renders into a shadow root
The widget's markup lives in an open shadow root, so your site's CSS cannot leak in and break it, and its CSS cannot leak out and break your site. The practical consequence is that your own stylesheet cannot restyle the widget — change its appearance in the builder instead.
React and Next.js need no wrapper
Render the container div in your JSX and add the script with a <Script> tag in Next.js, or a plain <script> in the document. Because the script targets the container by data attribute rather than holding a React reference, it survives re-renders without a useEffect dance.
Content Security Policy is the usual blocker
If you send a CSP header, script-src and connect-src both need to allow https://www.zyff.app. This is the most common reason a correctly pasted snippet renders nothing, and the only signal is a console message.
It mounts lazily and survives client-side routing
The widget waits until its container is within about 200px of the viewport before fetching anything, so a widget in your footer costs nothing until someone scrolls to it. It also watches the DOM for new containers, which is what makes it work in a React, Next.js or Astro app where the container appears after a route change.
Failure is silent on purpose
If the reviews cannot be fetched the widget empties its container and logs one warning to the console rather than drawing an error box. An error message on your live page is worse than nothing being there, so nothing is what visitors get.
Static site generators need no plugin
Hugo, Jekyll, Astro, Eleventy and the rest all pass raw HTML through to the output. Paste the snippet into your template or into a markdown file that permits inline HTML, and it ships with the build.
Frequently asked questions
Where exactly do I put the script tag?
Either right next to the container div or just before the closing </body> tag — both work. The script waits for its container rather than assuming it has already been parsed, so load order does not matter. Include the script once per page even if you are placing more than one widget container.
Does the Google reviews widget work with React or Next.js?
Yes. Render the container div in your component and load the script with next/script in Next.js, or a normal script tag elsewhere. The script finds its container by data attribute rather than holding a reference to a React node, so it keeps working across re-renders and route changes.
The snippet is pasted correctly but nothing renders. Why?
The most likely cause is a Content Security Policy blocking the request — add https://www.zyff.app to both script-src and connect-src. Open your browser console: a CSP violation is reported there, and so is the single warning the widget logs when it cannot fetch reviews. It deliberately does not draw an error box on your page.
Can I style the widget with my own CSS?
Not directly. It renders inside a shadow root, which is what prevents your stylesheet and the widget's from interfering with each other. Colors, fonts, type sizes and corner radius are all set in Zyff's builder — change them there and paste the new snippet. Your own CSS still controls the container's width, margin and placement.
Do I need jQuery or any other library?
No. The script has no dependencies and adds nothing to a global namespace you might be using. It is a single file that loads after your content and does not block rendering.
Can I put more than one reviews widget on the same page?
Yes. Place a container div wherever each widget should appear and include the script tag once. Each container is rendered independently, so you can show different layouts or different filters on the same page.