Getting Started

...

Anchor

	widgets-list
	widgets-list

The currently available widgets are: Listings, FeaturedListings, PropertyDetails, SavedListings (Local Save Only), Compare, and SearchBar.

1. Whitelist your site address

Navigate to Realtyfeed Dashboard > Api Key Settings
Add your site address to the Allowed Origins section, for example: https://your-site-address.com.
Add your site address to the Http Referrers section, for example: https://your-site-address.com/

Tip
End slash is must have for Http Referrers

Add widgets configuration code

Ensure that HTTP referrers include a trailing slash (/) at the end. When inputting the site address, carefully match it to the URL displayed in the browser's address bar for accuracy

2. Add widgets configuration code

For widgets to function properly, you need to generate a main script that includes all widget configuration codes and is essential for running the widgets on your website. This main script should be placed in the head section of your site

2-1. Refer to your platform’s documentation on how to insert custom code snippets into the <head> section.

Here is guide to Popular CMS Platforms

Wix - Squarespace - GHL

Info
the configuration code should run on all pages and with the highest priority available

Wix - Squarespace - GHL

Copy the code below and place it in the <head> section of your site. The code provided includes all currently available configurations. To further customize it, please refer to this document

Expand

title	widgets configuration script

Code Block

language	js

<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,
    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,
      },
      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 enabling options that lead to lazy load of third party scripts

2-2. Generate your widget configuration script through our Dashboard Widgets Panel

For more information about the Widgets Panel, please refer to the customization documentation

3. Add Widgets to Site pages

Generally, you need to add a code element that supports inserting HTML wherever you want to display a specific widget on your page. However, each platform has its own method for doing this.

Below are the steps for some popular platforms

Panel

panelIconId	atlassian-info
panelIcon	:info:
bgColor	#DEEBFF

Note

These steps may change with future platform updates.

Check the widgets on the live site after editing the pages, as preview mode might not function properly.

To display property details in widgets like the Featured Listings or Listings Widget, you need to create a new page and place the PropertyDetails widget on it

The only widget that can be placed multiple times on the same page is the FeaturedListings widget. 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-1. Wix

Start by activating Dev mode in your site
From Velo Sidebar go to public & backend section
Inside the Public section, add a new .js file to the custom-elements folder. The name and content of this file do not matter

Steps below should be repeated for each widget

Add a new custom element from Elements to the page and choose the source to be the new .js file created in the previous step. The tag name should be something unique, such as listings-widget-1 for a Listings Widget. This name must be unique for each instance of widget to prevent Wix from loading a custom element beside your widget. If you see an unintended wix custom element beside your widget, recheck this step.
Next, create three attributes for this custom element and set the attribute values as needed :

Attribute Name

Value

id

rfWidget

widget

Widget Name e.g. : Listings .

Refer to top for complete list of widgets

config

This should refer to the widget config key created instance name generated in step 12, e.g., listings-widget-1

...

Publish changes

3-2. Squarespace

Steps below should be repeated for each widget

Navigate to the page where you want to add a widget. Click Edit and Add an Embed Block in the area where you want the widget to appear
Edit added embed block . set embed type as Code Snippet
Set Embed Data to :

Code

Description

Code Block
<div id="rfWidgets" config="featured-listings-1" widget="FeaturedListings"></div>

config value refers to the widget config key created instance name generated in step 2 . e.g. : listings-widget-1 . widget value is Widget name e.g. : Listings .

Refer to top for complete list of widgets

...

Save Page and check your changes

3-3. GoHighLevel

Steps below should be repeated for each widget

Go to the page where you want to add a widget. From the top bar, add a Code element from the Custom section of the Add Elements menu
Open code editor from the right side and add the following code :

Code

Description

Code Block
<div id="rfWidgets" config="featured-listings-1" widget="FeaturedListings"></div>

config value refers to the widget config key created instance name generated in step 2 . e.g. : listings-widget-1 . widget value is Widget name e.g. : Listings .

Refer to top for complete list of widgets

Save Page and check your changes

More platforms to be added soon…

Versions Compared

Old Version 6

New Version Current

Key

Getting Started

1. Whitelist your site address

Add widgets configuration code

2. Add widgets configuration code

3. Add Widgets to Site pages

3-1. Wix

3-2. Squarespace

3-3. GoHighLevel

Page Comparison

Versions Compared

Old Version 6

New Version Current

Key

1. Whitelist your site address

Add widgets configuration code

2. Add widgets configuration code

3. Add Widgets to Site pages

3-1. Wix

3-2. Squarespace

3-3. GoHighLevel