> ## 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.

# Sample app

> Clone the EthioReview widget sample repo and test sandbox embeds end to end.

The official sample lives in its **own repository** (not inside the dashboard or widget monorepo):

**[https://github.com/ethioreview/er-widget-sample](https://github.com/ethioreview/er-widget-sample)**

It installs the published npm packages and renders React, Web Component, and iframe embeds against sandbox keys.

## Who this is for

Frontend developers and students validating CORS, layout, and click-through links before staging.

## Prerequisites

* `pk_test_*` publishable key from **Integrations → API keys**
* Sandbox `widgetId` from **Integrations → Review widgets** (or organization profile ID)
* `http://localhost:5173` on the API client's allowed origins

## Clone and run

```bash theme={null}
git clone https://github.com/ethioreview/er-widget-sample.git
cd er-widget-sample
cp .env.example .env
# set VITE_ETHIOREVIEW_PUBLIC_KEY and VITE_ETHIOREVIEW_WIDGET_ID
npm install
npm run dev
```

Open [http://localhost:5173](http://localhost:5173) — you should see the five synthetic sandbox testimonials in both the React and Web Component sections.

Dashboard checklist: [Sandbox test in the dashboard](/sandbox/dashboard-test.md) · [Create sandbox keys](/api-keys/create-sandbox.md).

## Option — plain HTML without cloning

```html theme={null}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>EthioReview sandbox</title>
    <script async src="https://cdn.ethioreview.com/widget.js"></script>
  </head>
  <body>
    <h1>Sandbox widget</h1>
    <review-widget
      data-base-url="https://api.ethioreview.com"
      data-public-key="pk_test_YOUR_KEY"
      data-widget-id="YOUR_SANDBOX_WIDGET_ID"
    ></review-widget>
  </body>
</html>
```

## Verify

You should see synthetic review cards. Each card links to a sandbox EthioReview review URL (paths under `/sandbox/organizations/...`).

> [!TIP]
>
> If the page is blank, open DevTools → Network and check for `403` on the widget reviews request. Fix [allowed origins](/api-keys/allowed-origins.md) first.

## One failure mode

**Mixing `pk_live_*` into the sample app** — you will either see live data on localhost (if the origin is allowlisted) or hard failures. Keep the sample app on `pk_test_*` until you intentionally promote.

## Next

[Web Component embed →](/integrations/widget/embed-web.md) · [Create production keys →](/api-keys/create-production.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.