Skip to main content

IDX Broker JavaScript Customization Examples

This article contains several JavaScript customization examples for IDX Broker pages and widgets, including:

  • Moving page elements
  • Updating page templates in bulk
  • Integrating third-party tracking tools
  • Redirecting IDX pages

These examples are intended for developers and advanced users comfortable working with JavaScript and browser developer tools.

Important Notes

Note: The IDX Support Team cannot provide support for custom JavaScript customizations.

Before implementing any scripts:

  • Back up existing code
  • Test changes in a staging environment when possible
  • Verify functionality on both desktop and mobile devices

Move the Contact Form on the Details Page

The following script moves the contact form on the Property Details page above the field containers.

You can modify the target selectors depending on where you want the form positioned.

Example Script

<script type="text/javascript">
idx(document).ready(function() {

    idx("#IDX-detailscontactFormWrap")
        .insertAfter(idx("#IDX-detailsLinks"));

    idx("#IDX-listingHeader")
        .insertBefore(idx("#IDX-detailscontactFormWrap"));

});
</script>

What This Script Does

This script:

  • Moves the contact form wrapper
  • Repositions the listing header
  • Changes the layout order of elements on the Details page

Set Default Layouts for IDX Broker Pages

The following bookmarklet script automatically updates IDX page layouts to use the MobileFirst template.

This can save time when updating multiple IDX pages.

Note: This script is intended to be run from the browser while viewing the IDX Dashboard Page Templates section.

Example Bookmarklet

javascript:(function()%7Bif(function()%7Bvar%20e%3Didx(%7B%7D)%3Bidx.ajaxQueue%3Dfunction(a)%7Bfunction%20t(e)%7Bi%3Didx.ajax(a).done(n.resolve).fail(n.reject).then(e%2Ce)%7Dvar%20i%2Cn%3Didx.Deferred()%2Co%3Dn.promise()%3Breturn%20e.queue(t)%2Co.abort%3Dfunction(r)%7Bif(i)return%20i.abort(r)%3Bvar%20s%3De.queue()%2Cu%3Didx.inArray(t%2Cs)%3Breturn%20u%3E-1%26%26s.splice(u%2C1)%2Cn.rejectWith(a.context%7C%7Ca%2C%5Bo%2Cr%2C%22%22%5D)%2Co%7D%2Co%7D%7D(idx)%2C%2Fmiddleware%5C.%5BA-z%5D*%3F%5C.com%5C%2Fmgmt%5C%2Fpages%5C.php%24%2F.test(location.href))%7Bvar%20pagesIDs%3D%5B%5D%3Bidx.each(idx('a%5Bhref*%3D%22%2Fmgmt%2Ftemplates.php%3Fid%3D%22%5D')%2Cfunction(e%2Ca)%7BpagesIDs.push(a.href.match(%2Ftemplates%5C.php%5C%3Fid%3D(%5B0-9%5D*)%2F)%5B1%5D)%7D)%2Cidx.each(pagesIDs%2Cfunction(e%2Ca)%7Bidx.ajaxQueue(%7Burl%3Alocation.origin%2B%22%2Fmgmt%2Ftemplates.php%22%2Cdata%3A%7Bid%3Aa%7D%2Ctype%3A%22GET%22%2CdataType%3A%22html%22%2Csuccess%3Afunction(t)%7Bvar%20i%3Dt.match('data-twig-name%3D%22(mobileFirst.*%3F%7CmyListingsManager.*%3F)%22')%3Bi%26%262%3D%3Di.length%26%26idx.ajaxQueue(%7Burl%3Alocation.origin%2B%22%2Fmgmt%2Fajax%2Ftemplates.php%22%2Cdata%3A%7Baction%3A%22activateTemplate%22%2Cid%3Aa%2Cvalue%3Ai%5B1%5D%7D%2Ctype%3A%22POST%22%2Csuccess%3Afunction(t)%7Bvar%20n%3DJSON.parse(t)%3Bconsole.log(%22%23%22%2Ba%2B%22%20-%20%22%2Bn.message%2B%22%3A%20%22%2Bi%5B1%5D)%2Ce%3D%3DpagesIDs.length-1%26%26idx.ajaxQueue(%7Bcomplete%3Afunction()%7Balert(%22Complete.%20See%20console%20for%20more%20info%22)%7D%7D)%7D%7D)%7D%7D)%7D)%7Delse%20alert(%22Go%20to%20Designs%20-%3E%20Pages%20and%20run%20again.%22)%7D)()

How to Use

  1. Create a new bookmark in your browser
  2. Paste the script into the bookmark URL field
  3. Navigate to:
    • Designs → Pages
  4. Run the bookmarklet

The script will:

  • Loop through IDX pages
  • Apply MobileFirst layouts automatically
  • Output results in the browser console

Implement ListTrac Tracking

The following script integrates ListTrac tracking with IDX Broker listing pages.

You must replace:

  • DXB_######

with the client’s actual ListTrac account ID.

Example Script

<script src="//code.listtrac.com/monitor.ashx?acct=DXB_######&sp=1" type="text/javascript"></script>

<script type="text/javascript">
if (typeof(_LT) != 'undefined' && _LT != null ) {

    _LT.initListTrac('DXB_######');

    _LT._trackEvent(
        _eventType.view,
        '!%listingID!%',
        '!%zipcode!%'
    );

}
</script>

What This Script Does

This script:

  • Loads the ListTrac tracking library
  • Initializes tracking for the specified account
  • Tracks listing views
  • Sends listing ID and ZIP code information to ListTrac

Redirect IDX Pages Using JavaScript

If you are using a custom search form, you may not want users accessing default IDX search pages directly.

Even unused IDX pages can still:

  • Be indexed by search engines
  • Appear in search results

This script redirects visitors from an IDX page to another URL.

Basic Redirect Example

window.location = "http://www.yoururl.com";

Full Script Example

<script>

window.location = "http://www.yoururl.com";

</script>

Replace:

  • http://www.yoururl.com

with the destination URL you want users redirected to.

Recommended Placement

If you want redirects applied to all Search pages, add the script to:

  • Designs → Sub-Headers → Categories → Search

You may also want to apply the redirect to:

  • Map Search pages
  • Advanced Search pages

depending on your setup.

Common Use Cases

These scripts are commonly used for:

  • Custom IDX layouts
  • Third-party analytics integrations
  • Search page consolidation
  • Mobile-first page updates
  • Lead generation optimization
  • Custom user experience workflows

Best Practices

Test Before Deploying

Always test scripts on:

  • Desktop
  • Mobile
  • Multiple browsers

Use Browser Developer Tools

Developer tools can help troubleshoot:

  • Selector issues
  • JavaScript conflicts
  • Element placement problems

Avoid Excessive Redirects

Too many redirects can negatively impact:

  • SEO
  • User experience
  • Page performance

Additional Resources

 
 
 

Related articles

Powered by Zendesk