Install Buying Buddy on IMAGEPRO

IMAGEPRO websites have been around a long time, but it's easy to add a modern, mobile-responsive IDX solution to your website with Buying Buddy widgets!

There are 4 steps to install and setup Buying Buddy on your IMAGEPRO™ website:

  1. Get a Google Map API Key.
  2. Install the Buying Buddy plugin as JavaScript.
  3. Create 2 new web pages and add the "results" and "details" widget short codes to them.
  4. Confirm that the websites settings in your buying buddy account match the pages you just created.

This article provides detailed instructions to guide you through these steps

Installing on IMAGEPRO follows the same process as for any regular HTML website, with the addition of a couple of extra steps that are specific to IMAGEPRO websites (all explained below):

  1. Because there is no way to add the Buying Buddy plugin JavaScript site-wide, this method requires loading the Buying Buddy JavaScript first on EACH page where you want to display Buying Buddy IDX widgets.
  2. IMAGEPRO Custom Pages are set at a certain fixed height which can cut off the longer display of content provided by the Buying Buddy widgets.
    So, to allow them to adjust height to accommodate the full display of the Buying Buddy widgets we will be adding some custom JavaScript (where necessary) to allow the correct display of properties and results etc.

Step 1: Get your Google Map API Key

A Google Map API key is required.

  1. Follow these instructions to get a Google Map API key.

When you have created your Key, make sure it is added to Website Settings in your Buying Buddy account before proceeding with the next step.

Step 2: Get the Buying Buddy JavaScript Library Code

If you have not added the Google Map API key to your Buying Buddy account (Website Settings), then the JavaScript plugin code will not be shown.

  1. Login to your Buying Buddy dashboard at
  2. Navigate to: Websites & Widgets / Getting Started
    Then click the "Plugin Installation" button to view the installation instructions.
  3. Select the appropriate website. Make sure that in Website Settings your site is set as a IMAGEPRO site. For an IMAGEPRO website you will be shown the JavaScript that is your Buying Buddy Plugin.
  4. COPY the plugin code.

** Stay logged in and stay on this page in a browser tab while you now go to your IMPAGEPRO admin area.

Step 3: Add Foundation Pages with Widgets

The following steps are important, they will guide you to:
* Create 2 pages that are NOT in your menus (they are reserved for use by Buying Buddy).
* Add the correct widget specified to each page. Only add one widget to each page.
* Ensure that the 2 page addresses are added to Website Settings in your Buying Buddy account.
* You must add a DNS record to enable social sharing of properties.

You need to create and identify 2 key pages to be in your Buying Buddy account:

  • Results Page (which will show the "Results" widget)
  • Property Details Page (which will show the "Property Details" widget)

Plus, you will also need to add a Search Form widget on any other different page too for testing.

These pages should NOT be added to your Main Navigation Menu (i.e. they are under the "Not linked" heading)

STEP-3a: Create a New "Custom Page" for Search and Add to Your Site Menu

Open a NEW browser tab and login to your IMAGEPRO dashboard.

In IMAGEPRO control panel, click "Menu" at the top and then go to "Manage Custom Pages".

Now create your new Custom Page:

(i) Ensure "Select Page" option is set as "New Custom Page"
(ii) Give your page an appropriate Title such as "Home Search" (don't use the term "MLS" as this is prohibited by most MLS)
(iii) Click the "Source" button so that you can paste in code
(iv) Now PASTE in the Buying Buddy <script> that you copied in step-1.
(v) Next, in a line underneath the <script>, copy and paste the code that will show the search form, which is shown here so you can copy it!

<div id="MBBv3_SearchForm"></div>

Finally, go to the bottom of the page and click the SAVE CHANGES button.

Step-3b: Add Home Search page to your Site menu

In your IMAGEPRO dashboard, click "Menu" at the top and then on this next page, click "Edit MENU".

The following steps help you to add Custom Pages to your site menu.
The Edit Menu panel page is displayed as two columns: The RIGHT list (Available menu Items) shows the actual menu that is displayed on your site, the LEFT list (My Menu) contains items you can add.

  1. Go to the bottom of the LEFT list and click and drag the item called "Custom Page" to the right die and release. You will now see "Custom Page" in the RIGHT list
  2. Now click the small EDIT button on this new item in the RIGHT list
  3. In the next panel (Edit Menu Item) - the TOP section shows the "Label" - change this to be "Home Search"
  4. In the bottom panel click the EDIT button. This shows you a list of custom pages. Select the page you JUST created and then click "Done".
    This returns you to the "Edit Menu Item" page - then click OK.
    This then returns you to the "Edit MENU" page - you MUST click the "Save Changes" button to make this live.

If you now preview your site, you should see the new menu Item. If you open that page you should see the Buying Buddy search form!
Seeing the form is a good indicator that all is working well so far!

Before the Search Form works, we need to add 2 more pages.

Step-3c: Add "Search Results" and "Property Details" pages

There are two more pages that need to be added to make the Buying Buddy system work correctly.

Make sure you set BOTH of these up correctly.

The Page Address (URLs) of these next 2 pages are important - they need to be added to your Buying Buddy account to tell the Buying Buddy system where to find the widgets to show results and the widgets to display property details!

In both cases, you will need to add some additional JavaScript so that the results and property details are fully shown and not cut-off. This JavaScript can be used on any page where results or information from the Buying Buddy is being cut-off because the page is not long enough.
This is the EXPAND PANEL JavaScript code to use, it should be pasted in directly after the code for each page (shown below):

$('#colno3').css('height', 'auto');

Step-3d: Create a "Results" page and a "Property Details" page

These steps are almost identical to steps 2 and 3 above.

Repeat this sequence twice to create your Results page and your Property Details page:
In IMAGEPRO control panel, click "Menu" at the top and then go to "Manage Custom Pages".
(i) Ensure "Select Page" option is set as "New Custom Page"
(ii) Give your page an appropriate Title such as (a) "Results" and (b) "Details"
(iii) Click the "Source" button so that you can paste in code
(iv) Now on each page, PASTE in the Buying Buddy <script> that you copied in step-1 (this is the same script in all cases).
(v) Next, in a line underneath the <script>, copy and paste the code that will show (a) Search Results and (b) Property Details, which are shown here so you can copy them!
For the Search Results page add:

<div id="MBBv3_ListingResults"></div>

and on the Property Details Page add
<div id="MBBv3_SearchDetails"></div>

On each page, after this, also past in the EXPAND PANEL JavaScript from Ste-4 above. Your code should look something like this

Finally, go to the bottom of the page and click the SAVE CHANGES button.

Now it has been saved, see the "Direct Links - Link #1" for this page shown in the top section for this page.
DO NOT add this page to the menu. However, the Link address (URL) is required so we can set it up correctly in your Buying Buddy account.
Make a note of "Link-1" for each page (e.g. /102/9983)

Step 3f: Configure your Buying Buddy account so that page names match

It's important that the Buying Buddy system knows the page address you used for your Foundation Pages, as Buying Buddy needs to know where to go to show search results, and where to direct your leads (via emails etc.) to see search results and details of a specific property.
So, in this step, you will add the page addresses to the Website Settings in Buying Buddy.

  1. In your Buying Buddy dashboard, from the current "Get Widgets" page, click the link at the top of the page to go to Website Settings.
    Or, Navigate to: Widgets > Website & Settings
    Then click the "Website Settings" link for your website.
  2. Scroll down to section "4. WIDGET FOUNDATION PAGES" to review the page addresses of the Widget Foundation pages.
  3. Check the page names shown and update them if needed.
  4. You will see that they are probably shown as just results and details - in which case you need to change these to say the actual names of the pages you created, for example - these might be 102/2983 and 102/2985, and in the browser when viewing these pages you will see the full address.

    NOTE: In the input field - do not start with a "/" - and only add the page address not the whole domain name.
    For example, if you Results page LInk-1 is this : /102/2983
    Then you would add just "102/2983" in the Results page field, as shown below:

    NOTE: Use the actual page names for YOUR site - don't assume that they are the same as shown in this example!

NOTE: Use the actual page names for YOUR site - don't assume that they are the same as shown in this example!

Step 4: Enable Property Sharing

Stay in the Website Settings panel in your Buying Buddy account for this next step!

To ensure that the social share options can be used to share properties from your website on Facebook etc, you must add an A RECORD to your domain's DNS records.

  1. In Website Settings, scroll to review section "3. SOCIAL SHARE OPTIONS".
    Or, Navigate to: Widgets > Website & Settings
    Then click the "Website Settings" link for your website. and then scroll down.
  2. Modify the DNS records for your domain as follows:
    Add an A-RECORD for the subdomain "bb"
    to point to:
  3. Once you have added your A-RECORD, set the 'Social Share Option' (below) to be YES, and SAVE SETTINGS.


"SQL Error" on Details Page

If you see this message then this is because you are attempting to view the Property Details widget on a page on its own without a reference to a property! Ignore this, the widget is installed correctly and this error is never seen.

Staging / "Sorry this domain is not authorized"

If you see a message that says "Sorry this domain is not authorized", then this means that the Widgets and Plugin JavaScript are indeed working correctly, BUT that your page address is a domain that is not authorized to display Buying Buddy Widgets. It is probably a staging domain that your development environment has applied while you are in the editor of your website.

There are two options for dealing with this:

  1. Make sure your actual domain name is applied and working - and then view the "live" site in which case widgets will be displayed correctly. You can then choose to ignore this message while in development.
  2. If you need to do more extensive development then you can request (via Help Desk) to add your IMAGEPRO development staging domain as an extra (free) "authorized" domain on your account.
    We call this a 'sandbox' development URL and it would be authorized temporarily while you do development.

Step 5: Doing More

You can use IMAGEPRO to create custom search forms and use all the capabilities of the Buying Buddy widgets.

Some example that you may like to consider include;

  • Adding a Featured Listings page to display your own listings
  • Showing your Sold properties
  • Creating neighborhood pages with properties for neighborhoods
  • Adding lead capture forms that send leads directly to the Buying Buddy CRM
  • Adding a general contact form widget
  • and a lot more!

You can now use Widget Themes to style widgets - or even add custom CSS too if you wish to.

See our demonstration websites for ideas and inspiration

If you need more help please contact us.

Updated on July 14, 2022

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support