Adding Widgets
- Dean.A (Unlicensed)
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.
If you encounter any discrepancies or need additional customization in the future, make sure to revisit the guide or check for the latest updates.
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 Originssection, for example: https://your-site-address.com.Add your site address to the
Http Referrerssection, for example: https://your-site-address.com/
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
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-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
3-1. Wix
Start by activating Dev mode in your site
From Velo Sidebar go to
public & backendsectionInside the Public section, add a new
.jsfile 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
Elementsto 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 aslistings-widget-1for 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 . |
config | This should refer to the widget instance name generated in step 2, 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 Blockin the area where you want the widget to appearEdit added embed block . set embed type as
Code SnippetSet Embed Data to :
Code | Description |
|---|---|
<div id="rfWidgets" config="featured-listings-1" widget="FeaturedListings"></div> | config value refers to the widget instance name generated in step 2 . e.g. : |
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 elementfrom theCustom sectionof theAdd Elements menuOpen code editor from the right side and add the following code :
Code | Description |
|---|---|
<div id="rfWidgets" config="featured-listings-1" widget="FeaturedListings"></div> | config value refers to the widget instance name generated in step 2 . e.g. : |
Save Page and check your changes
More platforms to be added soon…