Static Wrapper

Last Updated: Apr 24, 2017 03:24PM PDT

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.

Wrapper navigation

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.

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 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.

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.

 

Contact Us

7aa925ed41e07af6bcf83eb1edacbce2@idxbroker.desk-mail.com
http://assets0.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete