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

# How do I add a review widget to my website?

> Click Install Widget, copy the code of your review widget and paste it into your website. Put the code in a box that has a width.

You add a review widget to your website in the same way as a social widget: copy the code, then paste it where you want the widget to show.

**1. Open the widget**

On your [dashboard](https://snapwidget.com/dashboard), click the review widget. The review widget builder opens.

**2. Copy the widget code**

Click **Install Widget**. In the **Install Widget** window, click **Copy Code**.

**3. Paste the code into your website**

Paste the code into your page at the place where you want the widget to show. Paste all the lines of the code. Most website builders have an HTML or embed block for this. See the guide for [your website builder](https://snapwidget.com/docs/install/html-website.md).

**4. Check your widget**

Open the page on your live site. If you still see the old page, reload it.

## What the code contains

The code has these parts:

* `<script src="https://snapwidget.com/js/snapwidget.js"></script>`: this script sets the height of the widget, so the widget is as tall as its reviews.
* An `<iframe>` with the class `snapwidget-widget`: this is the widget.

The **Avatars** layout adds one more line:

```html theme={null}
<script src="https://snapwidget.com/js/snapwidget-reviews.js"></script>
```

This script opens a review in a pop-up over your page when a visitor clicks a photo. Without this script, the review opens inside the widget. If you change the layout of a widget to or from **Avatars**, copy the code again and replace the old code on your website.

For all other changes, you do not need to change the code on your website. The widget shows your new settings and reviews on its own.

## Put the widget in a box that has a width

The widget fills the width of the box that you put it in. The box must have a width. In a flex row, or in a box that shrinks to fit its content, the widget has no width to fill. Then the browser makes the widget 300 px wide.

To fix this, give the box around the code a width. In a flex row, use `flex: 1`:

```html theme={null}
<div style="display: flex; gap: 24px;">
  <div style="flex: 1; min-width: 0;">
    <!-- Paste your SnapWidget code here -->
  </div>
</div>
```

In a box that shrinks to fit, set `width: 100%`:

```html theme={null}
<div style="width: 100%;">
  <!-- Paste your SnapWidget code here -->
</div>
```

## React, Vue and Next.js pages

The widget also works on pages that add it after the page loads, for example pages made with React, Vue or Next.js. Load the scripts of the code once on the page, for example in the `<head>`. Then add the `<iframe>` where you want the widget. When your page adds the widget, `snapwidget.js` finds it and sets its height.

## Dark pages

The widget works on pages with a dark background. On a dark page, set **Theme** to **Dark** in the widget builder. See [Review widget settings](https://snapwidget.com/docs/reviews/review-widget-settings.md).


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