Customizing Widgets

Owned by Dean.A
Last updated: Sept 12, 2024
10 min read

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"

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.