Here is a clean, structured **Training Guide** based on the provided video transcript. All references to "ScrapRite," "ScrapRite software," and "SRU" have been updated to **ScrapRight**.

# ScrapRight Training Guide
**How to Add the Pricing Widget to Your Website**

This guide walks you through the steps to display your current material prices on your website using the ScrapRight pricing widget. Customers can view your low, high, and/or base prices (and optional images) directly on your site.

### Prerequisites
- You are logged in to your ScrapRight admin panel.
- You have materials already set up in the system with current pricing.
- (Optional) You have uploaded images to specific materials if you want to display pictures.

### Step-by-Step Instructions

1. **Navigate to Admin Configuration**
- Log in to your ScrapRight site.
- Go to **Admin Configuration**.

2. **Open the Synchronization Tab**
- On the left sidebar, click the **Synchronization** tab.

3. **Enable the Pricing Widget**
- Scroll all the way to the bottom of the page.
- Locate the **Sync Materials** checkbox.
- Check the **Sync Materials** box.
→ This will expand additional configuration options.

4. **Configure Display Options**
- Choose which price columns to show:
- **Show Low Price**
- **Show High Price**
- (Optional) **Show Image** — recommended if you have material photos uploaded.
- For most basic setups, enable **Show Low Price** and **Show High Price**.

5. **Enter Your Website Address**
- In the provided field, enter the full address of your website where the widget will appear.
- If running on a **local server**: Use your public IP address (with port forwarding if necessary), e.g., `http://123.456.78.90:port`.
- If you are a **cloud-hosted customer**: Use your normal domain, e.g., `https://www.yourscrapyard.com`.

6. **Save the Settings**
- Click **Save**.
- The page will reload automatically.

7. **View and Copy the Widget Code**
- After saving, scroll down to see a preview of the **Pricing Widget**.
- The widget displays:
- Material name
- Unit (e.g., per pound, per each, etc.)
- Low price, base price, high price (based on your selections)
- If **Show Image** is enabled and materials have pictures:
- Material images appear next to each entry.
- Quick navigation buttons (material group tabs) appear at the top for easier scrolling.

8. **Copy the HTML Snippet**
- Below or beside the preview, find the **HTML snippet** (code block).
- Click to copy the entire snippet.

9. **Add the Widget to Your Website**
- Paste the copied HTML snippet into the desired page/section of your website (using your website builder, CMS, or HTML editor).
- Save and publish the page.
- Load the page in a browser — customers will now see your up-to-date ScrapRight pricing.

### Bonus: Adding Images to Materials (Optional but Recommended)

To show photos in the widget:

1. Go to the **Materials** section in ScrapRight.
2. Click on any material to edit it.
3. Look for the small **picture/camera button** next to the material **Code** field.
4. Click the button to open the image selector.
5. Either:
- Choose an existing preloaded image, or
- Upload your own photo of the material.
6. Save the material.
7. Return to the Synchronization tab, enable **Show Image**, save again — the photo will now appear in the widget.

### Result
Your website visitors can now see real-time pricing straight from ScrapRight, helping them know what you pay before they arrive. The widget updates whenever you change prices in the system (after syncing).

Thanks for using ScrapRight!
For more tips and features, check our other training resources.

Website Pricing Widget