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.

...

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

...

Info
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

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

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

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.

Info

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:

Code Block

language	json

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 ).

...

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 ).

...

styles:

...

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

Info
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.

...

2.1 Go to the Dashboard Widgets Panel

Tip
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

Versions Compared

Old Version 10

New Version Current

Key

Getting Started

2. Understanding the Widget Configuration

Avoid Changing Configs Structure:

Widget Keys Are Unique:

Do Not Just Change the Widget Key:

Handling Multiple Instances of the Same Widget:

3. Customizing Widget Parameters

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")

4. Saving and Previewing Changes

Page Comparison

Versions Compared

Old Version 10

New Version Current

Key

2. Understanding the Widget Configuration

Avoid Changing Configs Structure:

Widget Keys Are Unique:

Do Not Just Change the Widget Key:

Handling Multiple Instances of the Same Widget:

3. Customizing Widget Parameters

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")

4. Saving and Previewing Changes