Free Booking.com Review Widgets for Next.js / React

How to Add Booking.com 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.

Booking.com Widget on Next.js / React — FAQ

Is the BlooTrue Booking.com review widget free for Next.js / React?

Yes. BlooTrue is completely free to embed Booking.com 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 Booking.com 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 Booking.com 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.

My Booking.com score is 8.7, does the widget show that or convert it to stars?

The header carries the score as Booking.com reports it on its 10-point scale, so an 8.7 stays an 8.7, along with the review count from your property page. The widget does not average the reviews on your site to make its own number. Each card keeps the score the guest gave after their stay.

Can someone who never stayed at my hotel post a Booking.com review that ends up on my website?

No. Booking.com only invites a review once a stay booked through Booking.com is completed, so a person who never checked in has no way to submit one, and the widget takes only what is on your booking.com/hotel page. Your widget therefore holds reviews from completed stays and nothing else.

Booking.com already gives me a widget for my website, why would I need another one?

Because Booking.com's widget takes bookings and shows none of your guest reviews; Booking.com keeps those on its own marketplace. The BlooTrue embed is built from your property page URL and shows the guest reviews with your review score out of 10 in the header. The free plan adds a small BlooTrue badge; paid plans refresh daily and drop it.