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 Design in the main menu, Website in the submenu, then Wrappers.
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 web server 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 web server.
All relative URLs in your code need to be changed to absolute. This includes any calls to images, javascript or css documents, internal page links, external links, actions or backgrounds, etc. 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 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 Design -> Website -> Wrappers. 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 Header HTML and Footer HTML.
Go back to your HTML editor and copy everything above your <!--Split Here--> comment, and paste it into the Header HTML section in your IDX control panel. Copy everything below your <!--Split Here--> comment, and paste it into the Footer HTML section.
Note that the HTML in the Header and Footer text boxes is pure HTML. This means that it's not PHP, ASP, or any other language commonly used to create dynamic websites. These languages are not accepted in wrappers. You can include Javascript in your wrapper, since it is considered a client-side language.
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.