Custom Coding on MLS®/IDX Widget Accounts

This guide is for customers using our MLS®/IDX Widget product launched after June 3, 2024. If you're using our older MLS®/IDX Widget, formerly Listings-Only (IDX) product please read this guide instead.

Before you begin: Read/watch our Getting Started Guide: MLS®/IDX Widget. This will give you an understanding of how MLS®/IDX Widget accounts work, including how to use built-in widget options. Chances are that a lot of what you may be trying to achieve can be done using built-in widget options and therefor you may not need the information in this guide.

The settings mentioned below are for advanced web designers/developers only. RealtyNinja cannot be held responsible for any edits you make (without us) to these settings on your account.

You can read the steps on this page to learn how to make advanced custom code changes on your MLS®/IDX Widget account.

Custom Code Settings

Custom code settings allow you to load in additional things with the MLS®/IDX Widget.

Here's how to access them:

Login to your MLS®/IDX Widget account
Click "Settings"
Click "Custom Code"

Here's a simple example where a red box with some content is loaded above and below the MLS®/IDX Widget.

Custom CSS Styles

This field allows you to load your own custom CSS on top of our base styles.

A few examples of when that would be useful:

You wish to use different fonts and colours
You wish to change the visual styles of existing elements
You wish to hide certain elements on the page

Pro tip: Use your browsers "Inspect" tool to identify elements and styles used in the MLS®/IDX Widget, and target them with your own custom css.

Custom Header Code

This field allows you to load your own custom header code. It will be inserted before the closing HEAD tag in the MLS®/IDX Widget.

An example of when this would be useful is for loading third-party hosted fonts or javascript.

Custom Body Code

This field allows you to load your own custom body code. It will be inserted immediately after the opening BODY tag in the MLS®/IDX Widget.

Custom Footer Code

This field allows you to load your own custom footer code. It will be inserted inserted before the closing BODY tag in the MLS®/IDX Widget.

Custom CSS Classes on widgets

You have the ability to set a custom CSS class on every page/widget within your MLS®/IDX Widget account. By setting a custom CSS class on these you'll be able to target them via the Custom CSS Styles setting outlined above.

Here's how to find this setting on any page/widget:

Login to your MLS®/IDX Widget account
Click on MANAGE PAGES
Click the "Page Layout & Widgets" icon next to any page in the lightbox
Click the "Widget Options" icon
Scroll down to the "Custom CSS Class" field and type in a class name.
Click "Apply Changes".
You can now target this widget in your CSS (in "SETTINGS > Custom Code > Custom CSS Styles") via its custom class.

Questions?

Don't hesitate to reach out to our team if you have any questions.