Add a Reviews Widget to Any Site in 2 Minutes Using AI

TL;DR

• You need exactly two things from the app after registration: a script tag and one line of HTML.
• The app also gives you a ready-made prompt to paste into your AI tool, so your AI builder does the placement for you.
• Works the same on Webflow, Framer, WordPress, Shopify, Next.js, Astro, and AI app builders.
• The widget renders inside a Shadow DOM, so it never fights your CSS or breaks your layout.

---

Adding customer reviews to your website used to require installing complex plugins, wrestling with API tokens, or hacking together custom database tables.

If you built your website using modern AI tools like Lovable, Bolt, v0, Cursor, or Claude Code, you do not need any of that complexity.

You can add a complete, verified review system to your site in about two minutes using two lines of markup and a single AI prompt.

The two lines you need

When you create a widget in fairstar.dev, the dashboard gives you two simple snippets:

<!-- 1. The lightweight widget loader script -->
<script src="https://fairstar.dev/widget.js" defer></script>

<!-- 2. The container element where your reviews will appear -->
<div class="fairstar-widget" data-fairstar-token="YOUR_PROJECT_TOKEN" style="min-height: 485px; display: block;"></div>

The script tag loads the lightweight edge engine asynchronously without slowing down your site. The div element tells the script exactly where to mount the review carousel on your page.

The AI prompt that does it for you

If you do not want to touch code or open an editor, copy the automated prompt generated in your dashboard and paste it into your AI builder.

Whether you paste this into Lovable, Bolt, Cursor, or Claude, the AI will place the script and container in the exact right spot in your project tree. Describing layout placement in plain English is faster, safer, and prevents accidental syntax errors.

Why one method works everywhere

Because this embed relies on standard Web Components, it does not care what tech stack you use.

You can paste this same markup into:

• AI platforms: Lovable, Bolt.new, v0.dev, Emergent.
• Visual site builders: Webflow, Framer, WordPress, Wix, Squarespace, Shopify.
• Modern code frameworks: Next.js, Astro, SvelteKit, Remix, Nuxt, or plain static HTML.

There is no framework lock-in, no npm dependencies to install, and no version conflicts.

Why it will not break your design

Many third-party widgets create layout headaches. They inject unstyled HTML that clashes with your global CSS, or they override your typography and break your color scheme.

We designed the widget to avoid these problems entirely:

1. Shadow DOM isolation. The review cards render inside an isolated Shadow DOM. Your site’s CSS cannot bleed in, and the widget styles cannot bleed out to mess up your headers or buttons.
2. Asynchronous loading. The script downloads in the background and will never block your page from rendering.
3. Reserved height container. The embed snippet includes an explicit min-height style. This holds space on the screen while the reviews fetch, completely eliminating Cumulative Layout Shift (CLS).

If you would rather place it manually

If you prefer editing your code directly, you only need two quick steps:

1. For a full review wall: Paste the script tag in your layout template, then paste the container div right above your footer or below your call-to-action block.
2. For an inline badge: Set data-type="badge" on the container div and place it inside your navbar or hero section. This renders a compact rating pill like ★ 4.3 (12 reviews) that opens a modal when clicked.

The 5-minute checklist after adding

Once your widget is in place, you will naturally want to test the entire flow to see it in action.

Good to know before testing: To maintain authentic social proof, customer reviews cannot be deleted from the dashboard (they can only be hidden). However, you can test safely without permanently altering your stats: set your display name to test when submitting, and the dashboard will unlock a delete button so you can remove it afterward.

1. Leave a test review. Visit your live site, open the widget, and submit a review with your display name set to test.
2. Check your dashboard. Confirm the new review arrives in your Inbox tab.
3. Approve and verify live. Click approve, then refresh your site to see your review and updated star rating appear live on your page.
4. Clean up. Head back to the dashboard and click the trash icon next to your test review to delete it completely.
5. Done. Your widget is fully verified and ready for real customer feedback.