Customizing Widgets

Owned by Dean.A (Unlicensed)
Last updated: Oct 23, 2024
2 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