1. What is IDXBroker?

  1. All listings that participate in the Broker Reciprocity (IDX) program with your MLS can be accessed using our service.
  2. The IDX Broker application automatically collates, maintains, and displays your local MLS listings. Using IDX Broker allows you to display all MLS listings seamlessly on your own website.
  3. All local MLS listings will display on your website with your contact information. Some restrictions apply based on certain MLS rules.


What is IDX / Broker Reciprocity?

IDX is an acronym for Internet Data Exchange. IDX is the policy instituted by the National Association of Realtors (NAR) to govern how MLS member participants can display active MLS listing information on their websites.


In simple terms, IDX is the means of extracting the data from a Multiple Listing Service and delivering it to a website for public consumption. IDX is sometimes called Broker Reciprocity or IDD.


For further info, click here to read more from IDX Broker: https://www.idxbroker.com/what-is-idx



2. How is it used?

To integrate IDXBroker listings into a UXi® site, the client must have an IDX Platinum or IDX Lite account. For more information, see a feature breakdown here:



Setting up UXi® sites to pull listing information from a client’s IDX account involves two steps. First, create a page that will be used to display IDX features like searches, search results, and property details. This is called the IDX Wrapper. Second, use the IDX dashboard to set up preferences, create widgets, and add styles to the IDX content.


Step 1: Create a UXi® page for the IDX Wrapper


Login to the UXi site via MadOffice and


  1. Create a new page.

    1. No default page content is required. (Can be included for extra SEO or visual improvements)

    2. Title the page IDX Wrapper. (Unless you plan to visually display the page title)

    3. Give the page a generic, user-friendly meta title like “Loveland Real Estate” *Do NOT add this new page to your navigation menu.

  2. Create a new layout that will be used on this page as the IDX Wrapper.

    1. Title the layout ‘IDX Wrapper’

    2. Add a UXi® Embed widget with the following code in the main content column of the page: (screenshot reference : http://prntscr.com/7n49ex)

       

      <div id="idxStart"></div><div id="idxStop"></div>

       


    3. Create nested rows in the sidebar for UXi® Embed widgets that will display IDX widgets created later in the process. (Step 4)



 


 

Step 2: Set up UXi® page as the IDX Wrapper 


Login to client’s IDXBroker account at https://idxbroker.com The client must have a Lite or Platinum account type (http://prntscr.com/7eyj8t)

  1. From the Client Menu at the top of the page, click Designs.

  2. Then select Wrappers from the sub-menu.

  3. From that page, select the Dynamic wrapper.

  4. Enter the full URL. (minus the http://) and Save.




Step 3: Set up page layouts & links in IDX 

  1. From the Client Menu at the top of the page, click Preferences.

  2. Select Global Preferences from the sub-menu. 

  3. On the ‘Mobile’ tab, find the option to Use Mobile Wrappers and select ‘No’ and Save Changes. 

  4. From the Client Menu at the top of the page, click Designs. 

  5. Select the Pages option from the sub-menu. 

  6. Update each page layout by clicking Edit in the Layout column. Every option on this page should be set to use a MobileFirst layout. (http://prntscr.com/7hdxlv) When this step is done, any of the links will use the IDX Wrapper page created in section 1 to display all IDX content. *Please note that template version 1.000 must be used on the Details page to display all images properly. 

  7. When the pages are all set up, add the appropriate links to the UXi site.  

  8. Paste it as a custom link in the UXi navigation. (http://prntscr.com/7tiwwd)

    Two common examples are show below:
     

    1. To add an advanced property search, use the Advanced Search link: ( http://prntscr.com/7tivax) 

    2. To add a link to all properties listed by the client, use the Featured link: (http://prntscr.com/7tj5vg)

  9. Replace the custom CSS on the page with the following css:

    Main Navigation

    /* PASTE THE CONTENT BELOW TO DESIGNS > CUSTOM CSS > GATEGORIES > SEARCH */
    
    /* NAV BAR */
    .IDX-wrapper-standard .IDX-navbar-default {
        background-color: #939aa7!important;
        border-color: #62676f!important;
    }
    
    /* NAV BAR LINKS */
    .IDX-wrapper-standard .IDX-navbar-default .IDX-navbar-nav>li>a {
        color: #fff;
        background-color: #939aa7!important;
    }
    
    /* NAV BAR LINKS HOVER */
    .IDX-wrapper-standard .IDX-navbar-default .IDX-navbar-nav>li>a:focus,
    .IDX-wrapper-standard .IDX-navbar-default .IDX-navbar-nav>li>a:hover {
        color: #fff;
        background-color: #62676f!important;
    }
    
    /* NAV BAR LINKS ACTIVE */
    .IDX-wrapper-standard .IDX-navbar-default .IDX-navbar-nav>.IDX-active>a { background: #787e88!important; }
    .IDX-wrapper-standard .IDX-navbar-default .IDX-navbar-nav>.IDX-active>a:hover{ background: #62676f!important; }
    .IDX-wrapper-standard .IDX-navbar-default {
        background-color: #939aa7!important;
        border-color: #62676f!important;
    }
    
    /* NAV BAR LINKS */
    .IDX-wrapper-standard .IDX-navbar-default .IDX-navbar-nav>li>a {
        color: #fff;
        background-color: #939aa7!important;
    }
    
    /* NAV BAR LINKS HOVER */
    .IDX-wrapper-standard .IDX-navbar-default .IDX-navbar-nav>li>a:focus,
    .IDX-wrapper-standard .IDX-navbar-default .IDX-navbar-nav>li>a:hover {
        color: #fff;
        background-color: #62676f!important;
    }
    
    /* NAV BAR LINKS ACTIVE */
    .IDX-wrapper-standard .IDX-navbar-default .IDX-navbar-nav>.IDX-active>a { background: #787e88!important; }
    .IDX-wrapper-standard .IDX-navbar-default .IDX-navbar-nav>.IDX-active>a:hover{ background: #62676f!important; }





Step 4: Create & embed IDX widgets 

  1. From the Client Menu at the top of the page, click Designs.

  2. Select Widgets > Manage from the sub-menu. From this page, manage existing IDX widgets or click the Add Widget at the top right to create new one. *All widgets have existing default settings and styles that could require updating to fit the client’s needs. 

  3. Click the View Code (http://prntscr.com/7tinpf) icon, then copy the script and paste it into a UXi Embed widget.

  4. Update widget styles and settings as needed. These settings and styles are accessible from the Edit Widget icon. (http://prntscr.com/7tiqj7) *These updates do not require re-pasting new code.


Use the css below to start customizing the look of the IDX widgets:


Horizontal Quicksearch

/* PASTE THE CONTENT BELOW TO QUICKSEARCH CUSTOM CSS. FIND &amp; REPLACE 34160 WITH YOUR WIDGET ID */

/* RE-SET WIDGET WIDTHS */
#IDX-quicksearchForm-34160 { display:block; width: 100%!important; text-align: center; }
#IDX-quicksearchForm-34160 .IDX-qsSelectInput { width: 100%; }

/* RE-SET FIELDS TO BE STACK ON MOBILE DEVICES */
#IDX-quicksearchForm-34160 > .IDX-qsFieldWrap {
  width:100%;
  display: inline-block;
  padding: 5px 10px; 
  text-align: left;
}

/* RE-SET FIELDS TO INLINE ON DESKTOP DEVICES */
@media only screen and (min-width: 768px) {
  #IDX-quicksearchForm-34160 > .IDX-qsFieldWrap {
    width:15%;
    display: inline-block;
    padding: 5px; 
    text-align: left;
  }
}

/* RE-SET MAIN WIDGET STYLES */
#IDX-qsIdxIDWrap-34160 { margin-top: 10px; }

#IDX-quicksearch-34160 {
border-radius: 0px;
-webkit-border-radius: 0px;
border: none;
box-shadow: none;
-webkit-box-shadow: none;
}

/* RESET INPUT HEIGHTS */
input[type="text"], select { height: auto !important; }

/*  RE-SET LABELS*/
#IDX-quicksearch-34160 label { margin: 0 5px;}

/* RE-SET INPUT WIDTHS */
#IDX-quicksearch-34160 select { width: 100% }

/* RE-SET INPUT TEXT */
#IDX-qsMinPriceLabel-34160,
#IDX-qsMaxPriceLabel-34160,
#IDX-qsMinBedLabel-34160,
#IDX-qsMinSqFtLabel-34160,
#IDX-qsMinBathLabel-34160,
#IDX-qsCityListLabel-34160,
#IDX-qsIdxIDLabel-34160.IDX-qsLabel,
#IDX-qsIdxIDWrap-34160.IDX-qsFieldWrap,
#IDX-qsIdxID-34160,
#IDX-qsPtLabel-34160,
#IDX-qsCityListLabel-34160 { color: #ffffff; text-transform: uppercase; }

/* BUTTON STYLES */
#IDX-qsSubmit-34160 {
  background-color: rgb(1, 138, 216);
  border-radius: 2px;
  color: rgb(255, 255, 255) !important;
  font-weight: normal;
  font-size: 14px;
  display: block;
  width: 100%;
  padding: 10px;
  border:none;
}

#IDX-qsSubmit-34160:hover { background-color: rgb(1, 173, 255); }


Property Carousel

/* PASTE THE CONTENT BELOW TO CAROUSEL WIDGET CUSTOM CSS. FIND &amp; REPLACE 34160 WITH YOUR WIDGET ID */

/* GENERAL RE-SET */
#IDX-carouselGallery-52380 { display: inline-block; font-size:11px; position: relative; }
#IDX-carouselGallery-52380 .IDX-outerCarouselWrapper {overflow: hidden; }
#IDX-carouselGallery-52380 .IDX-innerCarouselWrapper{ position: relative; overflow: hidden; }
#IDX-carouselGallery-52380 .IDX-carouselLink { height: 100%; width: 100%; font-size: 0; text-align: center; display: inline-block;}
#IDX-carouselGallery-52380 .IDX-carouselLink:before { height: 100%; content: ""; display: inline-block; vertical-align: middle; }
#IDX-carouselGallery-52380 .IDX-carouselContainer {position:relative;}
#IDX-carouselGallery-52380 .IDX-showcaseCourtesy {display:block;}
#IDX-carouselGallery-52380 .IDX-carouselAddress.IDX-carouselAddressElement { margin-top: 10px; } */

/* Optional Photo Height */
#IDX-carouselGallery-52380 .IDX-carouselPhoto { width: 100%; max-height: 200px !important; }

/* SET CELL BORDERS*/
#IDX-carouselGallery-52380 .IDX-carouselCell{ display:none; border:1px solid #ededed; background-color: #ffffff; -webkit-box-shadow: 1px 1px 3px rgba(22,22,22,.4); box-shadow: 1px 1px 3px rgba(22,22,22,.4); padding:3px; vertical-align: top; box-sizing: content-box; -moz-box-sizing: content-box;}

/* IMAGES */
#IDX-carouselGallery-52380 .IDX-carouselPhoto { max-width: 100%; max-height: 110px; display: inline-block; vertical-align: middle; }

/* RE-SET CAROUSEL ARROWS */
#IDX-carouselGallery-52380 a.IDX-carouselPrevArrow { left: 0; }
#IDX-carouselGallery-52380 a.IDX-carouselNextArrow { right: 0; }
#IDX-carouselGallery-52380 a.IDX-carouselPrevArrow { border-radius: 5px 0 0 5px; }
#IDX-carouselGallery-52380 a.IDX-carouselNextArrow { border-radius: 0 5px 5px 0; }
#IDX-carouselGallery-52380 a.IDX-carouselArrow span { display: block; position: absolute; width: 100%; top: 50%; margin-top: -50%; }
#IDX-carouselGallery-52380 .IDX-carouselCell div {text-align: center;}

/* ARROW COLORS */
#IDX-carouselGallery-52380 a.IDX-carouselArrow { display: block; position: absolute; background: #d5d5d5; width: 40px; text-decoration: none; text-align: center; height: 100%; top: 0; }

#IDX-carouselGallery-52380 a.IDX-carouselArrow,
#IDX-carouselGallery-52380 a.IDX-carouselArrow:hover,
#IDX-carouselGallery-52380 a.IDX-carouselArrow:visited { color: #089dc5; font-size: 20px; }

/* REMOVE UN0NEEDED CONTENT */
#IDX-carouselGallery-52380 .IDX-carouselListingID,
#IDX-carouselGallery-52380 .IDX-carouselBeds,
#IDX-carouselGallery-52380 .IDX-carouselBaths,
#IDX-carouselGallery-52380 .IDX-carouselFull,
#IDX-carouselGallery-52380 .IDX-carouselPartial,
#IDX-carouselGallery-52380 .IDX-carouselRemarks,
#IDX-carouselGallery-52380 .IDX-carouselDisclaimerLink,
#IDX-carouselGallery-52380 .IDX-carouselStatus,
#IDX-carouselGallery-52380 .IDX-carouselStateAbrv {display:none;}



Step 5: Moving to a live domain 

While in development, the IDXBroker site displays at a URL like http://uxisite.idxbroker.com. When the UXi site is live on domain at http://uxisite.com, the IDX site needs to be moved to a subdomain of the live UXi site like http://homesforsale.uxisite.com This will allow us to focus our marketing efforts on a single domain.



Reference Screenshot: http://prntscr.com/88c9zo  


 

  1. From the Client menu at the top of the page, click Account 
  2. Select Account Info from the sub-menu 
  3. On that page, find the ‘Subdomain/Domain Control’ section and set Custom Domain’ option and change it to Yes. 
  4. In the Custom Domain field, enter a new custom subdomain URL of the UXi site as the new custom domain. 
     
    *NOTE: Enter You must have first setup a CNAME record for your custom domain. Once you enter the domain and tab to the next field, IDX Broker will attempt to validate your new custom domain. If validation fails, please toggle the "Use Custom Domain" feature off and revisit this page to validate again in 12 to 48 hours. 
     
     
  5. After the IDXBroker site displays on it’s new URL, all links on the UXi site (navigation, Call to Action, Jumbotron, etc) linking to IDXBroker URLs must be updated to use the new custom URL.
  6. Once you set the toggle to "Yes" and add your custom domain, check fo a notification about the status of your CNAME record. Any errors will show a red dot and a message explaining the error. If your subdomain is setup properly, the domain field will flash green.

 
 



Common Domain Questions: 

  • What about a "A" Name Record?
    Because the set of IP addresses associated with IDX Broker can change over time, you should never create an "A" record with any specific IP address.

  • What do I need to do after I switch over to a custom subdomain?
    After switching to a custom subdomain, you'll need to make sure that you update any existing IDX links on your website or IDX global wrapper with your new IDX links using your custom subdomain. Typically, this can be accomplished with a find & replace.

  • What about a www subdomain?
    If you're attempting to use "www" as your custom subdomain, you'll also need to verify that your own homepage continues to function. If you have been using the www prefix in other places, including what's on file for your IDX account, and then set up a different CNAME record, you may experience some website issues.

  • Can I speed up indexing?
    Your IDX pages will now begin to be indexed organically by "Google Bot" and other search engine crawlers. If you would like to help Google find you faster, you can verify your ownership of the subdomain with Google Webmaster Tools. See this article for instructions about how to verify your subdomain.

    If you have any questions about the SEO value of a subdomain vs a subdirectory, see this article and video from Google here: https://youtu.be/_MswMYk05tk