Install widgets with an AI coding agent

If you work on your website in a code editor — React, Vue, Next.js, plain HTML, or a WordPress or Shopware theme — you don’t have to follow a click-by-click guide. We publish a skill that teaches your AI coding agent how ReviewForest widgets work. Install it once, then tell your agent what you want in plain language.

It works with Claude Code, Cursor, Codex, GitHub Copilot and dozens of other agents, because it follows the open Agent Skills standard.

Not working in a code editor?

If you manage your site through a builder like Wix, Squarespace, Jimdo or Strato, there’s nothing to install — pick your platform in the installation guides instead.

Two ways your agent can do it

The skill covers both, and your agent will ask which one you want.

	Widget embed (recommended)	Custom rendering via API
What happens	Your agent places our ready-made widget on the page	Your agent fetches your review data and builds its own components
Design	Configured in your ReviewForest dashboard	Fully yours, in your own framework
Loads our JavaScript	Yes	No
You need	A widget ID	An API key with the Website-Widgets scope

Start with the widget embed. Only go the API route if none of our 7 widgets fit the design you have in mind.

Step 1: Install the skill

Run this in your project folder:

npx skills add reviewforest/skills

It detects the agents you have installed and may ask where the skill should go, then writes it into that agent’s folder — .claude/skills/ for Claude Code, .agents/skills/ for Cursor and Codex, and so on. Because it lands in your project, you can commit it like anything else and your teammates get it too.

Want it available in every project on your machine instead? Add the global flag:

npx skills add reviewforest/skills --global

To pick up later changes, run npx skills update.

Or skip the install

If you’d rather not add a file to your repo, have the CLI generate the prompt instead:

npx skills use reviewforest/skills

That pulls the skill into a temporary folder and prints a prompt for you to paste into your agent. Add --agent claude-code (or another agent ID) and it launches the agent with that prompt already loaded.

Step 2: Get your widget ID

Create and customize a widget at app.reviewforest.org/website-widgets/add — pick the type, set the colors, choose which reviews to show. Already have one? Grab it from your installed widgets.

Copy the code it gives you. It looks like this:

Your widget code

<script src="https://widgets.reviewforest.org/main.js" defer></script>
<div class="reviewforest-app-YOUR-WIDGET-ID"></div>

You can hand your agent the whole snippet, or just the ID from the div — it can rebuild the rest.

Step 3: Tell your agent what you want

Now describe the result you’re after, and paste in the code from step 2:

Testimonials

Add my ReviewForest testimonials carousel to the homepage, below the hero section:

<script src="https://widgets.reviewforest.org/main.js" defer></script>
<div class="reviewforest-app-YOUR-WIDGET-ID"></div>

Floating badge

Add my ReviewForest review score badge to every page. It's configured as
a floating badge in the dashboard. Widget ID: YOUR-WIDGET-ID

Custom design

Build a reviews section for the About page using the ReviewForest API
instead of the embed widget. Match the styling of our existing cards.
API key (Website-Widgets scope only): YOUR-API-KEY

You don’t need to explain the technical details. The skill already tells your agent:

• What all 7 widget types are, and which ones need a wide container (the testimonials carousel and the forest page widget look cramped in a narrow column)
• That the <script> tag goes in once, no matter how many widgets you add, and each widget needs its own div
• That badges set to floating belong right before the closing </body> tag, while badges set to a fixed position go exactly where you want them on the page

Going custom: the API route

If our widgets can’t give you the design you want, your agent can pull the data and render it natively — React components, Vue templates, plain HTML, whatever your project uses. No ReviewForest widget JavaScript loads; your page fetches the data from our API directly.

1. Create an API key at app.reviewforest.org/integrations/public-api.

2. Select the Website-Widgets scope. This is the important part — see the note below.

3. Give the key to your agent and describe what you want to show.

Your agent can work with your overall score, your review count, your tree counts (total, from reviews, or by time period), your connected platforms with their individual scores, the reviews themselves, a feed of individual planted trees, and a link to your public forest page.

Use the right scope

The Website-Widgets scope is built for the browser: read-only, and limited to the four forests endpoints a widget needs. That’s why it’s fine for it to sit in your page source.

Still worth knowing: anyone who reads the key can fetch exactly the same data your page does. Create a dedicated key with only this scope for your website rather than reusing an existing one — a key with any other scope has no business in your frontend, and shouldn’t go into a chat with your agent either.

Check your work

Once your agent is done, load the page and confirm:

• The widget shows up, with your real reviews in it
• The <script src="https://widgets.reviewforest.org/main.js"> tag appears exactly once in the page source
• Wide widgets have room to breathe — if your carousel looks squeezed, it’s sitting in a container that’s too narrow
• The page still looks right on a phone

If nothing appears at all, the usual culprit is a Content Security Policy blocking external scripts. widgets.reviewforest.org needs to be allowed for both script-src and connect-src — otherwise either the script won’t load or it will load and get no data.

What’s next

• Widgets & GDPR — no cookies, anonymized IPs, plus sample privacy policy text
• Customize your widget’s colors and style — for tweaks you’d rather make in the dashboard
• Star ratings in Google search results — what the review score widget does for your search listing

The skill itself lives at github.com/reviewforest/skills if you want to read what your agent reads.