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
Code Block | ||
---|---|---|
| ||
<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: "", ownerName: "" }, 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 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> |
...
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: |
number | A numerical value that can represent whole numbers or decimals |
3-1. FeaturedListings ("featured-listings-1")
widgetType
“FeaturedListings” . represent widget typefilters
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).ownerName
: “text” . filter by name of owner (empty by default - Case sensitive ).carousel
:enabled
: boolean . enable or disable the carousel featureinfinite
: boolean, enabling infinite scrolling in the carouseldots
: boolean, showing navigation dotsarrows
: boolean, showing navigation arrowsautoplay
:boolean enable or disable the autoplayautoplaySpeed
: 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 buttoncompare
: boolean . enable or disable compare buttonsave
: boolean . enable or disable save listings buttonbeds
: boolean . enable or disable bed valuebaths
: boolean . enable or disable bath valuesqft
: boolean . enable or disable size valuelistOfficeName
: boolean . enable or disable list office valuesubDivision
: 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 typestyles
:height
: "48px" . Height of search bar input.
3-3. Listings("listings-1")
widgetType
: “Listings”total
: number . total listings cards to showmapZoom
: number . map default zoom on page load . default value is 10mapCenter
: map default center on page loadlat
: number . coordinates of map default centerlng
: number . coordinates of map default center
propertyCard
:sqftType
:”text” . can be any value of"livingArea"
|"buildingArea"
|"lotArea"
,share
: boolean . enable or disable share buttoncompare
: boolean . enable or disable compare buttonsave
: boolean . enable or disable save listings buttonbeds
: boolean . enable or disable bed valuebaths
: boolean . enable or disable bath valuesqft
: boolean . enable or disable size value
filters
:city
: “text”. default search value for the city. If left empty, listings can be from any citylistingsType
:enabled
: boolean . enabled or disable listings type filterlistingsTypeValue
: “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 filterpropertyTypeEditable
: boolean . set if property type filter be editable by user or notpropertyTypeValues
: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 disablepriceRangeValue
: [“text”,”text”] . empty by default; you can specify a price range to filter listings.
sizeRange
:enabled
: boolean . enable or disabletype
: [”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 defaultprimaryColor
: "358 69.4% 55.2%" . (HSL format).
3-4. PropertyDetails("property-details-1")
widgetType
: “PropertyDetails”mortgageSection
: boolean . enable or disable mortgage calculator sectioncontactSection
: boolean . enable or disable contact us sectionagentSection
: boolean . enable or disable agent card sectionwalkScore
: boolean . enable or disable walk score sectiongreatSchools
: boolean . enable or disable great schools sectiondetails
:schools
: boolean . enable or disable schools detailsbeds
: boolean . enable or disable beds detailsbaths
: boolean . enable or disable baths detailslivingArea
: boolean. enable or disable living area detailslotArea
: boolean . enable or disable lot area detailsbuildingArea
: boolean . enable or disable building area detailsmlsArea
: boolean . enable or disable mls area detailssubDivision
: boolean . enable or disable sub division detailsdriveIn
: boolean . enable or disable drive in detailstruckLevel
: boolean . enable or disable truckLevel detailsclearHeight
: 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 buttoncompare
: boolean . enable or disable compare buttonsave
: boolean . enable or disable save listings buttonbeds
: boolean . enable or disable bed valuebaths
: boolean . enable or disable bath valuesqft
: 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 buttoncompare
: boolean . enable or disable compare buttonsave
: boolean . enable or disable save listings buttonbeds
: boolean . enable or disable bed valuebaths
: boolean . enable or disable bath valuesqft
: boolean . enable or disable size value
...