Getting Started

This guide explains how to customize RF widgets on your website using a JavaScript configuration script. This script can be embedded in the header section of your site, whether you're using CMS platforms like Wix, Squarespace, or others. Below are steps and explanations for adjusting various widget settings.

If you encounter any discrepancies or need additional customization in the future, make sure to revisit the guide or check for the latest updates.

1. Access the Script in Your Website's Head

Access script provided to the <head> section of your website.
Refer to your platform’s documentation on how to insert custom code snippets into the <head> section

Refer to your platform’s documentation on how to insert custom code snippets into the <head> section.

the configuration code should run on all pages and with the highest priority available

Wix - Squarespace - GHL

2. Understanding the Widget Configuration

The script configures various widgets such as FeaturedListings, Listings, Compare, PropertyDetails, SavedListings and SearchBar

widgets configuration script

<script src="https://static.realtyfeed.com/index.js"></script>
<script>
window.rfWidgets = window.rfWidgets || {};
window.rfWidgets.config = {
  apiKey: "YOUR_API_KEY",
  clientID: "YOUR_CLIENT_ID",
  walkScoreKey: "WALKSCORE_API_KEY",
  locationKey: "GOOGLE_API_KEY",
  mapKey: "GOOGLE_API_KEY",
  listingsPage: "/listings",
  propertyDetailsPage: "/listing",
  comparePage: "/compare",
  "featured-listings-1": {
    widgetType: "FeaturedListings",
    filters: {
      sortBy: { label: "Latest", value: "OriginalEntryTimestamp desc" },
      city: "",
      propertyType: {
        Residential: [],
        Commercial: [],
      },
      priceRange: [],
      listOfficeName: "",
      subDivision: "",
    },
    carousel: {
      enabled: true,
      infinite: true,
      dots: true,
      arrows: true,
      autoplay: true,
      autoplaySpeed: 3000,
    },
    total: 8,
    propertyCard: {
      sqftType: "livingArea",
      share: true,
      compare: true,
      save: true,
      beds: true,
      baths: true,
      sqft: true,
      listOfficeName: true,
      subDivision: true,
    },
    styles: {
      primaryColor: "358, 69.4%, 55.2%",
    },
  },
  "searchbar-1": {
    widgetType: "SearchBar",
    styles: {
      height: "48px",
    },
  },
  "listings-1": {
    widgetType: "Listings",
    total: 12,
    mapZoom: 10,
    mapCenter: {
      lat: 40.7128,
      lng: -74.006,
    },
    propertyCard: {
      sqftType: "livingArea",
      share: true,
      compare: true,
      save: true,
      beds: true,
      baths: true,
      sqft: true,
    },
    filters: {
      city: "",
      status: {
        enabled: true,
      },
      listingsType: {
        enabled: true,
      },
      propertyType: {
        enabled: true,
        propertyTypeEditable: true,
        propertyTypeValues: {
          Residential: [],
          Commercial: [],
        },
      },
      priceRange: {
        enabled: true,
        priceRangeValue: [],
      },
      sizeRange: {
        type: ["livingArea", "buildingArea"],
        enabled: true,
      },
      bedBath: {
        enabled: true,
      },
      listOfficeName: "",
      subDivision: "",
    },
    styles: {
      defaultView: "",
      primaryColor: "358, 69.4%, 55.2%",
    },
  },
  "property-details-1": {
    widgetType: "PropertyDetails",
    mortgageSection: true,
    contactSection: true,
    agentSection: true,
    walkScore: true,
    greatSchools: true,
    details: {
      schools: true,
      beds: true,
      baths: true,
      livingArea: true,
      lotArea: true,
      buildingArea: true,
      garage: true,
      mlsArea: true,
      subDivision: true,
      driveIn: true,
      truckLevel: true,
      clearHeight: true,
    },
    overview: ["beds", "baths", "garage", "livingArea", "lotArea"],
    propertyCard: {
      sqftType: "livingArea",
      share: false,
      compare: false,
      save: false,
      beds: true,
      baths: true,
      sqft: true,
    },
    styles: {
      primaryColor: "358, 69.4%, 55.2%",
    },
  },
  "compare-1": {
    widgetType: "Compare",
    styles: {
      primaryColor: "358, 69.4%, 55.2%",
    },
  },
  "saved-listings-1": {
    widgetType: "SavedListings",
    propertyCard: {
      sqftType: "livingArea",
      share: true,
      compare: true,
      save: true,
      beds: true,
      baths: true,
      sqft: true,
    },
    styles: {
      primaryColor: "358, 69.4%, 55.2%",
    },
  },
};
</script>

Avoid Changing Configs Structure:

Any changes to the configuration code structure should be avoided to ensure consistency and functionality

Widget Keys Are Unique:

Each widget in the script is identified by a unique key (e.g., featured-listings-1, searchbar-1). These keys are crucial for correctly loading the widget configurations on your site.

Do Not Just Change the Widget Key:

Altering the key without making corresponding changes in the widget html element will prevent the widget configuration from loading.

If You Must Change the Widget Key:

Update the HTML Element: If you change a widget key in the script, ensure you also update the key in the HTML element on the corresponding page of your site. The key in the script and the HTML element must match exactly.
Adjusting for Multiple Widgets: When dealing with multiple instances of a widget, make sure each instance has a unique key and that the HTML elements on your pages use these correct keys.

Handling Multiple Instances of the Same Widget:

If you have multiple instances of the same type of widget (e.g., multiple Listings widgets), the widget keys will be slightly different (e.g., "listings-1", "listings-2"). For each added widget, make sure to add a new key with the corresponding configs to the configuration script.
The only widget that can be placed multiple times on the same page is the FeaturedListings. Avoid adding multiple instances of any other widgets on a single page. However, you can create as many instances of other widgets as you like for different pages. For example, you can have multiple Listings pages, but only one Listings widget should be used per page

3. Customizing Widget Parameters

API Keys and Client Information:
- ```
apiKey: "YOUR_API_KEY",
clientID: "YOUR_CLIENT_ID",
walkScoreKey: "WALKSCORE_API_KEY",
locationKey: "GOOGLE_API_KEY",
mapKey: "GOOGLE_API_KEY",
listingsPage: "/listings",
propertyDetailsPage: "/listing",
comparePage: "/compare",
```
- apiKey, clientID, mapKey, locationKey are necessary for API access. Do not change these values unless instructed. you can receive the values for apiKey and clientID from Navigating to Realtyfeed Dashboard > Api Key Settings
- walkScoreKey is optional . if no key provided this section is removed from the property details page.
- Set the listingsPage value to the address of the page where your corresponding widget is placed. If you have multiple instances of the widget, set this value to the most important one, as this value will be used by other widgets for navigation between widgets.
- Do step above for propertyDetailsPage and comparePage

text	A sequence of characters used to represent words or strings. Must be inside quotation marks, like "example text"
boolean	A data type with only two possible values: `true` or `false`. This type is used for enabling or disabling a feature
number	A numerical value that can represent whole numbers or decimals

3-1. FeaturedListings ("featured-listings-1")

widgetType “FeaturedListings” . represent widget type
filters
- sortBy
  - label : "Latest"
  - value : "OriginalEntryTimestamp desc" . sorts the listings by the latest entries. Do not change this setting unless you are familiar with RESO standards
- city : “text” . default search value for the city .
propertyType
- Residential: [ ] . values can be [ "House","Apartment","Semi-Detached","Townhouse","Condo","Multi family","Manufactured","Co-op","Land","Ranch/Farm","Other" ]
- Commercial: [ ] . values can be [ "Retail","Multi Family","Office","Industrial","Hospitality","Mixed Use","Business","WareHouse","Land","Other" ]
priceRange : [“text”,”text”] . empty by default; you can specify a price range to filter listings.
listOfficeName : “text” . filter by the name of the listing office (empty by default - Case sensitive ).
subDivision : “text” . filter by the name of the sub division (empty by default).
carousel:
- enabled : boolean . enable or disable the carousel feature
- infinite : boolean, enabling infinite scrolling in the carousel
- dots: boolean, showing navigation dots
- arrows: boolean, showing navigation arrows
- autoplay:boolean enable or disable the autoplay
- autoplaySpeed: number .default to 3000
total: number . total parameter determines the total number of listing cards to display. If the carousel feature is enabled, the maximum number of cards visible at any given time will be 4 at the maximum width. However, the total number of listings shown will still depend on the value set for total.
propertyCard:
- sqftType: ”text” . can be any value of "livingArea" | "buildingArea" | "lotArea",
- share: boolean . enable or disable share button
- compare: boolean . enable or disable compare button
- save: boolean . enable or disable save listings button
- beds: boolean . enable or disable bed value
- baths: boolean . enable or disable bath value
- sqft: boolean . enable or disable size value
- listOfficeName: boolean . enable or disable list office value
- subDivision: boolean . enable or disable sub division value
styles:
- primaryColor: "358, 69.4%, 55.2%" . (HSL format).

3-2. SearchBar("searchbar-1")

widgetType: “SearchBar” . represent widget type
styles:
- height: "48px" . Height of search bar input.

3-3. Listings("listings-1")

widgetType: “Listings”
total: number . total listings cards to show
mapZoom : map default zoom on page load
mapCenter: map default center on page load
- lat : number ,coordinates of map default center
- lng : number . coordinates of map default center
propertyCard:
- sqftType:”text” . can be any value of "livingArea" | "buildingArea" | "lotArea",
- share: boolean . enable or disable share button
- compare: boolean . enable or disable compare button
- save: boolean . enable or disable save listings button
- beds: boolean . enable or disable bed value
- baths: boolean . enable or disable bath value
- sqft: boolean . enable or disable size value
filters:
- city: “text”. default search value for the city. If left empty, listings can be from any city
- listingsType:
  - enabled : boolean . enabled or disable listings type filter dropdown
- propertyType:
  - enabled: boolean . enable or disable
  - propertyTypeEditable: boolean . set if property type filter be editable by user or not
  - propertyTypeValues:
    - Residential: [ ] . values can be [ "House","Apartment","Semi-Detached","Townhouse","Condo","Multi family","Manufactured","Co-op","Land","Ranch/Farm","Other" ]
    - Commercial: [ ] . values can be [ "Retail","Multi Family","Office","Industrial","Hospitality","Mixed Use","Business","WareHouse","Land","Other" ]
- priceRange:
  - enabled : boolean . enable or disable
  - priceRangeValue : [“text”,”text”] . empty by default; you can specify a price range to filter listings.
- sizeRange:
  - enabled: boolean . enable or disable
  - type: [”text”] . can be any value of ["livingArea","buildingArea","lotArea"] . note that this can have multiple value to show
- bedBath:
  - enabled: boolean . enable or disable
- listOfficeName: “text” . filter by the name of the listing office (empty by default - Case sensitive ).
- subDivision: “text” . filter by the name of the sub division (empty by default).
styles:
- defaultView: “text” . set default view on page load. can be any value of "map" | "grid" | "list" . if no value is provided shows map mode by default
- primaryColor: "358, 69.4%, 55.2%" . (HSL format).

3-4. PropertyDetails("property-details-1")

widgetType: “PropertyDetails”
mortgageSection: boolean . enable or disable mortgage calculator section
contactSection: boolean . enable or disable contact us section
agentSection: boolean . enable or disable agent card section
walkScore: boolean . enable or disable walk score section
greatSchools: boolean . enable or disable great schools section
details:
- schools: boolean . enable or disable schools details
- beds: boolean . enable or disable beds details
- baths: boolean . enable or disable baths details
- livingArea: boolean. enable or disable living area details
- lotArea: boolean . enable or disable lot area details
- buildingArea: boolean . enable or disable building area details
- mlsArea: boolean . enable or disable mls area details
- subDivision: boolean . enable or disable sub division details
- driveIn: boolean . enable or disable drive in details
- truckLevel: boolean . enable or disable truckLevel details
- clearHeight: boolean . enable or disable clear height details
overview: [”text”,”text”,…] . overview section of property details page . can be any value of ["beds", "baths", "garage", "livingArea", "lotArea", "buildingArea", "driveIn", "truckLevel", "clearHeight"]
propertyCard:
- sqftType: ”text” . can be any value of "livingArea" | "buildingArea" | "lotArea",
- share: boolean . enable or disable share button
- compare: boolean . enable or disable compare button
- save: boolean . enable or disable save listings button
- beds: boolean . enable or disable bed value
- baths: boolean . enable or disable bath value
- sqft: boolean . enable or disable size value
styles:
- primaryColor: "358, 69.4%, 55.2%" . (HSL format).

3-5. Compare("compare-1")

widgetType “Compare”
styles:
- primaryColor: "358, 69.4%, 55.2%" . (HSL format)

3-6. SavedListings("saved-listings-1")

widgetType: “SavedListings”
styles:
- primaryColor: "358, 69.4%, 55.2%" . (HSL format).
propertyCard:
- sqftType:”text” . can be any value of "livingArea" | "buildingArea" | "lotArea",
- share: boolean . enable or disable share button
- compare: boolean . enable or disable compare button
- save: boolean . enable or disable save listings button
- beds: boolean . enable or disable bed value
- baths: boolean . enable or disable bath value
- sqft: boolean . enable or disable size value

This configurations allows for significant customization of the widgets, providing control over what properties are displayed, how they are sorted and filtered, how the listings are presented visually, and the styling of the widget.

4. Saving and Previewing Changes

After customizing the script, save the changes to your site's header.
Preview the site to ensure that widgets are displaying and functioning as expected.

Customizing Widgets