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

# Web Component embed

> Embed EthioReview reviews on any HTML site with the review-widget custom element.

## Install

```bash theme={null}
npm install @ethioreview/review-widget-web-vanilla
```

Or load from CDN (when published):

```html theme={null}
<script async src="https://cdn.ethioreview.com/widget/v1/review-widget.js"></script>
```

## Register the element

```ts theme={null}
import { registerReviewWidget } from "@ethioreview/review-widget-web-vanilla";

registerReviewWidget();
```

## Dashboard widget (recommended)

Pass `data-widget-id` so the backend resolves layout and filters from the registry:

```html theme={null}
<review-widget
  data-base-url="https://api.ethioreview.com"
  data-public-key="pk_live_YOUR_KEY"
  data-widget-id="YOUR_WIDGET_ID"
></review-widget>
```

`data-publishable-key` is an alias for `data-public-key`.

## Manual organization embed

```html theme={null}
<review-widget
  data-base-url="https://api.ethioreview.com"
  data-public-key="pk_live_YOUR_KEY"
  data-business-id="YOUR_ORG_PROFILE_ID"
  data-limit="5"
></review-widget>
```

## Copy-paste snippet

```ts theme={null}
import { buildScriptEmbedSnippet } from "@ethioreview/review-widget-web-vanilla";

const html = buildScriptEmbedSnippet({
  scriptUrl: "https://cdn.ethioreview.com/widget/v1/review-widget.js",
  host: "https://api.ethioreview.com",
  publicKey: "pk_live_YOUR_KEY",
  widgetId: "YOUR_WIDGET_ID",
});
```

## Telemetry events

Listen for custom events on the element:

```js theme={null}
document.querySelector("review-widget")?.addEventListener("widget-telemetry", (e) => {
  console.log(e.detail);
});
```

Events: `onLoad`, `onError`, `onInteraction`.

## Requirements

* Publishable key from **Integrations → API Clients**
* Your site domain in the API client **allowedOrigins** list
* For `data-widget-id`: a matching widget in **Integrations → Widgets**

For styled layout components (hero banner, trust score, etc.), use the [React embed](/integrations/widget/embed-react) or compose [layout components](/integrations/widget/components) directly.

[Credentials →](/integrations/widget/credentials) · [Widget registry →](/integrations/widget/registry)