> For the complete documentation index, see [llms.txt](https://support.agentfire.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.agentfire.com/integrations/idx/how-to-get-realscout-search-widgets-on-your-website.md).

# How to Add a RealScout Widget to Your Website

Add a RealScout search bar or listings widget to a page on your AgentFire website: copy the code from RealScout and paste it into a Coder widget.

If you use RealScout, you can add its search bar, listings or home value widget to any page on your website. You copy the code from your RealScout account and paste it into a **Coder** widget on the page.

## Step 1: Copy the code from RealScout

{% stepper %}
{% step %}

### Open Widgets in RealScout

Log in to RealScout and go to **Marketing** > **Widgets**.
{% endstep %}

{% step %}

### Pick and customize your widget

Choose the widget you want, like **Simple Search**, **Advanced Search**, **Your Listings**, **Office Listings** or **Home Value**. Change the colors and filters under **Customize and Preview**.
{% endstep %}

{% step %}

### Copy both pieces of code

RealScout shows two boxes of code: one for the **head** and one for the **body**. Copy **both** and keep them together. The widget won't show up without both.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
Always copy the code from **your own** RealScout account. Code copied from an example or another agent's site shows that agent's listings, not yours.
{% endhint %}

## Step 2: Paste it into your page

{% stepper %}
{% step %}

### Add a Coder widget

Open the page in the editor. Add a **Spark Creator** block where you want the widget, then add a row, a column, and a **Coder** widget. See [Spark Creator](/spark-editor/spark-editor/articles-3827631-spark-editor-spark-creator.md) for how.
{% endstep %}

{% step %}

### Agree to the Coder notice

The first time you open a Coder widget, you'll see a notice about editing code. Click **I Agree**.

![The Use of the Coder notice with the I Agree button](https://2039430885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq65vhH2v4k5rpDOha9Vm%2Fuploads%2Fgit-blob-a98c673f7727261f3a9a75c44ebf768435601826%2Frs-2-coder-agree.png?alt=media)
{% endstep %}

{% step %}

### Paste both pieces of code

On the **HTML** tab, paste the head code first, then the body code right below it.

![RealScout code pasted into the Coder HTML tab](https://2039430885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq65vhH2v4k5rpDOha9Vm%2Fuploads%2Fgit-blob-84891e6ccd06b673bf70322afdc3a86bb852e44b%2Frs-3-coder-code.png?alt=media)
{% endstep %}

{% step %}

### Save and check your live page

Click **Save**, then open the page on your live website. The widget doesn't show inside the editor, only on the live page.

![A RealScout search bar on a live AgentFire page](https://2039430885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq65vhH2v4k5rpDOha9Vm%2Fuploads%2Fgit-blob-4d1d019d3c7226c4523bf660288be86b48b4763b%2Frs-4-live.png?alt=media)
{% endstep %}
{% endstepper %}

## Common Questions

<details>

<summary>The widget isn't showing.</summary>

Check the live page, not the editor. Then open the Coder and make sure both pieces of code from RealScout are there: the line that starts with `<script` and the widget code below it. If either is missing, copy both again from RealScout.

</details>

<details>

<summary>I changed my widget in RealScout, but my website didn't change.</summary>

Your website keeps the code you pasted. Copy both pieces again from RealScout and replace the code in the Coder.

</details>

<details>

<summary>The widget shows the wrong agent's or the wrong office's listings.</summary>

The code came from a different RealScout account or widget. Copy it fresh from your own account. For your whole office, use the **Office Listings** widget.

</details>

<details>

<summary>Can I put more than one RealScout widget on a page?</summary>

Yes. Add a Coder for each one. The `<script` line only needs to be on the page once.

</details>

<details>

<summary>Can RealScout change the badges or statuses on listings?</summary>

Those are set in RealScout, not on your website. Change the widget's filters in RealScout, then copy the new code.

</details>

<details>

<summary>Does adding RealScout replace my AgentFire IDX?</summary>

No. A RealScout widget only adds that one widget. Your other property searches, listing pages and saved searches stay as they are. If you want to switch fully to RealScout, email <support@agentfire.com> so we can plan it with you.

</details>

<details>

<summary>Can you add it for me?</summary>

Yes. Email <support@agentfire.com> with both pieces of code from RealScout and the page and spot where you want the widget.

</details>