Free Angi Review Widgets for Next.js / React

How to Add Angi Reviews to Next.js / React

One embed code, pasted into the next/script component.

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.

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.