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

Free Airbnb Review Widgets for Next.js / React

Embed Airbnb reviews on any Next.js / React page in 60 seconds — next/script component, paste, save. Verified-guest proof from Airbnb, on the site where travelers decide to book.

Build Your Airbnb Review Widget

Airbnb

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 Airbnb 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 Airbnb 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 Airbnb Reviews to Next.js / React

Connect your Airbnb 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 ComponentAirbnb: Reviews for homes

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

Embed Airbnb reviews on any Next.js / React page with a single copy-paste embed code. Verified-guest proof from Airbnb, on the site where travelers decide to book. Installs via the next/script component.

Where Airbnb reviews help most on Next.js / React

A custom-built hotel or rental site usually has its own booking flow, and that is where the Airbnb widget earns its place: on the property page above the date picker, and on the results page if you list several units.

Guests compare your direct price with Airbnb, and seeing the same reviews and the same score on your own page removes their reason to go back and book there. Keep it out of the payment step, where anything extra competes with the card form. Because you control the layout, give the widget a container with a fixed maximum width so it lines up with the date picker instead of stretching across the screen.

About Airbnb reviews in this widget

The Airbnb widget covers one listing, the airbnb.com/rooms page with the listing number, and shows its guest reviews. Above the cards sits the listing's rating and review count exactly as Airbnb displays them, so a 4.92 stays a 4.92 instead of a card average. Airbnb only lets a guest review after a completed stay booked on Airbnb, with 14 days from checkout to write it, so every card is from a real stay. Airbnb has no first-party review embed, and the builder needs the listing URL, not the host profile link that hosts tend to paste in.

Airbnb Widget on Next.js / React — FAQ

Is the BlooTrue Airbnb review widget free for Next.js / React?
Yes. BlooTrue is completely free to embed Airbnb 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 Airbnb 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 Airbnb 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.
I manage six Airbnb listings, can one widget cover all of them?
No. Each listing has its own airbnb.com/rooms page with its own reviews and its own rating, and the builder imports one listing per widget. On the free plan you get one widget, so one listing; paid plans remove the one-widget limit and refresh every listing's widget from Airbnb daily.
Why does my Airbnb widget say 4.92 when most of the cards show five stars?
Because the header mirrors the rating Airbnb publishes for the listing, to two decimals, together with its review count, and does no arithmetic of its own on the cards. Free widgets show only 4-star-and-up reviews as cards, so a computed average would drift from Airbnb's figure; keeping Airbnb's number avoids that.
A guest checked out yesterday, when will their Airbnb review show on my site?
Airbnb gives the guest 14 days after checkout to write the review, and it goes live on the listing once both sides have reviewed or the window closes. A paid plan refreshes the widget daily and picks it up next day; a free widget stays as it was on publish day, so yesterday's guest waits until you upgrade.

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

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

Free Airbnb Review Widget