# Lesson 8.3 - Configure a preview URL

Add a preview button to the Product model content editor sidebar so you can preview draft product pages before publishing.

In this lesson, you will configure a preview URL for the `Product` model. Once configured, every product entry in the content editor displays an **Open live preview** button in its sidebar. Clicking it opens a preview of that product page in your local frontend using the draft content token configured in lesson 8.2.

The preview URL uses a secret key to prevent unauthorized access to draft content. Only requests that include the correct secret can trigger a draft preview. Generate a strong secret and do not commit it to version control.

## Configure the preview URL

1. Navigate to the **Schema** and select the **Product** model.
2. Click the **Sidebar** tab.
3. Select the **Preview** widget.
4. Provide the following details:
    - **Preview Name**: Product preview
    - **URL template**: `http://localhost:3000/api/draft?slug={productSlug}&model=products&secret=YOUR_SECRET_HERE`

    `{productSlug}` is handlebars notation. Hygraph replaces it with the `productSlug` field value of the entry being previewed. The API ID `productSlug` was set when you created the Product Slug field in lesson 1.2. 

5. Click **Save**.

## Add the preview secret

1. Generate a secret key using a key generator of your choice. Use a strong random string.
2. Replace `YOUR_SECRET_HERE` in the URL template with the generated secret.
3. Open `.env.local` and add the secret as `HYGRAPH_PREVIEW_SECRET`:

    ```bash
    HYGRAPH_PREVIEW_SECRET=YOUR_SECRET_HERE
    ```

4. Restart the local development server to load the new environment variable:

    ```bash
    npm run dev
    ```

## Your complete `.env.local`

At this point, all three environment variables should be populated. Your `.env.local` file should look like this:

```bash
HYGRAPH_ENDPOINT=YOUR_CONTENT_API_ENDPOINT_HERE
HYGRAPH_DEV_AUTH_TOKEN=YOUR_DRAFT_TOKEN_HERE
HYGRAPH_PREVIEW_SECRET=YOUR_SECRET_HERE
```

If any of the three are missing or incorrect, the preview will not work.

## Verify the preview URL

1. Navigate to the **Content editor** and open any product entry.
2. Click **Open live preview**. 

    The product page should open in a new browser tab at `http://localhost:3000` showing the draft version of that product.

## What's next

[Lesson 9 - Webhooks](https://hygraph.com/docs/getting-started/tutorial/tutorial-webhooks-overview)

Or, go to the [Tutorial overview](https://hygraph.com/docs/getting-started/tutorial/tutorial-overview) for the full lesson list.