Versions Compared

Old Version 10

changes.mady.by.user Dean.A

Saved on

compared with

New Version 11

changes.mady.by.user Dean.A

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Getting Started

This guide explains how to add RF widgets to your website, whether you’re using CMS platforms like Wix, Squarespace, or others. Below are the steps and explanations for adding various widgets.

...

  1. Navigate to Realtyfeed Dashboard > Api Key Settings

  2. Add your site address to the Allowed Origins section, for example: https://your-site-address.com.

  3. Add your site address to the Http Referrers section, for example: https://your-site-address.com/

Tip

End slash is must have for Http ReferrersEnsure 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

You can skip this step if the widgets have already been added to your site by our expertsteam.

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

<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

Expand
titlewidgets configuration script
Code Block
languagejs

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

...

  • 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 in step 1, 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 :

...

  • 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 : 

...

  • Save Page and check your changes 

More platforms to be added soon…