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

Free OpenTable Review Widgets for Next.js / React

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

Build Your OpenTable Review Widget

OpenTable

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

OpenTable diner reviews in a Next.js app

If your Next.js restaurant site already carries OpenTable's reservation widget, it is tempting to assume it can show reviews too. It cannot. The review widget is a separate embed, and in a React codebase it needs two small adjustments before it renders at all.

How does the OpenTable review widget fit next to the reservation widget in Next.js?

As a separate piece. The BlooTrue loader goes once in app/layout.tsx through next/script with strategy afterInteractive, and the widget div sits in the same component as your booking module, with class changed to className.

Do not paste the snippet's script tag into the component itself; a raw script inside JSX never runs. If the reviews appear on a hard refresh but vanish after moving between pages, the loader was put in a page instead of the layout.

Do I redeploy my Next.js site when new OpenTable reviews arrive?

No. The reviews load from BlooTrue in the browser, so a paid plan's daily refresh reaches the page with no build or deploy. A free widget keeps the diner reviews it imported when you first published it.

This holds whether pages are generated statically or per request: the server renders the empty div and the widget fills it on the client. Caching your restaurant pages hard at the edge therefore never freezes the reviews.

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

Connect your OpenTable 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 ComponentOpenTable: How to deal with negative reviews at your restaurant

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

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

Where OpenTable reviews help most on Next.js / React

Restaurant groups with a custom site usually run several locations from one codebase. Each location page should carry the OpenTable widget for that location, not one widget for the whole group, because diners choose a specific room on a specific night and reviews for the other branch tell them nothing.

Place it next to the reservation module and above the menu. On a group landing page that lists every location, a compact badge on each location card works better than one full widget. Size its container to the reservation panel so the two line up, and render it on location pages only, not across the whole site.

About OpenTable reviews in this widget

Your OpenTable widget shows the diner reviews from your restaurant's OpenTable page, the one at opentable.com/r. The score heading the widget is the overall star rating and review count OpenTable reports for that page, rather than a number built from the cards. Every review comes from a diner who booked through OpenTable and honoured the reservation, so nobody who did not sit down at your tables can post one. OpenTable's own website widget only takes reservations; pasting it in the hope of seeing diner reviews gets you a booking form, since OpenTable has no review embed.

OpenTable Widget on Next.js / React — FAQ

Is the BlooTrue OpenTable review widget free for Next.js / React?
Yes. BlooTrue is completely free to embed OpenTable 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 OpenTable 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 OpenTable 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 already have the OpenTable reservation widget on my site, does it show reviews too?
No. OpenTable's reservation widget takes bookings and offers no way to show diner reviews. The BlooTrue widget is a separate one-line embed built from your opentable.com/r restaurant URL, showing the reviews diners left after honouring a reservation, with the OpenTable rating and review count in the header taken from your page.
Are OpenTable reviews worth embedding if diners can only review after a reservation?
Yes, because that rule is what sets OpenTable apart. OpenTable only opens the review form to a diner who honoured a reservation booked through OpenTable, so every card on your site comes from a person who ate at your restaurant on a known date. Sites that let anyone post cannot say that about their reviews.
How quickly does a new OpenTable review reach my website?
On a paid plan, by the next day: the widget refreshes from your OpenTable page every 24 hours, so a review written after last night's reservation appears the following day, and the BlooTrue badge is removed. On the free plan the diner reviews are the ones imported when you first published the widget; new ones do not arrive.

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

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

Free OpenTable Review Widget