The Wrapper System is a tool in your IDX Broker account that applies your website design to your IDX Broker pages. The IDX Broker data and pages are hosted on our servers and come with minimal styling until they are "wrapped" with the look and layout of your website. Typically, when a new IDX Broker account is set up, a static wrapper is created from the website you provide us so that your pages are ready to integrate.
The Static Wrapper is built using HTML and is a "snapshot" of the source code from a page on your website and is called static because it does not update on its own. This means that each time your website design and/or navigation is updated your static wrapper will also need to be updated to match those changes.
To update your static wrapper, you or your designer will need to be familiar with HTML. If you are not familiar with HTML the IDX Broker Support Team can update the wrapper for you, and provides two free wrapper updates a year.
Your wrapper settings are stored in your IDX account under Designs in the main menu, and Wrappers in the submenu.
To create a static HTML wrapper, follow these steps:
Step 1 - Choose the template
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 editor like Dreamweaver or EditPad Lite or Notepad ++.
Step 2 - Correct the code
Change all URLs appearing in the source code to be absolute, not relative. What's the difference?
- Absolute URLs start at the very beginning of the link with "http://" for example "http://www.greatpropertyforsale.com/index.html"
- Relative URLs point to a file hosted on the same webserver in the same directory as the present page you are viewing. They typically start with a / and can look like "/index.html" or even "/files/theme/redhouse/images/headers/lakeside.jpg"
A relative link will point to a file that is hosted on the same web server in the same directory as the file you are currently editing. Relative URL paths in your website will work when viewing the non IDX portion of the website, but will not find anything when viewed from an IDX page because the IDX pages are hosted on a different webserver.
Other things to check for:
- Remove the <base href=""> tag
- Make sure there are <meta> tags present for both keywords and description (for SEO purposes)
- Make sure there is a <title> tag present (for SEO purposes)
- Make sure the </head> tag is on it's own line in the code
Note: There may be other things to clean up in the code. If your wrapper is still not functioning and you've done all the things above, please contact the Support team.
Step 3 - Split the wrapper in half
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 content specific to the donor page you chose in Step 1 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.
Step 4 - Save in the Control Panel
In the IDX Control Panel go to the Designs button and the Wrappers section. Choose which wrapper you would like to work with, Global, Categories, Pages, or Saved Links, and choose Static as the type of wrapper.
For more information about the Global Wrapper see this article.
For more information about Category, Page, and Saved Link wrappers see this article.
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.
Also note that if you use Google Maps within the IDX Broker wrapper, Google may block that map if you do not have a subdomain in place.
Click the 'Save Changes' button and you're done! View one of your IDX Page Links to see your new wrapper in action.