Wrappers are the tools in your account that match your IDX pages to the look and layout of your main website. The IDX Broker data lives on our servers and is served up raw, until we "wrap" it to blend with the rest of your site. One wrapper option available to you is the Static HTML Wrapper. This type of wrapper is built using static HTML, and is a "snapshot" of the source code from one of the pages of your main website at the time the wrapper is created. This type of wrapper is static, so each time your website design and/or navigation is updated, your static wrapper will also need to be updated to match those changes.
If you manage your own website and are familiar with HTML, or if you plan on becoming proficient in updating and managing every detail of your IDX pages, you will likely wish to know how to update your own Static Wrapper, since otherwise you will need to contact your web designer or the IDX Support Team to update it for you.
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.
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.