When you first get your IDX Broker account, it’s likely that the support staff has already wrapped it to match your website. IDX Broker wrapper creation comes in when you need to update your site look or navigation for any reason. This lesson teaches the basics to create a static wrapper.

Choose a Model Page

Choose a page from your website upon which you would like to pattern your wrapper. The graphics and layout of this page (except the inner content) will be duplicated for your IDX Pages. Use your web browser to view the source code for that page. Copy all of the source code, and paste it into an HTML or text editor.

Clean Up the Code

All relative URLs in your code need to be changed to absolute. If you’d like to know the difference, please view our content on missing links. This includes anywhere you are specifying the location of a file or page. Using a “Find & Replace” function in your code editor can be very helpful with this.

Other things to check for:

• Remove any base tag
• Make sure there are meta tags present for both keywords and description.
• Enter a good title tag for your page (for SEO purposes)
• The closing </head> tag must be on it’s own line in the code.

Split Your Page

Determine where the IDX content needs to be displayed on the page. This is usually the main content area of the page. In your code editor remove any page specific content that you do not wish replicated in each of your IDX pages. This is the split between your “Header” and “Footer” sections. It may be helpful to type <!–Split Here–> in this content area, so you can easily see where you split your code.

Add the Wrapper to IDX Broker

In the IDX Control Panel go to the Designs button and the Wrappers section. Chose which wrapper you would like to work with, Global, Categories, Pages, or Saved Links, and choose Static as the type of wrapper.

On this screen, you will see two areas labeled HTML Header and HTML Footer.

Go back to your HTML editor and copy everything above your <!–Split Here–> comment, and paste it into the HTML Header section in your IDX control panel. Copy everything below your <!–Split Here–> comment, and paste it into the HTML Footer section.

Now hit save and you can visit any of your IDX Broker pages to make sure that it worked.