> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ethioreview.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React embed

> ReviewWidget component for React applications.

## Install

```bash theme={null}
npm install @ethioreview/review-widget-react @ethioreview/review-widget-core
```

Import the default stylesheet in your app entry:

```tsx theme={null}
import "@ethioreview/review-widget-react/styles.css";
```

## Dashboard widget (recommended)

Use `widgetId` from **Integrations → Widgets**. The backend resolves layout, star filter, and limits from your dashboard config.

```tsx theme={null}
import { ReviewWidget } from "@ethioreview/review-widget-react";
import "@ethioreview/review-widget-react/styles.css";

export function Testimonials() {
  return (
    <ReviewWidget
      baseUrl="https://api.ethioreview.com"
      publicKey="pk_live_YOUR_KEY"
      widgetId="YOUR_WIDGET_ID"
    />
  );
}
```

`publishableKey` is an alias for `publicKey` (matches the dashboard field name).

## Environment variables

```bash theme={null}
VITE_ETHIOREVIEW_API_URL=https://api.ethioreview.com
VITE_ETHIOREVIEW_PUBLIC_KEY=pk_live_YOUR_KEY
VITE_ETHIOREVIEW_WIDGET_ID=YOUR_WIDGET_ID
```

```tsx theme={null}
import { createReviewWidgetConfig, ReviewWidget } from "@ethioreview/review-widget-react";

const config = createReviewWidgetConfig({
  baseUrl: import.meta.env.VITE_ETHIOREVIEW_API_URL,
  publicKey: import.meta.env.VITE_ETHIOREVIEW_PUBLIC_KEY,
  widgetId: import.meta.env.VITE_ETHIOREVIEW_WIDGET_ID,
});

export function Testimonials() {
  return <ReviewWidget {...config} />;
}
```

## Manual layout (no registry widget)

For custom pages without a dashboard widget record:

```tsx theme={null}
<ReviewWidget
  baseUrl="https://api.ethioreview.com"
  publicKey="pk_live_YOUR_KEY"
  businessId="YOUR_ORG_PROFILE_ID"
  layout="trust-score"
  minStars={4}
  limit={5}
/>
```

## Override dashboard layout

```tsx theme={null}
<ReviewWidget
  baseUrl="https://api.ethioreview.com"
  publicKey="pk_live_YOUR_KEY"
  widgetId="YOUR_WIDGET_ID"
  layout="hero-banner"
/>
```

## Copy embed snippet

```ts theme={null}
import { buildReactEmbedSnippet } from "@ethioreview/review-widget-core";

console.log(
  buildReactEmbedSnippet({
    baseUrl: "https://api.ethioreview.com",
    publicKey: "pk_live_YOUR_KEY",
    widgetId: "YOUR_WIDGET_ID",
    useEnvVars: true,
  }),
);
```

## Components

Browse the full [widget components](/integrations/widget/components) catalog, or open the [component gallery](/integrations/widget/component-gallery) for **live UI previews** of all 12 layouts.

| Export                     | Purpose                                              |
| -------------------------- | ---------------------------------------------------- |
| `ReviewWidget`             | Data-fetching container with auto or explicit layout |
| `createReviewWidgetConfig` | Typed config from env vars or dashboard values       |
| `HeroReviewBanner`         | Full-width hero with CTA                             |
| `TrustScoreSummary`        | Centered score summary                               |
| `RatingBreakdownCard`      | Per-star distribution bars                           |
| `VerticalStackedCard`      | Sidebar-style card                                   |
| `MicroBadge`               | Compact inline badge                                 |
| `InlineRatingPill`         | Minimal footer/nav pill                              |
| `ReviewCarouselCard`       | Featured review quotes grid                          |
| `ComparisonStrip`          | KPI stat strip                                       |
| `CircularScoreWidget`      | Radial score gauge                                   |
| `VerifiedBusinessCard`     | Trust badge card                                     |
| `FloatingBadge`            | Sticky corner badge                                  |
| `DarkPromoCard`            | High-contrast promo card                             |

Each review includes `reviewUrl` for navigation to EthioReview.

[Credentials →](/integrations/widget/credentials) · [Widget registry →](/integrations/widget/registry) · [Next.js SSR →](/sdks/review-widget/overview#nextjs)