Getting Started

...

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

...

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

...

js

widgets configuration script

Code Block

language

json


<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,
        listingsTypeValue: "For

Sale

Any",
        listingsTypeEditable: 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:

...

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.

...

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 : number . map default zoom on page load . default value is 10
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
  - listingsTypeValue : “text” . listings type default value on page load . value can be "For Any" or "For Sale" or "For Rent" . default value is “For Any”
  - listingsTypeEditable : boolean . set if listings type filter be editable by user or not . default value is true
- propertyType:
  - enabled: boolean . enable or disable property type filter
  - 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

...

Versions Compared

Old Version 5

New Version 6

Key

Getting Started

Avoid Changing Configs Structure:

Do Not Just Change the Widget Key:

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

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

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

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

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

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

Page Comparison

Versions Compared

Old Version 5

New Version 6

Key

Avoid Changing Configs Structure:

Do Not Just Change the Widget Key:

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

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

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

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

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

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