IDXPro provides you with a number of powerful ways to include IDXPro features in your external website.
What is integration and how does it work?
IDXPro is a powerful lead generation tool on its own, but it is designed to be easily included in your existing external websites as well. There are three main ways to do this:
- Direct Linking: On your Admin Menu homepage, you will find a panel titled “Website Integration.” The first item in that panel, called IDX Search Link, is a URL that can be used to link to or frame in your IDXPro website in any way you like. When you create a link, simply use that URL as the value of the link’s “href”.
- Embed your full IDXPro website: On your Admin Menu homepage, you will find a panel titled “Website Integration.” The second item in that panel, called IDX Search Embed Code, is a code snippet that you can copy and paste into your external website that will cleanly embed your IDXPro website in a magic iframe which prevents double scroll bars from showing in most web browsers. Read on to learn about getting started with embedding and to learn more details about embedding your full IDXPro website.
- Embed a Widget: In your Admin Menu you will find a menu item titled “Widgets”. In this menu you will find tools to create and customize the look and feel of your Widgets, as well as a code snippets that you can copy and paste into your external website that will place your customized Widgets on your site. Read on to learn more details about Widgets.
Getting started with embedding
Whether you wish to embed your full IDXPro website or just include a Widget, IDXPro is designed to make it easy to seamlessly include powerful IDXPro search tools in your external website.
To begin with, find the embed code snippet you wish to use. To embed your full site, use the code snippet found on your Admin Menu homepage in the Website Integration panel. To embed a Widget, navigate to the Widgets menu in your Admin Menu and use the code snippet created for a given Widget.
Now that you have your embed code snippet, you are ready to choose a location to add it to your external website. If your external site is managed by a third party, they should be able to handle this for you if you send them your embed code snippet. If you manage your external website yourself, you’ll want to be sure you paste the code into a location on your site that accepts HTML. Refer to your external site’s documentation if you are unsure of where it is okay to paste in HTML, but a good rule of thumb is that anywhere you can paste in a YouTube video should work for your IDXPro embed snippets.
And in either case, always remember that our friendly customer support team is here to help. While they may not be able to directly work on your external site, they can assist you and/or work with your third party website provider to help get you up and running with embedded IDXPro tools.
Embedding your full IDXPro website
On your Admin Menu homepage, you will find a panel titled “Website Integration.” The second item in that panel, called IDX Search Embed Code, is a code snippet that you can copy and paste into your external website that will cleanly embed your IDXPro website in a magic iframe which prevents double scroll bars from showing in most web browsers.
When selecting where on your website to paste in your embed code, try to choose a location with either a large or a variable width. IDXPro will set itself inside a magic iframe that will make the best use possible of the available space, but your customers will have the best possible experience with your site if IDXPro has ample space to work with. And as mentioned above, IDXPro will also intelligently resize its iframe in most browsers in order to prevent your users from seeing a “double scrollbar,” providing a satisfying, seamless integration with your external website.
What is a Widget?
Widgets are “small” tools you can add to other websites.
In your Admin Menu you will find a menu item titled “Widgets”. In this menu you will find tools to add, edit and delete your widgets, as well as a code snippet for each widget that you can copy and paste into external websites.
There are 6 Widget Types
- Quick Search Widget - Add Basic IDX Search anywhere
- Slideshow Widget - Display Your Own Listings in a Slideshow. Find your listings using the tool on the “Featured Listings” Tab.
- Listing Map Widget - Display Your Own Listings on an Interactive Map. Find your listings using the tool on the “Featured Listings” Tab.
- Contact Form Widget - Create Lead Capture forms for other websites that feed into your LeadTracker. Use Leadtracker Tags to organize your leads from your forms.
- Saved Searches Widget - Easily display your Saved Searches.
- MLS # Box Widget - Add a small box to your website where you can type an MLS # to go directly to the correct listing.
You can create multiple versions of each widget with separate contents and look and feel. All of your widgets will appear with embed codes on the Widgets tab. When you copy and paste the embed code snippet on your external website a fully functional tool will appear with the size, colors, and fonts that you select in the edit screen.
Creating a New Widget
You can add new widgets to include in your websites from the Widgets page in the Admin Menu as follows:
- From the Widgets page use the drop down menu to select which type of widget to add then click the “Add Widget ” button.
- This will open the Widget customizing screen. (See Customizing Widget Size and Appearance below.)
- Customize the widget size and appearance as needed then click the “Save Widget” button at the bottom of the page.
- Your new Widget will appear in the Widgets list. Click the “Get Code ” link to view and copy the code to be embedded into your external website.
Customizing Widget Size and Appearance
On the Widget edit screen you will find the tools to customize each widget. You will find the following tools for customizing your widget:
- Width and Height: You can select the width and height of your widget by either entering pixel counts in the form fields or by clicking and dragging the resizing tool in the widget preview area.
- Border, Text, and Background Color: You can select colors for your border, text, and background in one of two ways. First, you can click the color box to open a color selection palette. Second, you can enter and HTML standard hexadecimal color code into the form field. Note: you can set any of these colors to be transparent by entering the word “transparent” in the form field.
- Font face: You can select the family of fonts you would like to be used in your form by choosing from the collection of commonly used web font families in the select box.