Customizing Widgets
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
the configuration code should run on all pages and with the highest priority available
avoid enabling options that lead to lazy load of third party scripts
2. Understanding the Widget Configuration
2.1 Go to the Dashboard Widgets Panel
If this is your first time using the Widgets Panel, generate your widgets from scratch, as some configurations may not be compatible with the old method. In future sessions, you can copy and paste your configurations in Current Configs input to avoid recreating widgets and continue your work seamlessly
2.2 Global Configs
User API Key & Client ID : this fields are automatically filled . avoid changing them
Walk Score API Key : Optional | This is for the Walk Score section on the property details page. You can create an API key from here.
Map API Key (Google) : This is for the map and search widgets. You can create an API key from here.
Listings Page Path : Fill this field with the pathname of your default listings page on your website. This field is used for navigation between widgets. For example: /listing
Property Details Page Path : Same as above . Fill with pathname of Property Details Page . This page is required for displaying listing details . For example: /property-details
Compare Page Path : Same as above . Fill with pathname of Compare Page. For example: /compare
Press Next Button
2.3 Create your widgets
Select the widget type you want to generate from the Widget Type dropdown menu
If this is your first time generating widget configurations, the Widget instance will be empty. Create a new instance of the selected widget by pressing the + button on the right side of the dropdown. This will open a new section where you can adjust settings and name the instance
Adjust the settings according to your preferences
Repeat above steps for other widgets
When you are finished, press the 'Generate Head Script' button at the bottom of the page. This will create the necessary configuration for you to add to the head custom code of your site
Embed Code : The default embed code is usable for most platforms. This code is used to display widgets on your site’s pages. Refer to the 'Adding Widgets' document for detailed instructions for different platforms .
Widgets Head Script : Widget configuration script to be placed in the custom code section of your website's head
Deprecated
The script configures various widgets such as FeaturedListings, Listings, Compare, PropertyDetails, SavedListings and SearchBar
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.
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).
ownerName : "text" . filter by name of owner (empty by default - Case sensitive ).
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
Â
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.