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
- Create a new bookmark in your browser
- Paste the script into the bookmark URL field
- Navigate to:
- Designs → Pages
- 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