Skip to main content
BlooTrue
Start Free
no code neededunlimited viewsfree forever

Free Angi Review Widgets for Next.js / React

Embed Angi reviews on any Next.js / React page in 60 seconds — next/script component, paste, save. Home-services proof from Angi, on the site that closes the job.

Build Your Angi Review Widget

Angi

Key facts: 60-second install on Next.js / React · free forever, no plugin needed · installs via the next/script component · no view caps on any plan · daily review auto-sync on paid plans · schema.org markup on paid plans

Last updated ·by Mike Ragimov

SEO + AI schema · paid plans

Review schema markup, on paid plans

Paid widgets add schema.org Review and AggregateRating JSON-LD to the page they sit on, so search engines and AI answer engines can read your Angi reviews as structured data. Google does not show review stars for reviews a business shows about itself, so the gain is readability, not stars. The free plan shows the reviews without the schema. See how the schema works

Install guides

Also available for other platforms

Same widget, platform-specific install guide. Pick where your pages live.

Looking for a different review source? See all review widgets

Setting this up on a different platform? See all Angi review widgets · Want a different review platform on Next.js / React? All review widgets for Next.js / React

Review widgets for every platform

The same widget, built from whichever platform your reviews live on. Free plan on every one.

Reviews on more than one platform? Blend them into one widget

How to Add Angi Reviews to Next.js / React

Connect your Angi profile in BlooTrue, pick a style, then paste one embed code into the next/script component on Next.js / React and publish.

  1. 1

    In app/layout.tsx import Script from next/script and add the BlooTrue loader once inside the body, with strategy set to afterInteractive.

  2. 2

    Drop the widget div into any page or component where the reviews should appear.

  3. 3

    Change class to className on that div — the snippet is HTML and JSX will not accept class.

  4. 4

    Deploy. The loader watches the DOM, so the widget survives client-side navigation too.

A raw <script> tag pasted into a component will not execute, which is what next/script is for — and the snippet's class attribute has to become className or React drops it.

Where the Code Goes on Next.js / React

In a Next.js app the snippet splits in two. The loader goes in once, in app/layout.tsx, as a next/script component with strategy set to afterInteractive so it survives client-side navigation.

The div goes wherever the reviews belong, in any page or component. The one edit the pasted code needs is class becoming className, because the snippet is HTML and JSX will not accept class. The widget takes the width of its parent element, so a max-width wrapper is the usual way to size it.

If the widget does not show on Next.js / React

  • If nothing renders, check the div uses className rather than class — React silently drops the class attribute and the loader then finds nothing to mount.
  • A raw script tag pasted straight into a component will not execute. Use next/script with strategy afterInteractive instead.
  • If the widget shows on a hard refresh but not after in-app navigation, the loader was placed in a page rather than in the layout. Move it to app/layout.tsx so it mounts once for the whole app.

Still blank? Our help article Widget not showing covers the checks that apply on every site.

Official documentation: Next.js / React: Script ComponentAngi: Frequently Asked Questions about reviews

Angi Review Widget for Next.js / React — Free, No Plugin

Embed Angi reviews on any Next.js / React page with a single copy-paste embed code. Home-services proof from Angi, on the site that closes the job. Installs via the next/script component.

Where Angi reviews help most on Next.js / React

A custom site for a local business, or a brand with several branches, usually has a template per location page.

Render the Angi widget for that location on its own page, near the address, the hours and the call button, so each branch shows its own reviews and its own score. One widget for the whole brand on every location page would show the same reviews everywhere and hide the real difference between branches. On the home page, a compact badge is enough. Add the widget to the location template once rather than page by page, and every new branch page picks it up when it goes live.

About Angi reviews in this widget

An Angi widget brings the reviews homeowners left on your angi.com/companylist business profile onto your own site. The rating shown first is the profile's star average and review count as Angi shows them, so a half-star figure like 4.5 appears as published. Reviews come from verified homeowners rating a plumber, roofer, HVAC company or other home-services business, 1 to 5 stars. Angi, which now includes HomeAdvisor, has no first-party widget and keeps reviews on its directory to drive paid leads, so owners hunt in their Angi account for an embed option that does not exist.

Angi Widget on Next.js / React — FAQ

Is the BlooTrue Angi review widget free for Next.js / React?
Yes. BlooTrue is completely free to embed Angi reviews on Next.js / React. No plugin, no recurring fee, unlimited views. The free plan shows your reviews with BlooTrue branding in the footer; paid plans remove the branding.
How do I install the widget on Next.js / React?
In app/layout.tsx import Script from next/script and add the BlooTrue loader once inside the body, with strategy set to afterInteractive. Drop the widget div into any page or component where the reviews should appear. Change class to className on that div — the snippet is HTML and JSX will not accept class. Deploy. The loader watches the DOM, so the widget survives client-side navigation too.
Anything specific to Next.js / React worth knowing before I embed?
A raw <script> tag pasted into a component will not execute, which is what next/script is for — and the snippet's class attribute has to become className or React drops it.
Where should I place Angi reviews on Next.js / React for the biggest lift?
Under the hero on the landing page and beside the pricing CTA — on SaaS and agency sites the proof belongs at the decision point.
Do the reviews stay up to date automatically?
Paid plans auto-sync your Angi reviews daily, so the widget always shows your latest 5-star reviews without touching Next.js / React again. The free plan shows the reviews imported at setup.
Where do I find an embed code inside my Angi account?
There is none. Angi offers no first-party website widget or embed, so nothing in your Angi account produces a code. Copy your public profile URL, the angi.com/companylist address homeowners see, paste it into the BlooTrue builder and paste the one-line embed it gives you into your site. It takes about a minute, no plugin involved.
Will the widget show my Angi average of 4.5 stars or round it up?
It shows 4.5. The header copies the star average and review count from your Angi profile, where half-star averages are common, and the widget never recalculates the figure from the cards on your page. With the free plan the cards are the 4-star-and-up homeowner reviews present when you created the widget.
Do my Angi reviews on my website update when a homeowner leaves a new one?
Only on paid plans. A paid plan pulls from your Angi profile daily, so a homeowner's new review shows on your site within a day, and it removes the BlooTrue badge. A free widget is frozen at the reviews your profile had when you built it, so next month's review on angi.com waits until you upgrade.

Ready to Put Angi Reviews on Your Next.js / React Pages?

Free forever. No plugin. 100+ widget styles. Set up in 60 seconds.

Free Angi Review Widget