1.Installation Planning Guide #

This guide is to help you plan the installation and setup of the My Buying Buddy IDX and Lead Capture widgets on your website.

The following are the key phases you should go through, or consider for successful implementation:

The Bare Essentials

Most of the steps most of the steps described here are straight forward and do not require any advanced skills.

  1. Install the My Buying Buddy WordPress plugin or JavaScript libraries depending on your website
  2. Set up your foundation Pages
  3. Check the settings in your Leads and Contacts account for SEO and configuration options
  4. Test your installation

Extending your Integration

  1. Display Properties all over your website
  2. Roster options for agents, teams and offices
  3. Rounding things out by adding a login and register menu item

Advanced Topics

  1. Design options, colors and themes
  2. Create your own forms for search and lead capture
  3. Custom search links

2.Installing the MBB Plugin #

The method of installation of the Plugin depends on your website system.

If you have a WordPress site then follow instructions for WordPress.
Otherwise, follow the instructions most applicable to your website system.

In Summary

To setup My Buying Buddy IDX widgets on your website, this is the sequence of steps:

  1. Load the My Buying Buddy plugin (for WordPress), or the MBB JavaScript Library (for non-WordPress) is installed and loading on all pages
  2. Create and add a Google Maps API key for your website
  3. Setup your Foundation Pages
    1. Create a specific page in your website that will be for displaying the Results - and add the "Results" widget.
    2. Create a specific page in your website that will be for displaying the Details -  and add the "Property Details" widget.
  4. Add the IDX Search Form widget to any page (such as a home page or another page)
  5. Go to your Leads and Contacts Account and make sure that the Foundation Page addresses in Website Settings are all matching!
  6. TEST!

2.1.Get Ready to Install #

Before you roll up your sleeves and start installing, review the following checklist to make sure you are ready to go!

Buying Buddy DOES NOT WORK IN AN IFRAME.
Do not place Buying Buddy widgets in an Iframe or in a fixed height container.

What You Need to Get Started

To get Buying Buddy working on your website, you will need the following:

  • The "Welcome Email" sent to you with login access to your Leads and Contacts account
  • A "Google MAP API Key" that is valid for your domain(s) - see these instructions
  • A live website (authorized in your account - i.e. IDX approved by your MLS), that allows you to
    • For WordPress - install the Buying Buddy WordPress plugin
    • For all other websites - add the plugin JavaScript library
  • You will need to add designated Foundation Pages to your website AND register these as Website Configuration settings in your Leads and Contacts account, where you can put:
    • Results widget (this needs to be its own unique page)
    • Property Details widget (this needs to be its own unique page
  • Installation must be on an "Authorized Domain" which is setup in your Leads and Contacts account. This is the domain that your MLS has approved for IDX display. If you see a "Sorry this domain is not authorized" message, then yo are attempting to display widgets on an unauthorized domain.See notes bleow

"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. This can occur because you are using a development or sandbox domain, or your website system (Squarespace etc) is showing you a preview using a development subdomain etc.

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

Block "You Must Register" messages while Installing

When you are installing the MBB widgets and trying to get them all working, there is nothing more annoying than seeing "Please Register!" messages all the time!
These messages are showing because of the "Lead Capture Settings" set up in your Leads and Contacts account
There are 2 methods for dealing with this:

  1. Adjust the Lead Capture Settings to allow "unlimited searches" and "unlimited property views" etc. See this article for details.
    Of course this will then need to be reset when you go live.
  2. To temporarily prevent the system from requiring you to register / login, you can specify a URL parameter to turn lead capture off as you browse and test your website.
    ?bfg_user=true will turn OFF forced signup
    ?bfg_user=false will turn ON forced signup
    For example:
http://www.mysite.com/?bfg_user=true

Other Considerations

General

Do not use !important in your CSS - Recommended

If you use !important in your CSS this will override all and any CSS settings in the Buying Buddy widgets too. We strongly recommend that you create more specific CSS rules rather than use this method.

Cache and Caching

There are many ways to implement page caching - from CDN systems like Cloudflare, to website plugins. These are all designed to store a version of your page so that load time is reduced when requested.
However, a cache can interfere with the results shown on the various "Display" widgets (will not affecting searching).
Typical issues might include not seeing a recently listed property, or out of date thumbnail images.

To avoid these issues, we recommend the following types of action:
- configure your caching system to not cache pages with Buying Buddy display widgets.
- or, adjust settings for your cache to reduce the time of caching to a few hours rather than days.

Page Layout Considerations
For BEST results we recommend that you have a website that is fully Mobile Responsive.

Although widgets are fully mobile responsive, we suggest that you may want to create containing <div> sections for the widgets in your site. If the widget has a general height and width, then make sure this is accommodated and defined in the containing <div>.
If you have a WordPress site then review the various page templates available and choose page layouts that are appropriate for the Buying Buddy widget being displayed. For example, a wide page layout is best when showing search results.

For WordPress

If you use WordPress builder plugins, always paste in Buying Buddy widgets into a text block.

Using Widgets
In WordPress, widgets are shortcodes.
Always use the specified WordPress shortcodes for a widget if it is available as this will ensure the full SEO capabilities of Buying Buddy are incorporated when pages load.

DIVI Builder plugin
The DIVI Theme and Divi Builder plugin has been tested and found compatible at the following version.
Divi Theme 3.0.98
Divi Builder 2.0.60

Javo Home THEME
The JAVO Home Theme 2.06 appears to include a "defer' method that is applied to all JavaScript libraries
This causes the Buying Buddy plugin to fail in some areas. We were unable to fully investigate the issue for resolution, and in the end the client changed the Theme.

UberMenu Plugin
(Jan 2019) The "UberMenu" plugin (wpmegamenu.com) loads Google Maps API, and this should be disabled in settings for this plugin to (1) prevent code errors from the Maps API loading multiple times, and (2) allow the MBB Plugin to manage Google Maps functions.

For Non-WordPress

DOCTYPE HTML 5 - Recommended.
Buying Buddy widgets utilize JavaScript and for mobile responsive support and best results, the DOCTYPE needs to reference HTML5.

WARNING!
If your website has JavaScript errors then the Buying Buddy plugin may not work! Click here to learn more.

 

2.2.Installing the MBB Plugin for WordPress #

The Buying Buddy WordPress plugin makes it easy to add Buying Buddy Widgets on your WordPress site.

With WordPress, you should always use the Buying Buddy Widget SHORTCODES if they are available - i.e. do not use the HTML versions of widgets as this will block the SEO benefits of the Buying Buddy plugin.

VIDEO: Watch How To Install

Download the Buying Buddy WordPress Plugin

You must have at least WordPress version 4.5 to use the latest versions of the Buying Buddy plugin.
Otherwise you will see error message similar to this:
Fatal error: Call to undefined function wp_add_inline_script() in /home/charlies/public_html/wp-content/plugins/my-buying-buddy/includes/functions.php on line 184.

With the latest version (v4+) of the Buying Buddy WordPress Plugin, it's important that you use the SHORTCODES where available and not HTML <div> tags for published widgets.

In your WordPress site, you should only use Buying Buddy Widget SHORTCODES.
HTML <div> tags for Published Widgets are NOT supported and will not work with v4 of the Buying Buddy Plugin in WordPress.
(This restriction does not apply to Widget Functions and Widget Functions which should still be deployed as HTML).

For example:

  1. In your WordPress site, do NOT use <div> tags to display properties with a Display Widget (list, gallery, map), as these will not work.
  2. Do not add <div> code to a sidebar or footer "Text Widget" - use the MBB Widget ShortCode from the WordPress list of Widgets
  3. If you wish to add widget <div> code to your WordPress code base then you will need to replace with do_shortcode()

Install the Buying Buddy Plugin

Support for WordPress Themes

The Buying Buddy WordPress Plugin will work on any WordPress theme. However, see Specific Additional Notes for Themes below, which includes:
DIVI Theme.

Download:

  1. Download the latest Plugin ZIP file using the button and link above.
    You should 'save' and not 'open' so you download the .zip file to your computer.
    The file needs to stay in .zip format to upload it to your WordPress website.

To install and configure plugin:

  1. Go to your WordPress admin panel.
    Select "Plugins / Add New".
  2. Click the "Upload Plugin" button.
    Browse for the "My Buying Buddy -- WordPress.zip" file you previously downloaded, and click the "Install Now" button to upload and install it.
  3. After it is installed, you should click the option to "Activate" the plugin.
  4. After successful activation, you will be redirected to the My Buying Buddy plugin's settings panel (see below) where you MUST enter your unique Account ID (ACID) code and a Google MAP API Key.
    (Or you can access settings in the WordPress admin menu by going to Settings > My Buying Buddy) .

Plugin Settings

The following settings are shown in the Buying Buddy Plugin Options panel on your WordPress admin. See instructions below:

Required

  • Buying Buddy Account ID (ACID)
    This field is required.
  • Google Map API key
    Google Maps will only work if you specify a Google Map API Key.
    If the Buying Buddy plugin is being used to load Google Maps API (the normal case) then the Google Map API KEY should be added to the Website Settings in your Buying Buddy account.
    (Your theme may load Google Maps (e.g. DIVI Theme) in which case you need to adjust this setting.)
    The Buying Buddy WordPress plugin will then refresh settings (including the Maps API Key) from your Buying Buddy Account settings on a daily basis.
    There is no need to add the API Key to the Buying Buddy WordPress Plugin unless you need to utilize the API Key immediately. Otherwise, by waiting 24 hours, the plugin will be automatically updated with your Google Map API Key from your Buying buddy dashboard.
    If you need the immediate effect of the Google Map API Key then add to the Plugin Settings panel as shown above.

Optional Settings

  • Disable Loading of Google Maps library
    You may set this to YES to avoid duplication errors if your WordPress site or another plugin already loads Google maps with an API key.
    For example, the DIVI Theme will load Google Maps API and so the Buying Buddy plugin should NOT load Google Maps API (scroll down to see notes on DIVI theme)
  • Only Load Buying Buddy Library on specific pages / posts
    This option allows you to block loading of the Buying Buddy Plugin on specified Pages. Specify a comma separated list of WordPress page/post IDs.
    e.g. "123,45,67,789"
  • Disable Loading of Buying Buddy Library on all pages
    This function allows you temporarily turn off the plugin on all pages, which can be handy for troubleshooting.
  • BFG Express Site
    This option ONLY applies if you have an office account with the "Express Site" feature.
  • Disable loading of Social Sharing icons on Property Details page
    If you experience conflicts with social sharing then this option allows you to turn OFF this Buying Buddy plugin feature.

Notes for Specific WordPress Themes / Builders

DIVI Theme

The latest versions of the DIVI theme loads Google Maps API. You STILL require a Google Maps API key - but this should be applied to your DIVI theme as follows:

  1. In the WordPress Plugins menu:
    Click "settings" for the Buying Buddy plugin.
    Under "Option Settings", make sure you DISABLE (YES) the loading of Google Maps API by the Buying Buddy plugin.
    Click "Update Options".
  2. In the WordPress DIVI menu - go to "Theme Options" and then add your Google Map API key to the "Google API Key" field as shown below, and "Save Changes".
    You may need to clear any Cache.

Automatic Updates

As the Buying Buddy Plugin is currently not available via the WordPress plugin repository, you will not see messages with the plugin to update it.

The latest version (4+) of the Buying Buddy Plugin automatically checks each day and will update itself if a newer version exists.

Older Versions

IMPORTANT: Your should update your Buying Buddy Plugin.

Older versions of the Buying Buddy Plugin include a Dashboard News Widget that will show you the Buying Buddy Plugin changelog AND if a newer version of the plugin is available.
You should make sure the Buying Buddy Plugin News Widget is displayed on your WordPress dashboard so that you can see the changelog and news about the latest version.
See how to Update Your WordPress Buying Buddy plugin.

2.3.Installing the MBB Plugin on General Websites #

Using WordPress? If you are using WordPress, go to Installing the MBB WordPress plugin

For general HTML websites (i.e. NOT WordPress), you should add the MBB plugin <script> to every page where you intend to use any MBB widgets.

This line of code is best placed between the <head> and </head> tags and after any other JavaScript <script> tags.
However, if you cannot place the <script> tag in the <head> section of your site, you can alternatively embed it in the actual page where it is needed.

Additional specific instructions for some Website systems are provided in the following pages for

VIDEO: Watch How To Install

To Locate your Plugin Code

IMPORTANT:
1. Make sure you include your unique Account ID (ACID) in this line of code where it says 'YOUR_ACCOUNT_ID'.
2. You will also need a valid Google Maps API key.
  1. Navigate to: Websites & Widgets / Getting Started
    Then click the "Plugin Installation" button to view the installation instructions.
  2. Select the appropriate website. For a general (non-WordPress) website you will be shown the JavaScript that is your MBB Plugin.
  3. COPY and use the plugin code as directed for your website.

The Plugin Install instructions provides the appropriate MBB Plugin code. All you need to do is copy and use this code.

2.4.How to Add MBB Widgets to your Squarespace Website #

SquarespaceHere's how to add Buying Buddy to your Squarespace website. These instructions are designed to get you going. Once you get the JavaScript library installed and these basic pages working please refer to the general help articles for more help and assistance.

VIDEO: Install on Squarespace

Squarespace support articles that will help:

Please Note:

1. AJAX.
MBB will not function correctly on Squarespace sites where Ajax is enabled. For example, widgets may initially load but then with clicks to other pages with widgets on your site, nothing is being displayed.

Ajax is a special method for site loading which makes content-heavy pages much faster and more nimble. However, it can interfere with link functionality. If your Squarespace template supports Ajax, you may need to disable it in the Design menu to get anchor links and the Buying Buddy widgets to work.
See this article for how to Disable Ajax in Squarespace

Ajax is currently available in the following Squarespace templates (grouped by family):

  • Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West
  • Farro, Haute
  • Tremont, Camino, Carson, Henson
  • York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori

2. "Sorry this domain is not authorized"
Your Buying Buddy widgets are authorized to work on your IDX approved domain (and only on this domain).
When you are in Squarespace development area your site may be displayed using a Squarespace subdomain such as
"https://xxxxxxx.squarespace.com"
- and so instead of seeing the widgets you will see a message that says
"Sorry this domain is not authorized"
(Seeing this message means that the widgets and Plugin JavaScript are indeed working correctly!)

See instructions in the final step-4 below for options if you see this message.

Step-1: Add MBB JavaScript Code

In this step, we are going to add the MBB JavaScript library to your Squarespace site so that it loads on every page.

Step 1a: Get the Buying Buddy JavaScript Library Code

  1. Login to your Buying Buddy dashboard at leadsandcontacts.com.
  2. Navigate to: Websites & Widgets / Getting Started
    Then click the "Plugin Installation" button to view the installation instructions.
  3. Select the appropriate website. For a general (non-WordPress) website you will be shown the JavaScript that is your Buying Buddy Plugin.
  4. COPY the plugin code.

Step 1b: Add to Your Site

Now login to your Squarespace account

  1. Go to the SETTINGS section for your website
  2. In SETTINGS, scroll down the menu until you find and click the "Advanced" menu option.
  3. In ADVANCED, click the "Code Injection" menu item
  4. Paste the Buying Buddy JavaScript code (see above) in the HEADER section and then click SAVE
    ** Make sure the JavaScript code is formatted exactly as shown above with YOUR Account ID included.

This ensures that the Buying Buddy JavaScript is loaded on every page in your website. DO NOT MODIFY THE CODE.


Ensure that the Buying Buddy JavaScript is ONLY added once using the method described above.

Step 2: Add pages and widgets

2a: Create your plan for pages and widgets

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

  • Results Page (with the "Results" widget)
  • Property Details Page (with the "Property Details" widget)

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

Step 2b: Add Pages to your Squarespace website

Go back to your Squarespace account and create 2 extra pages for your site.

Create two BLANK PAGES, and we suggest you give them appropriate titles, such as "results" and "details".

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

squarespace_addpages

Step 2c: Insert Buying Buddy Widget Code to Display Widgets

Now go back and EDIT each page where you need to have Buying Buddy widgets, e.g. the Results page that you created.

With Squarespace, you need to edit a page and add a "Content Block" that is for "code".

squarespace_addcode

In the code panel, paste the <DIV> code for the Buying Buddy widget you want to show.

For example - in the image below this is the Results widget.

squarespace_pastecode

Once you have SAVED your page, you can view this page and if all steps are successful you should the Buying Buddy widget being displayed on the authorized domain.

Finally, get the Buying Buddy widget code for the Search form and add to any other completely different page in your site.

Step 2d: Configure your Buying Buddy account so that page names match

It's important that the Buying Buddy system knows how to direct your leads (via emails etc) back to these 2 pages to see search results and details of a specific property. So, its important to ensure these page names are set correctly in your Buying Buddy account.

Login to your Buying Buddy account at http://leadsandcontacts.com

Navigate to: Widgets > Website & Settings
Then click the "Website Settings" link for your website. and then scroll down to review the page addresses of the Widget Foundation pages

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 results.html and details.html, and in the browser when viewing these pages you will see the full address like this:

NOTE: Use the actual page names for YOUR site - don't assume that they are the same as shown in this example!
See step-3 in this this article on Foundation Pages

Troubleshooting

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

"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 subdomain that Squarespace has applied while you are in the editor of your website, e.g. "https://[some-subdomain].squarespace.com"

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 Squarespace development subdomain 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 3: Doing More

Your Squarespace site editor will allow you to create custom search forms and use all the capabilities of the Buying Buddy widgets.

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

If you need more help please contact us.

2.5.Install on Duda #

Here are some notes to help you with your installation of My Buying Buddy IDX CRM on a Duda website.

 

With Duda, to avoid conflict, we load the MBB JavaScript at the end of pages to load after the Duda scripts.

  • First, go to the Duda Developer Mode.
  • Place the MBB JavaScript library in the “body-end.html” section in Developer Mode of the editor.

2.6.Install on Joomla #

Here's how to add Buying Buddy to your Joomla website using the Buying Buddy Joomla Plugin.

These instructions are designed to get you going. Once you get the JavaScript library installed and the basic pages working please refer to the general help articles for more help and assistance. (updated November 2019).

Step 1a: Download the Buying Buddy Joomla Plugin

First, download the Joomla Plugin ZIP file. Do not unzip!

Download the Buying Buddy Joomla Plugin

Step 1b: Install Plugin

  1. In your Joomla Admin panel, navigate to Extensions > Manage> Install.
  2. Upload the Buying-Buddy_Joomla.zip file as shown below:

Step 1c: Enable and Configure the Buying Buddy Plugin

In your Joomla Admin panel, navigate to the Plugins Administration area, and search for the plugin as shown below:

Next, click the plugin name to see the plugin details.

  1. On the settings panel, enter your unique Buying Buddy Account ID (ACID) code and a Google MAP API Key.
  2. ENABLE the plugin
  3. Finally "Save & Close".

Step 2a: Create your plan for pages and widgets

Next, you need to create and identify 2 key pages to be in your Buying Buddy account:

  • Results Page (with the "Results" widget)
  • Property Details Page (with the "Property Details" widget)

Plus, you will also need to add a Search Form widget somewhere too.

Step 2a: Add Pages to your Joomla website

The first thing to do is login to your Joomla account and create 2 extra pages for your site, we suggest you give them appropriate titles, such as "results" and "details".

  1. Create an Article/K2 Item/SP Page Builder page.
  2. Now, create a menu item linked to this item/page, and title it accordingly ("results" or "details").
    You can also choose not to show this menu item in your menu bar by clicking on: "Link Type" tab and turn off "Display in Menu".

Step 2b

You can now add the various display widgets to the two pages you created.

It is recommended that you use the Sourcerer Joomla Extension to paste in the various <div> shortcodes for Widgets into your pages.

Make sure your Joomla! editor is on “Code” mode as shown below:

  • If using JCE Editor, change to code mode:
  • If using Tiny MCE Editor, change to Source Code view:

Be sure that the Sourcerer plugin is enabled.

In the panel, paste the <div> code for the Buying Buddy Widget you want to show:

  1. Results widget on your designated 'results' page:
    <div id="MBBv3_ListingResults"></div>
  2. Property Details widget on your designated 'details' page -
    <div id="MBBv3_SearchDetails"></div>

If you use Sourcerer, then the code you add would actually look like this:

  1. Results widget on your designated 'results' page:
    {source 0}<div id="MBBv3_ListingResults"></div>{/source}
  2. Property Details widget on your designated 'details' page -
    {source 0}<div id="MBBv3_SearchDetails"></div>{/source}

Once you have SAVED your page, you can view the RESULTS page and if all steps are successful you should see the Buying Buddy widget being displayed on the authorized domain.
NOTE: The Property Details widget page is only designed to viewed when used with parameters for viewing a property - so ignore SQL errors if you see them at this stage.

Clear Cache!

To ensure the most current version of the site is being served, it is recommended to delete Joomla’s cache and delete Joomla’s expired cache.
(See Joomla’s Documentation for instructions). In addition to Joomla's cache and expired cache, if you are using any CDN service, you also need to clear cache in the CDN server too.

Troubleshooting Tips

Some of Joomla! Component will by default strip down any raw html, css, JavaScript and php codes. Below you will find some of the most common issues of why the entered codes are not working:

  1. If you are using JCE Editor, please be sure to go to:
    Components-->JCE Editor->Profile-->Default-->Editor Parameters
    and turn on: "Allow Javascript","Allow CSS" and "Allow PHP".
  2. If you are using RSFirewall, please be sure to go to:
    Components-->RSFirewall-->Firewall Configuration-->Active Scanner and turn off: "Enable active scanner in the /administrator section".
  3. If you have default editor set to anything other than "Editor - none" or "Editor - CodeMirror" in the Global Configuration, change the editor to "Code mode" prior to entering the codes.
  4. If you are using "SP Page Builder", please be sure to use "Raw HTML" instead of "Text Block" to enter the codes.

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

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

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 development 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 3: Doing More

You may now add more Buying Buddy widgets and create custom search forms etc.

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

If you need more help please contact us.

2.7.How to Add MBB Widgets to your Weebly Website #

Here's how to add My Buying Buddy to a Weebly website:

Step-1: Add MBB JavaScript Code

In this step, we are going to add the MBB JavaScript library to your Weebly site so that it loads on every page.

Step 1a: Get the Buying Buddy JavaScript Library Code

  1. Login to your Buying Buddy dashboard at leadsandcontacts.com.
  2. Navigate to: Websites & Widgets / Getting Started
    Then click the "Plugin Installation" button to view the installation instructions.
  3. Select the appropriate website. For a general (non-WordPress) website you will be shown the JavaScript that is your Buying Buddy Plugin.
  4. COPY the plugin code.

Step 1b: Add to Your Site

Now return to your Weebly account and click the button to Edit Site.

In the top menu - click Settings:

 

Next, go to the SEO menu and then scroll down to find the panel for entering "Header Code".
Paste in the MBB JavaScript to this panel - and SAVE, as shown below:

By adding the JavaScript like this, the MBB library is now automatically loading on every page in your site so that any MBB widgets will be displayed. This script only 'enables' functions to work - you wont see anything changed on your site just yet!

Step 2: Add 2 Foundation Pages to your Weebly Site

Next, you need to add 2 special pages to your site (we call these the "foundation pages"), one will be used to display search results, and the other will be used to show property details.

NOTE: These pages should not be shown in your menu - they just need to exist!

Step-2a: Add a New Page

From the top menu, click "Pages".

Then click the "+" to add a new page. You should add a "standard" page as shown below:

Give your page a name, such as "results".

You should check the option to "Hide in navigation".
It may be best to set the header option to be "no header".
Check that visibility is set to "public". There is no need to change SEO settings on this page.

Click "Done" to save the page.

Step-2b: Add MBB Widget to your Page

Now, with your new "results" page still showing in the main editor, click "Build" in the top menu.
(If you are not currently editing this page, then because we chose to hide it from the menu you need to find it via the Weebly editor - so click Pages in the top menu, then select the page to edit - then click "Build" again in the top menu.)

Click and drag the "Embed Code" element from the Build options on the left. You may have to click the blue "show more elements" if its not shown.

The Embed Code element is then added to the page - CLICK it to see the option to "Edit Custom HTML" - you can then paste in your chosen Widget Code (e.g. "Results" widget or "Display" widget).
The code is automatically saved.

PLEASE NOTE! The widget will not be visible until you view the PUBLISHED site. So in the Editor, your page may look like it has nothing added. However, if you hover your mouse over where the element is you should see the Embed Code block highlighted and you can always review or edit it if needed.

 

 

That's it!
You have now got your page added with the MBB Widget too.

Step-2b: REPEAT and add the "Details" Page

Now go back to step 2a again and REPEAT to create your "property details" page, with the Listing Details widget.

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

If you followed the steps above, then then you should have 2 pages set up named "results" and "details".
When you come to view these in your live published site the page addresses will be http;//yourdomain.com/results.html and http;//yourdomain.com/details.html

 

 

It's important that the Buying Buddy system knows how to direct your leads (via emails etc) back to these 2 pages to see search results and details of a specific property. So, its important to ensure these page names are set correctly in your Buying Buddy account.

Login to your Buying Buddy account at http://leadsandcontacts.com

Navigate to: Widgets > Website & Settings
Then click the "Website Settings" link for your website. and then scroll down to review the page addresses of the Widget Foundation pages

You will see that they are probably shown as just results and details - in which case you need to change these to say results.html and details.html

See step-3 in this this article on Foundation Pages

 

Step 4: Add the Search Form widget to any page

Now you know how to add widgets, choose a page where you want your search form and add the MBB Search widget.

Step 5: Verify and Test

If you have completed steps 1-4 above then you can publish your Weebly site and use the search form to search for and then view properties.

Step-6: Doing More

Your Weebly site editor will allow you to create custom search forms and use all the capabilities of the MBB widgets.

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

If you need more help please contact us.

2.8.Install on PHP #

To install on a PHP website use the same method as installing on a general website, i.e.

  • Include JavaScript files in the header
  • Use MBB <div> shortcodes and other codes as needed on your website

The MBB widgets work with any CSS framework such as Bootstrap.

Advanced PHP API

A PHP class is available for advanced PHP programmers that allows you to update HTML with values coming from the API.

This provides the benefits of allowing you to make pages very SEO friendly and also pre-populate fields and forms with MLS field values.

2.9.Install on Adobe Muse #

With Adobe Muse the MBB plugin needs to be installed in a slightly different way to avoid conflicts with the MUSE installed JavaScripts

Muse loads its jQuery libraries using "Lazy Load" and the MBB Plugin normally loads the same way. This can cause intermittent conflicts.

To avoid this, add the MBB plugin in a different way, as described below.

Install Plugin

To Install the MBB plugin code,

  1. Click on your Master Page and select Page Properties.
  2. Select Meta Data - and go down to the <head> section
  3. Paste in the code as shown below - make sure you add in your own details!

INSTEAD OF THIS: The normal approach would be to add the MBB JavaScript like this:

<script src="https://www.mbb2.com/mbbv3/index/acid/MBB_ACID_GOES_HERE" type="text/javascript"></script>

REPLACE WITH THIS: But for Muse, add the plugin using the following lines of code in your <head> section

<!-- My Buying Buddy Plugin Code -->
<script type="text/javascript">
var MBB = { "mbbUrl" : "https://www.mbb2.com/version3", "data" : { "acid" : "MBB_ACID_GOES_HERE", "mbbdomain" : "YOUR_WEBSITE_DOMAIN_GOES_HERE" } };
// DO NOT INCLUDE http with domain i.e. www.mydomain.com, or subdomain.domain.com
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_KEY_GOES_HERE"></script>
<script type="text/javascript" src="https://www.mbb2.com/version3/css/theme/acid/MBB_ACID_GOES_HERE"></script>
<script type="text/javascript" src="https://www.mbb2.com/scripts/my-buying-buddy.4.0.js"></script>
<!-- End My Buying Buddy Plugin Code -->

Testing

The best way to test is to just add the SEARCH widget to a page and confirm this loads

Then set up your 2 foundation pages and make sure that your Website Configuration in your LAC account correctly names your 2 pages.
For example, if you have results.html - then double check to make sure that is how it is specified in the Website Configuration in the LAC.

2.10.Install MBB IDX on your Superlative website #

Here's how to add My Buying Buddy to a Superlative website:

Step 1: Create your plan for pages and widgets

superlativeAs with all sites, the MBB system needs 3 key pages to be identified

  • Search Page
  • Results Page
  • Property Details Page

IMPORTANT:
It's not possible to add the MBB JavaScript Library to a common 'head' section of your Superlative Website, which is the way this would be included for normal installations. So, this means that each time you add a MBB Widget to any page, you must also ensure that the MBB JavaScript Library is included on this page too. if you don't have the JavaScript Library loading on the page then the widget will not display.

Typically, you should just insert the MBB Javascript Library before the DIV tag for the Widget. However, if you add multiple MBB widgets to a page, make sure you only add the MBB Javascript Library once or else you will see odd screen behaviors.

 

Step 2: Add Pages to your Superlative Site

The first thing to do is login to your Superlative account and create 3 extra pages using the the Superlative Page Editor.

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

Results Page (with the "Results" widget)
Property Details Page (with the "Property Details" widget)
Plus, you will also need to add a Search Form widget somewhere too.

For each page, now add a Content Block. You should select "Text Block".

Step-3: Insert Widget Code on each Page

Now for each page, go to your Buying Buddy account: Widgets > Getting Started > Get Widgets
and copy the Widgets needed for that page.

Now go to the matching page that you created for this Widget and click to Edit Page.

If you created a Text Block - then click the "Add Text" link for this text Block. This will then show you an editing panel. At the bottom, you will see an option to switch to HTML. Click this button. When you do this, the rows of editing icons on the top of the Edit box will be hidden.

Now PASTE (CTRL+V) the Widget code for the appropriate page into the box. For example, paste the RESULTS widget on the results page.

Now, before you save this page you must get one more thing from your LAC account

Step-4: Get MBB JavaScript Library Code

  1. Navigate to: Websites & Widgets / Getting Started
    Then click the "Plugin Installation" button to view the installation instructions.
  2. Select the appropriate website. For a general (non-WordPress) website you will be shown the JavaScript that is your MBB Plugin.
  3. COPY the plugin code

The MBB Plugin code looks like this:

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key={YOUR_GOOGLE_MAPS_API_KEY }'></script>
<script type='text/javascript' src='https://www.mbb2.com/version3/css/theme/acid/{YOUR_BB_ACID}'></script>
<script type='text/javascript'>
var MBB = { mbbUrl: 'https://www.mbb2.com/version3', seo : 'true' };
MBB.data = { acid : "{YOUR_BB_ACID}", mbbdomain : "{THIS_DOMAIN_URL}" };
</script>
<script type='text/javascript' src='https://www.mbb2.com/scripts/my-buying-buddy.4.0.js'></script>

Now return to your Superlative page editor.

Paste the MBB JavaScript before the widget code.  See the image to the right - this shows the Javascript and the Widget code all added in the editor.

Now click SAVE AND FINISH to save the text block for this page.

Then make sure you click the green PUBLISH bar to make the change live.

When you look at the live page you should now see the MBB widget displaying.

Finally - REPEAT the above process to complete setting up all the widgets you need.

Step-5: Adjusting Presentation of Widgets

If you need to adjust the layout of your widgets, for example to make them wider or narrower, or show on a page in a particular way, then simply add some inline CSS to the widget <DIV> by adding a "style=......." section inside the <DIV> tag.

If you need to adjust colors, then use Widget Themes as needed.

2.11.Troubleshooting Installation #

Here are a collection of suggestions for troubleshooting your MBB Plugin installation.

Widget layout is jumbled and unorganized

if you see the layout of fields on your widgets all mixed-up and not correctly formatted, then you need to remove the <pre class="prettyprint"> code from around the widget shortcode.

This is how it can look:

If you see this, then edit your page and remove the  the <pre class="prettyprint"> code.

Can’t Get My Listings To Display

The most common problem causing listings to not display is using the wrong MLS Agent ID and/or MLS Office ID in a filter.

Perform a "lookup" of one of your listings in the LAC.
This will show MLS Agent ID and MLS Office ID

1. Login to your LAC account.

2. On the left - go to "Listings" - then "My MLS Listings" as shown below:

 

3. On the next panel, click "Lookup Listing" button up top
Search for one of your ACTIVE MLS#. This will then show the Agent ID and Office ID for this listing

4. You can now ensure correct values in your filter and/or Personal Profile.

NOTE:

The "display" widgets default setting - i.e. with NO filter  - is to show the account's "featured listings". See What Are Featured Listings for a full understanding of this

General Troubleshooting Checklist

Here are a list of issues to check when troubleshooting

  1. Use the browser debug console (Firebug etc) to check there are no JavaScript errors in your website.
  2. jQuery must execute without any errors. If jQuery has errors then the entire execution of all scripts will be broken.
  3. Using the WordPress plugin? Always Make sure you have the latest version of the plugin installed.
  4. Make sure you are only loading the MBB plugin ONCE. You can check this by looking at the source code of your generated pages.
  5. jQuery UI must not be loaded on your website as this will conflict with the jQuery UI that is included with the MBB plugin.
    Disable jQuery UI and allow this function to be provided provided by the MBB plugin.

Problems with Map Widget and Map Views

PROBLEM: The Map widget (or results map-view) doesn't load correctly, or the map controls (zoom, pan, etc) are not working.

The Google MAP API is probably loading more than once on your website page.
You can determine this by using a code inspector tool such as FIREBUG.

SOLUTION: If your theme or CMS system already loads the Google Maps API then use the following methods to stop the MBB system reloading it.

  • WordPress:
    Check to see if your WordPress theme can be adjusted to not load Google maps API
    Check other plugins for options that do not load the Google maps API
    Coming Soon! Watch out for our Coyote WordPress plugin release which will have options to control this.
  • Non-WordPress:
    Add the following "gmap/false" parameters to the end of the MBB JavaScript library call:
     .... mbbv3/index/acid/XXXXX/gmap/false

Map “Fullscreen view” Layering Issues

PROBLEM: Elements of your web design appear above the "fullscreen" view of the map.

This issue is caused because the elements that are appearing above the map are positioned relative, which means that although our map uses a very high z-index (600000), this is only relative to the container that the map is in.

Solution: You will need to specifically set the z-index of the offending DIV containers to be a lower number than it is currently.

For example, if you have a DIV container for the footer which is appearing above the map - then inspect the code to discover the z-index and change it to be a lower number until the problem is solved.

3.Generate and Set a Google Maps API Key #

The Buying Buddy Plugin loads the Google Maps JavaScript code which is required for the presentation of Google Maps.

To use Google Maps, you require a Google Maps API key (a long unique number that will be used when Maps load). Without this key, you cannot display Google Maps on a website.
Your Google API Key comes from YOUR Google account and is added to each Website Configuration panel for all your Websites set up in your Leads and Contacts Account.

Your Google Map API Key needs to be added to Website Settings for each of your authorized domains in your Buying Buddy account.

There are 2 things to do!
1. Generate your Google Map API Key from your own Google account.
2. Add the API Key to your Authorized Domains in your Buying Buddy  account.

This support article explains how to do this.

Download and print this 1-page checklist to help as you setup your Google Map Key.

The VIDEO below will also walk you through the full process too.

VIDEO: How to Generate and Set a Google Map API Key

If you added the Key and are still having problems getting Maps to display then see the Google Maps Troubleshooter

Google "Billing Account" Required
Google requires that billing details (i.e. a credit card) are setup in your Google account in order to use the API (explained in "Setup Billing" below).
NEED ASSISTANCE?
If you want Buying Buddy staff to assist with this process then you will need to provide us with your personal Google Account login credentials.
In such a case, we strongly suggest you change your password so we can do this - then change it again once we are completed. Also, please note that for security reasons, Buying Buddy staff will not be able to add or update your Google Account payment details.

Steps

  1. Login to your Google Account
  2. Start the Process
  3. Create Your Google API Project
  4. Setup Billing
  5. Enable Maps JavaScript API
  6. Set Quota
  7. Create Credentials
  8. Restrict Key and Authorize Named Websites (HTTP referrers) to Use your API Key
  9. Copy the API key to your clipboard for use in the next steps
  10. Add the Google Maps API Key to Your Buying Buddy Account

Also

Generate a Google Maps API key

Article updated Feb 2019.
Please note! Google keeps evolving their page designs - so the actual panels you see may vary slightly from the screenshots shown below.
Please let us know if you discover major changes to this process!

1. Login to your Google Account / Gmail account first.

You must have a Google Account (e.g. Gmail account) to generate a API key for Google Maps.
If you do not have a Google Account - you can create your new Google Account here.

If you are using a GSUITE account (personal, team or company), then you may need to have your GSUITE administrator enable the Google Cloud platform. If this creates a problem, you should use a personal Google account instead.

2. Start the Process

Once you are logged in to your Google Account go to the Google Cloud Platform dashboard
https://console.cloud.google.com

Click the Menu icon at the top left to show the menu.
We are going to look at two menu items here: "Billing", and "APIs & Services".

3. Create Your Google API Project

In the top blue bar of the page, click the current project name (e.g. "API Project") to open a pop-up panel so you can add a NEW PROJECT.

Click the "New Project" link/button on the top right of the pop up panel to create a new project.

Give your project a meaningful name so that you know what this API key is for in future.

Then create your project by clicking "CREATE".
Your project name should be available after 30-60 seconds.

From now on ALWAYS ENSURE that the project name you just created is selected in the top blue bar.

4. Set Up Billing

IMPORTANT. Google announced that as of June 2018, the Google Map API is now a billable service.
So you will need to set up billing details in order to use Maps API.

However, Google provides $200 of Free Use per month - which equates to 28,000 uses of the Map API.
And, we will show you how to set a Quota so that you never exceed the free threshold.

In order to have the free credit applied to your account, Billing details must be established.

QUOTA
When map your views Quota is exceeded (for any reason) maps will not function correctly. On your website you will see warning and error messages on the Map display.
(For webmasters, you will also see browser "console" JavaScript errors that say your "Quota is exceeded").

Make sure you follow instructions on how to use the Quota settings (section 6 below) to ensure you never get billed.

However, bear in mind:

  • It is highly unlikely that you will receive any charges for using the Google Map API service unless your website is receiving many thousands of visitors per month.
    (Google allows up to $200 free use per month, which equates to 28,000 dynamic map views per month).
  • Our instructions show you how to apply a Quota (in Step 6 below) - which can ensure you never exceed the threshold
  • If charges ever are incurred, Google will notify you so you can be in complete control.
  • The fees charged will be incremental over the first free $200.
    To put this in context, as of May 2018, Google's pricing is just $7 per month for an additional 1,000 dynamic map views.

From the Menu, click "Billing".
Make sure your new Project name is selected in the top blue bar!

Make sure the Project you just created is selected in the TOP blue bar - and click "Link a Billing Account" to create and link a billing account with this project.

Follow the next sequence of instructions to accept terms and conditions, and add your payment method.

You may see Google special offers and a year of credits which you can ignore as the standard pricing includes $200 of free use per month.

5. Enable "Maps JavaScript API"

Make sure your new project name is selected in the top blue bar on the page.

Click the menu  and go to "APIs & Services > Dashboard".

Click the button at the top that says "ENABLE APIS AND SERVICES"

On the next page, find the "Maps JavaScript API", and click the box to show the MAPS API page.

On the Maps API page, click the blue "ENABLE" button for this API.

The page may take a few moments now to reload as the Maps API is being enabled on your project.

6. Set a Quota

On the Maps JavaScript API page there are three menu item TABS in the top including "Quota"
Click "Quotas".

IMPORTANT!
If you see messages about needing a billing account but you have already done this, you should do a 'hard' reload of the browser page (e.g. CTRL+F5 or similar) to force Google to see that your billing account is indeed setup and connected.

In the Quotas panel, look down to find the small table showing "Quota Name" and "Limit"
For "Map loads per day", click the "pencil" icon to edit / set the Quota.

In the Quota Limit pop-up panel, uncheck the "unlimited" check box, and then type 1000 (one-thousand)  into the text box.
We suggest changing this to 1000, as this will then help ensure you don't exceed the free level of 28,000 per month.Google will ask you to confirm that you want to do this - so check that option,
Click "Save".
The quota is applied within 1-2 minutes.

7. Create Credentials (API Key)

After you have set Quotas, in the same area, now click "Credentials".

When the Credentials panel is loaded - click the button to "Create Credentials" and then select the "API Key" option.

Your API Key will then be created and you will see this confirmation panel.

Now click "RESTRICT KEY"

8. Restrict Key and Authorize Named Websites (HTTP referrers) to Use your API Key

IMPORTANT !! Restricting the key is very important as it will stop unauthorized use of your API key and theft of your quota.

In this step, you will be specifying the website domain names that are authorized to use your Map API Key.

You will then see the API Key panel (shown above) where you can set up Key Restrictions.
NOTE: Only setup "Application Restrictions" as described below - DO NOT set up "API Restrictions" - leave this as "Don't Restrict Key".

  1. Look down this panel for "Application Restrictions" and ensure this is selected.
  2. Under Application Restrictions, check the radio button option for HTTP referrers (web sites)
  3. Then, under this, type in the addresses of domains to authorize.
    Do one at a time MAKE SURE YOU TYPE THE ADDRESS IN CORRECTLY AS FOLLOWS:
    YOU MUST SPECIFY THE CORRECT WEB ADDRESS.
    The way you type this in is IMPORTANT - the Map Display WILL NOT WORK unless this is 100% accurate!

    1. For normal websites, you should specify two website addresses
      1. domain.com/*
        - i.e. type your domain with a add a forward-slash and a star symbol after
        Do not specify www or anything before the domain.
      2. *.domain.com/*
        -i.e. prefix with star and period and then your domain with a add a forward-slash and a star symbol after
        DO NOT type in http or www, or anything else like this before the domain name.
  4. Repeat for additional website addresses
  5. Click the SAVE button
    It will take about 5 minutes before the new API Key is recognized in Maps on your website.

NOTE: If your website is on a temporary URL while in development, then  you should also add the development URL too.
In the screenshot below you can see that I have THREE referrers authorized - two are the final URL, and one is the development URL.

9. Copy the API key to your clipboard for use in the next steps

On the same panel in the top section, click "Credentials" (next to the "Quotas" tab), to see the API Key.
Use your mouse to select the whole API key and copy it for the next steps (or click the icon at the end of the field to "copy to clipboard").

10a. Add the Google Maps API Key to Your Buying Buddy Account

The following will explain how to do this depending on the method and version of the Buying Buddy Plugin you are using.

You should always add the API key to your Buying Buddy account - see instructions below.

In addition, if you have a WordPress site, or you are using our PHP API it is always advisable to also add the API Key to your website too (explained below).

If your website system is already loading Google Maps then you should choose to prevent Buying Buddy from loading Google Maps as this will cause conflicts.
See Disable Google Maps API below.

Leads and Contacts - Add Google Maps Key

Add the Google Maps API key to your LAC Account in the Website and Widget Settings panel.

1. Copy the API key you generated from the Google Maps API Manager.

2. Log in to your Buying Buddy account.
Navigate to: Widgets > Websites & Settings
Then click the "Website Settings" link for your website.

3. For each of your websites, paste in the API key for that domain in the "Google Map API Key" section.
NOTE: If you are specifying multiple domains, then in your Google API panel each of these domains should have been set up as authorized referrers - see step 7 above.

4. Click SAVE to save this key for this website / domain.

You should now be able to use Google Maps on your website.
**Sometimes Google Maps API can take 5-20 minutes to be recognized and authorized by Google**

If you have trouble displaying Google maps on your site, please verify that the Google Maps JavaScript API is enabled in the Google Maps API Manager.

If you are having problems getting Maps to display then see the Google Maps Troubleshooter

10b. Buying Buddy WordPress Plugin (optional)

The Buying Buddy WordPress plugin will refresh settings (including the Maps API Key) from your LAC Account settings on a daily basis. There is no need to add the API Key to the Buying Buddy WordPress Plugin unless you need to utilize the API Key immediately. Otherwise, by waiting 24 hours, the plugin will be automatically updated with your Google Map API Key from your LAC Account.

Follow these instructions to add your Map API Key to the WordPress plugin:

In your WordPress Admin Dashboard - go to Plugins and and click "Options" for the Buying Buddy plugin to enter the API Key.
Add the Google Maps API Key to the Buying Buddy Plugin Options.

10c. Using the PHP API for SEO Plugin

Once you have added the API Key to your LAC account, add the Google Map API Key to the "googleapis.com" script which is part of the PHP API Buying Buddy JavaScript in the <head> of your site.

Disable Google Maps API

If you are having problems getting Maps to display then see the Google Maps Troubleshooter

The Buying Buddy system always requires Google Maps JavaScript API Code to be loaded in order to function.
However, if a separate component on your website or WordPress theme or Plugin is already loading the Google Maps API then can disable this method on Buying Buddy to prevent conflict.
IMPORTANT: If you rely on a separate system to load the Google Maps API then you still need to ensure that a valid API key is being specified.
The method for applying the API key will depend on your theme or plugin - but you MUST apply your OWN key to avoid issues.,

Buying Buddy WordPress Plugin

Go to your WordPress plugins view - then click Buying Buddy Plugin Settings from your WordPress Dashboard.
Choose the option to disable Google Maps API.
(You still require your Google Maps API Key to be added to your LAC Account)

JavaScript Plugin

Disable the Google Maps function as this is provided in your website JavaScripts.
This can be done by adding this parameter to the end of the Buying Buddy JavaScript code: "/gmap/false", as shown in the example below:

<script type='text/javascript' src='https://www.mbb2.com/mbbv3/index/acid/YOUR_ACCOUNT_ID/gmap/false'></script>

PHP API

Disable the Google Maps function by deleting the "googleapis.com" script which is part of the PHP API Buying Buddy JavaScript.

3.1.Troubleshooting Google Maps and Map Loading Issues #

For Google Maps to work, the following items must ALL be correct!

  1. In your Google account, 2 things!
    • You must have created a Google Map API key in your Google account
    • AND The HTTP referrers must be specified correctly with your domain name(s) (as per our instructions)
  2. In your LAC Account
    • The same API key from your Google Account must be copied into the website settings area for each of your in your LAC account
      (Or you may also have added the Key to the MBB Plugin settings in your WordPress site)

Contents

Typical Errors
How to verify
Visible Errors
Diagnosing Error Messages
How to Fix Issues

Typical Errors and Issues

Problems with Google Map API key will manifest as problems loading the Buying Buddy Map Widget or Google Maps.
These typically occur for the following reasons:

  1. There is a problem with the Google Map API key specified, e.g.
    • No Key specified
    • Wrong Key specified
    • HTTP Referrers incorrect
  2. The Quota for your Google Maps API key needs to be higher - meaning you also need to add billing details to your account.
  3. The Google Maps JavaScript code is loading multiple times (quite common in WordPress or when using packaged website "themes")
    NOTE - this error is referring to the underlying Google Maps JavaScript code - not an actual map!

The Fix The Issue section below explains the simple remedial actions you can take that usually fix the problem and get your maps working!

How to Verify

The Google API system typically takes 5 minutes or so to update.
If you have a WordPress site and you have NOT added the API Key to the Buying Buddy Plugin settings - then wait 24 hours before testing.
If you have a non-WordPress site, or you have a WordPress site and have added the API key to the Buying Buddy settings - then you will be able to verify the API key with 5-10 minutes. We always suggest you close the browser to clear the cache.

To verify that the Google Map API key is setup correctly, you can review any error messages shown in your browsers Web Developer console, OR, you may actually just see errors in the Widgets (see next section).

The best and quickest method to verify correct setup, is to use the Web Developer console in your Browser (Chrome, Firefox and Edge) as follows:

  1. Open any page on your website that is loading the Buying Buddy plugin (e.g. "search" form or "results" etc)
  2. Press F12 to view Developer Tools which loads in a separate window or possibly a sidebar
  3. Then look for 'Console' in the top menu (top of the developer tools window)
    .. and click this to see all the warning and error messages for this page.
    If you see ANY warning or error messages that mention "Google Maps JavaScript API.." then there is an issue!

Visible Errors Displayed on Widgets

Errors will affect the Interactive Map Widget and the Results Widget, and will typically present in the following ways:

1. Map Widget fails to load - nothing shown on page

In this scenario, the widget with the Map simply isn't displayed.
Your page will load, but there is nothing shown where you expect the map to be displayed.

2. Page can't load Google Maps correctly

In this scenario, the map has a dark panel overlay on it - and a message that says:
"This page can't load Google Maps correctly"

 

3. "Oops something Went Wrong"

In this scenario, the Map Widget loads but is hidden with a grey panel and a message that says:
"Oops something went wrong".

 

Diagnosing The Error

1. Check Error Messages in your Browser's Web Developer Console

Error messages will be displayed when you view the JavaScript console (e.g. F12 in Chrome, Firefox or Edge to see Developer Tools)

Look for any of the following messages:

  • "Google Maps JavaScript API error: ApiNotActivatedMapError"
  • "You have included the Google Maps API multiple times on this page"
  • "Google Maps API Error: MissingKeyMapError"
  • "You have exceeded your daily request quota for this API"

Console Messages

On your webpage, press F12 to view Developer Tools.
Then click 'Console' in the top menu to see error messages. You may see many messages - so scroll down and identify the map API errors as highlighted below to confirm the specific problem.
This example shows the Chrome Console messages, but Firefox and Edge look practically identical.

 

Fix The Issue!

1. Google Maps JavaScript API error: ApiNotActivatedMapError

This error message indicates that you have not enabled the "Maps JavaScript API".

This is a common issue and easy to fix. This error means that you did everything else OK, but in your Google API account you didn't yet "enable" the "Map JavaScript API"

To fix this, log back in, to your Google account and go to your Google Cloud Platform (GCP) dashboard https://console.cloud.google.com.

Then in the left menu - choose "APIs and Services". Then follow STEP-5 in instructions for Creating and Setting a Google Map API key.

Once you have "Enabled" the "Maps JavaScript API", allow a minute or so before testing again.

2. Google Maps API Error: MissingKeyMapError

This error message is indicating that there is NO API key setup for Google maps on the current website domain.

To fix this, you must (a) create a Google Map Key - and specify your website domain correctly, then (b) add it to your Leads and Contacts (LAC) Account.
(Or, if you are using an existing plugin or website feature that load Google Maps API then ensure a valid API Key is applied - see #3 below).

See the full instructions for Creating and Setting a Google Map API key

NOTE: Double check you have your domains specified correctly (section 5)

3. You have included the Google Maps API multiple times on this page

The Buying Buddy plugin loads the Google Maps API JavaScript code by default.

However, the Map functions (and other widgets) will often break if the Google Maps API code loads multiple times.

If you have a WordPress site then this error can be quite common. WordPress themes and many WordPress plugins also include Google Maps API code.
For example, the "UberMenu" plugin (wpmegamenu.com) does load Google Maps API (as of Jan '19), and this can be disabled in settings for this plugin.

If you have a custom or other type of site, then have your webmaster check what is loading.

To fix this, you should disable all but one version of the Google Maps API - for example, disable the Google Maps in the Buying Buying plugin.

IMPORTANT
Regardless of how you load the Google Maps API (via the Buying Buddy plugin or some other method) you STILL require a valid Google Map API Key for your website(s) to be specified!
NOTE: If you choose to disable the loading of Google Maps API in the Buying Buddy Plugin, then you will need to follow the instructions for how to apply your API key to your other chosen method. In this case, any API Key added to the Buying Buddy plugin or your LAC account will not be used.

See instructions for how to do this in "Disable Google Maps API Function" section at the bottom of Creating and Setting a Google Map API key.

4. You have exceeded your request quota for this API

This message will be shown if the MAP API Key you are using has exceeded its quota for use.

Typically, this issue can be resolved by returning to your Google API dashboard and taking the following 2 actions

  1. Add billing details to your Google API account
  2. Once billing is set up you will be able to change the Quota for the Maps JavaScript API in your account

See instructions for how to do this in "Set Up Billing and Set Quota" section in Creating and Setting a Google Map API key.

If you are still seeing the same "quota" error message once you have done this, then check if you are relying on a resource other than Buying Buddy to load the Google Maps API and look carefully to confirm you do have a valid API Key applied.
This can be done by inspecting the webpage source code (usually CTRL+u) on a page where Google Maps (i.e. one of the Buying Buddy widgets) should be loading.

Not Your API Key?

We often see WordPress themes and plugins with the Google Maps API already installed as part of the theme. However, if the Theme or any Plugins being used have not explicitly asked you for an API Key, then it is VERY likely that they either do not have an API Key specified, or they are using a common (old) API Key that was added by the developer, which is now being used by anyone else using this theme or plugin!

Any of these scenarios will cause problems trying to load the Google Map API (such as the "daily quota being exceeded").

So in such cases, look at the source code for your webpage (CTRL+u) and search for "maps.googleapis.com" in order to locate the Google Maps API <script>.

It should look something like this:

<script src="https://maps.googleapis.com/maps/api/js?key=AIfdgHgbM-tPZj7dHlU"></script>

NOW CHECK! Make sure that the ?key=[API KEY HERE] is the API KEY that you obtained for YOUR website (see how to Get a Google Map API Key)

 

If You Need Help

Don't panic - please submit a help ticket and we'll be pleased to help you!

4.Setup your MBB Foundation Pages and Test! #

The two required Foundation Pages form the 'backbone' of your Buying Buddy IDX widget system in your website.
The webpage URLs of the Foundation Pages are part of your widget and account configuration (see below on how to set this up).

Make sure the MBB plugin is installed before proceeding with adding widgets to pages.

NOTE: The names of the MBB widgets all start with "MBBv3_" - do not be concerned about "v3" as this is simply a naming convention and has nothing to do with the plugin version or anything else!

These 2 Foundation Pages contain the 2 core widgets that establish the operational foundation of the Buying Buddy service in your website:

  • A RESULTS page, on which you must place the "Search Results" widget that will display results
    e.g. www/mydomain.com/results or www.mydomain.com/results.html - any page name is OK
  • A PROPERTY DETAILS page on which you place the "Property Detail" widget that shows details for properties.
    e.g. www/mydomain.com/details or www.mydomain.com/details.html - any page name is OK
When clicking the "View" button to view details, the property details display will be loaded as an html overlay on the current page
This is NOT a pop-up. It's a fast way to load property details and helps with performance.
You will notice that the Browser Address is also modified to make it appear as if you are on a new page. But this is not actually occurring.
Consequently, it will 'appear' as if the details page exists - but do not be fooled! - the details you are seeing are being displayed on top of the current view.
You must ensure that you have an actual 'property details' page and that it has the 'property details widget' on it.

Now you can add the Search Widget - to display the search form on any page.

foundation-pages

The URLs of the RESULTS and PROPERTY-DETAILS foundation web pages MUST MATCH the configuration of the widgets that is set up in your account in your Website Settings (step-3 below).

Step-1: Create Foundation Pages in Your Website

Create or identify the pages you intend to use and make a note of the page URLs.

The page name can be anything you like. However, these URLs must match the Website Settings in your Leads and Contacts account - see step-3.

WordPress Only

Ensure that your Details page does not have a 'Parent' page set. The long-tailed URL feature can then be enabled so that property details are displayed on a uniquely formed URL that can be indexed by Google and other search engines.

For Example:
Set your Details page without a parent - like this:

http://www.yourdomainname.com/property/

Individual properties can then be displayed on unique URLs, like this:
http://www.yourdomainname.com/property/denver_111111--1122-Main-St-Highlands-Ranch-CO-80129

Step-2: Add Widget Code to Each Page

When you have the foundation pages identified, add the appropriate widget to the HTML code on this page to display the right function for that page:

1. Search Results Page URL

<div id="MBBv3_ListingResults"></div>
Or for WordPress:
[mbb_widget id="MBBv3_ListingResults"]

2. Property Details Page URL

<div id="MBBv3_SearchDetails"></div>
Or for WordPress:
[mbb_widget id="MBBv3_SearchDetails"]

 

Step-3: Ensure Website Settings match Foundation Page URLs

The two pages you created for Results and Property-Details should now have the appropriate widget code on them.

Now you MUST ensure that these page addresses are correctly set in Website Settings in your Buying Buddy Account. To do this

2. Log in to your Leads and Contacts account.
Navigate to: Widgets > Websites & Settings
Then click the "Website Settings" link for your website.

On the Website Settings page:

  • Make sure you have selected the correct TYPE for your website (WordPress or non-WordPress)
  • Scroll down to see Widget Foundation Pages section.
  • Make sure that each page address shown matches the actual page you have created and set up in your website.
    For example, if your results page is "www.mydomain.com/search-results.html", then type in "search-results.html"

 

 

Step-4: Testing - Make sure Widgets Work!

Add the search form to any page to test.

<div id="MBBv3_SearchForm"></div>
Or for WordPress:
[mbb_widget id="MBBv3_SearchForm"]

Once you have completed this step, the MBB widgets should be fully operational.

You can test this by running a search!

If you find that running a search from the Search Page does NOT bring you to the Results page, or clicking on a property doesn't bring you to the Property Details page, send us a trouble ticket via the Help Desk, highlighting the set of URLs you want to use for your 3 pages.
We will ensure the widgets are set to match the addresses of your webpages.

SEO Considerations for your WordPress MBB Plugin

In addition, the MBB plugin makes the following changes to only your Property Details page:

  • The Title of the Browser will be rewritten to include the Property Address and MLS Number.
  • The Title of the Page (<h1> tag) will be rewritten to include the Property Address and MLS Number.
  • The Canonical Link that WordPress includes by default will be removed for the Property page to improve search engine indexing.
  • If you are using the All in One SEO pack plugin, we will update the Meta Description tag to include the Property Address and MLS Number. We will also disable the Canonical Urls feature for this plugin on just the Property page.
Note: We cannot guarantee that all of the above changes will occur on your WordPress website since other SEO plugins and some Themes can override what we are trying to set.

For Display widgets like the Featured Gallery, Featured List, Broker and Property Details widgets, we ensure that search engines can successfully crawl these widgets for property links and information about the property.

Step-5: Add other widgets as required

Once the foundation pages have been setup, they are used by the other MBB Widgets that you may choose to deploy on other pages in your website.

Other MBB widgets, such as the Display widgets (Gallery, List, Map) and the Quick Search widget can now be placed on any page.

NOTE: Each individual widget can be used any number of times. The display of different properties from one widget to another is achieved through the use of the SEARCH FILTER that customizes any widget.

widget-system

5.Adding More IDX Display and Lead Capture #

One of the great features of My Buying Buddy is that all the services to Consumers are delivered in your website with a collection of Widgets and custom codes. This means that instead of just adding IDX to your website in a 'boxed' frame, with My Buying Buddy you can use Widgets to create specialist page content or search functions to help with your marketing.

Using Widgets, its possible to place useful property related content on any page anywhere in your website.

Display properties all over your website - on neighborhood pages, property specific pages and even in your blog articles.

5.1.Display Properties Across Your Website #

It's easy to display any properties on any page of your website - including a blog post.
For example

  • Are you in a coastal area? Ski slope properties? Or on a beach, or with ocean views?
    Nearly all the MLS search criteria are available to you, so take advantage of this and create really specific, niche pages for YOUR market.
  • Are you writing a blog post on the latest market stats for a neighborhood. Include a block of live results showing the latest homes for sale in this neighborhood

To do this, you will need to know how add a blog post or edit pages on your website.

Just Two Steps...

Getting properties to display on your website is easy!

1. Create the Widget Code to Display Properties

The "Widget" code will display the properties you want people to see. This is easy to do and the "Display Properties" wizard in your account will guide you through the steps.

Follow the instructions below to create the widget code.

  1. Log in to you Leads and Contacts system at www.leadsandcontacts.com.
  2. Click the Widgets link in the left side navigation of your user dashboard, then click Display Properties with Widgets. This will start the display wizard.
  3. There are four steps in the wizard:
    1. Choose the type of display you want then click Next Step. Your Choices are
      - List Display
      - Grid Display
      - Map Display
    2. Set your listing options and click Next Step. Your choices include:
      - Showing all MLS listings, only your listings, or only listings from your office
      - Showing 10 or more properties on a page
      - Sorting your listings by date, price, or city
    3. Set your filter criteria.
      Pick the location and features of the listings you want to display. You can pick multiple things to filter on.  Once you think you'e got what you want, be sure to click the Preview Listings button and check your results. When the results look good, use the back button at the top of the screen to get back to step 3 and click Next Step.
    4. Step 4 will give you the code that you need for HTML and WordPress.

2. Paste the Widget Code on Your Website

The code you use will depend on your website system. For example if you have WordPress or other similar CMS (Content Management System), you will use the widget code for WordPress.

Once you've gotten the widget code, (step 4 in the section above), follow the steps below to complete this.

  1. Determine if your website is WordPress or HTML. Note: If you do not know, or have no experience, you might be best handling this off to your webmaster for assistance.
  2. Copy the matching code for the type of website you have.
  3. Paste the code onto the page that you want to display those properties.

 

PRO TIP

Create pages specific to your audience!

Think of your clients -- Are they down-sizing? Looking for retirement communities? Wanting to be near specific school systems? Interested in condo life?

Create pages specifically for them and display those properties. For maximum benefit, add a short paragraph above the listings that talks about that specific lifestyle. This will allow people to connect with your search results, and gives you a little SEO boost in the process.

5.2.Display Properties on any Webpage #

MBB Display Widgets - with Search Filters - let you present any properties on any web page or blog post.

For example, you might want to show a block of Recently Listed homes in a local City, or show all Fix-Ups between $100K and $200k with more than 3 bedrooms, and so on.

Display Widgets

To add listings to your website, follow these steps::

  1. Login to your LAC Account and create a display widget.
  2. The display widget will generate the code that you need, including any specific filters for property types.
  3. Copy the code that is generated, and paste it on your webpage.

Watch this short movie that shows you how its done - or print this page for reference!

VIDEO: Display Properties on Your Website

To Add Listings on Your Website

1. Check that the MBB Plugin is loading on your page.

If you have a WordPress website that is already displaying properties from the Buying Buddy system then you do not have to do anything more.

But, if you have an HTML or PHP, or similar website, then double check to make sure you are loading the MBB Plugin JavaScript on the page that you want to display properties on.

2. Decide where you want your listings to appear.

Identify an area on the webpage or your Blog post where you're going to show the properties. Make sure you have enough space, if for example, you are using a gallery or map display.

If you intend to simply show the listings at the end of a block of text or at the end of the page, then this not something to be concerned about.

3. Use the Display Widget tool.

Login to your LeadsAndContacts account and

Navigate to: Widgets > Display Properties with Widgets

Follow the sequence of steps in the display wizard:

  1. Choose how you want listings to be displayed, then click the green Next Step button at the bottom of the page. Your display options are:
    * List - properties are in a list with a thumbnail image on the left
    * Gallery - properties appear in a grid format with images above the details
    * Map - properties are displayed as points on a map

  2. Set your options, then click the green Next Step button at the bottom of the page. Your options include:
    * Type of listings - All listings in the MLS, your office/your listings in the MLS, or your private listings (not in the MLS)
    * Number of listings to show - more than this and the user will get a link to show more
    * Sort order - by date, price, or city

  3. Set your search criteria. This creates your "filter" on the results. For example, show only condos, or show properties priced between $200,000-$300,000.
    Note: Once you've set your search criteria, check that you're creating what you want by clicking the Preview Listings button at the bottom of the page.
    -- If everything looks right, click the back button, then click Next Step.
    -- If you need to adjust your criteria, click the back button, change your search paramters and repeat your Preview Listings.

  4. Step 4 of the wizard shows your code. Pick the correct option for your website (either HTML or WordPress), and use your mouse to select the whole piece of code. Then copy it to your clipboard.

4. Paste the code on your webpage.

Now go to your webpage or blog post and put your mouse where you want the listings to be and PASTE the code.

Save your Blog post or webpage and then view it to see properties!

Remember the Filter is defining the search criteria, so every time the page is viewed, the latest most relevant properties will be shown.

 

If you want to learn more about creating Filters or Using Display Widgets, see the Knowledgebase.

6.Roster Widget Options #

There are two "roster" widgets, designed to present Agent details, Team Details or Office Roster and Location Details on your website.

Roster widgets use information from the Agent's User profile (and your Account Settings)  to create these displays.

Although there are 2 Roster widgets (Brokers Widget and OfficeRoster Widget) - both will show exactly the same "About Me" page for an agent, which includes:

  • Photo
  • Contact details
  • Social connections
  • Office location
  • About Me
  • My Active Listings
  • My Sold Listings

To ensure the best possible presentation of Agent's Profiles and team details, you should ensure that User Profiles are accurate and as complete as possible, and also ensure that you have setup and Office Location too in your Account Settings.

The two roster widgets vary as follows:

  1. MBBv3_Brokers (for any website)
    This widget can be used generally with few restrictions.
    It does not offer permalinks for profile pages
  2. MBBv3_OfficeRoster (for WordPress or PHP)
    This widget is designed to provide permalinks (an actual web address) for Agent profile pages (i.e. www.mybrokersite.com/team/CharlieSmith)
    It can be used on WordPress and on PHP or other websites where you are able to modify the HTACCESS file.

 

id=MBBv3_Brokers id=MBBv3_OfficeRoster
Feature   WordPress PHP
Available for ANY website WordPress only PHP only (requires htaccess edits)
Default View Users Offices Offices
Can load on Any page only for slug /team only for slug /team
Allows search for Agents Yes Yes Yes
Displays Agents on Roster Yes Yes Yes
Shows Agents profile with contact, BIO and listings Yes Yes Yes
Displays Offices Yes (filter) Yes (default view on /team slug) Yes
Provides Permalinks for Agent Profiles No Yes Yes
Provides Permalinks for Offices No Yes  Yes
Requires rewrite rules in HTACCESS? No No Yes
Uses filters to control what is displayed? Yes No No
Uses page slugs to control what is displayed No Yes Yes

 

See the following pages for more details on each widget

 

7.General Design Considerations #

There are several aspects to design that are worth considering.

1. Add a "Login | Register" Quick Widget or Menu Item On Your Website

Most consumers are familiar with the idea of "joining a service" (sign up / register) - and then logging-in again when returning to the website that provides the website.

It can be a powerful message about the services in your website to position a "Login | Register" link in the top of your website

The top-right corner of a website design is often the place to seek and locate these indicators.
You can use the MBB Login-Register Quick Widget to recognize the logged in status of the website visitor and display the appropriate message.

 

2. Add a Disclaimer Widget to Pages to Avoid it loading on each widget

This widget takes care of displaying the appropriate set of IDX disclaimers on a page as required for your MLS.

When it is used, it will suppress the disclaimers from showing up on other widgets on that page.
using the Disclaimer widget can help keep your page layouts less cluttered.

3. Widgets are Responsive

This means that when loading, they fill the available space. And, as the screen gets smaller, their layout adjusts to fit the smaller screens.

From a design point of view, you should try to place MBB widgets in layout wrappers that are also responsive - and also accomodate this adjustment.

  • Page layout wrappers should be responsive.
  • At mobile sizes, the left and right margins and padding on layout wrappers should be minimized.

4. Widgets can be Styled with Themes

See the support artcile on MBB Widget Themes

7.1.MBB Theme Design #

Theme Editor Panel

To access the Theme Editor
Navigate to: Widgets > Getting Started and click Widget Themes.

The theme is applied to your website widgets in step-3 of the the Website Configuration panel in "Website Settings".

This is what the Theme Editor looks like, with all the options shown. The "preview' for the specific options displayed is shown underneath.

mbb_theme_editor

This is the Preview that reflects the choices shown:

mbb_theme_editor_preview

7.2.Using CSS to Change Design #

My Buying Buddy widgets load HTMLS on your webpage using JavaScript / AJAX.
It is therefore possible to use the Console functions in your browser to inspect elements and identify the CSS classes.

#MBBv3_ Wrapper

All MBB CSS elements MUST be within a wrapper with an ID starting with #MBBv3

IMPORTANT - avoid using the underscore character after this as this will cause conflicts with other components.
e.g. this is permitted: class="MBBv3Form", but this is NOT permitted: class=MBBv3_Form"

CSS Elements and Hacks

The following are a collection of CSS rule examples.
Use a browser code inspector tool to see details of CSS.

/* RESULTS WIDGET */

/*Adjust slider bar selector handles background color */
#MBBv3_ListingResults .ui-state-default {
background: #dd2c2c !important;
}
/* Adjust slider bar selector handles tooltip background color */
#MBBv3_ListingResults .bfg-slider-tip{
background-color: #dd2c2c;
}
#MBBv3_ListingResults .bfg-slider-tip:after {
border-top-color: #dd2c2c;
}

Other CSS articles:

 

8.Custom Forms and Sample Code #

The MBB Codepen Collections have examples and samples of HTML, CSS (and JavaScript code where used) for use by WEBMASTERS in your own websites in addition to MBB Widgets.

These Codepen examples are to help you with layout and design. Make sure you refer to the appropriate support articles to ensure that the forms you create function as desired.

Read the comments included with the sample code for guidance on how to edit.

Support for Codepens can be requested by submitting a help ticket.

PLEASE NOTE: Note these code samples are NOT WIDGETS.
They are blocks of HTML code that DO REQUIRE modification by you to insert and verify appropriate field names, field values, API keys, MLS codes and so on.

IMPORTANT: The code samples provided include references to example data and the demo mls. You MUST ensure that you review all form parameters and fields and any API-Authcodes, MLS Name and field names used in any JavaScript to ensure they are configured correctly for your account and MLS. See the support articles for Custom Search Forms and Custom Lead Capture Forms for complete technical guidance and instructions.

SAMPLES CONTAINING JAVASCRIPT: Samples with JavaScript may be more complex and require more technical knowledge.

DISCLAIMER
Codepen Pens / samples are provided to help you with coding and design ideas. They are for demonstration purposes only and are provided on an 'AS-IS' basis.

  • USE OF CODE PENS REQUIRE MEDIUM TO ADVANCED HTML, CSS AND JAVASCRIPT SKILLS.
  • Code Pens are not guaranteed to work in your website environment.
  • Fields and functions demonstrated may not be supported by the specific IDX RETS data feed we received from your MLS.

The current codepen collections are:

    1. Collection of Buying Buddy Custom Search Forms
    2. Collection of Buying Buddy Custom Lead Capture Forms
    3. Collection of Buying Buddy samples not related to forms

If using a WordPress site then you may need to utilize methods that allow addition of raw HTML to your WordPress pages and posts.

Requirements

Ensure the MBB plugin is installed on web pages as these code samples use the core MBB CSS and JavaScript library.

jQuery

ONLY IF there are jQuery statements in the sample JavaScript code them you MUST have jQuery loading.

If your website does not have jQuery loading then you will need to add it.
Additionally, you may need a "jQuery wrap" around relevant JavaScript (see below).

There are many hosted libraries available, for example, Google provides such libraries at

https://developers.google.com/speed/libraries/#jquery

This is Google's hosted library for jQuery if needed:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
--- add this line of code in the same place you added the MBB Plugin JavaScript for your site.

Test for jQuery?

If you are unsure if your site has jQuery then you can load this script on a page and check the message that is shown.


<script type="text/javascript">
window.onload = function() {
if (window.jQuery)  { alert('jQuery is loaded'); }
else  { alert('jQuery is not loaded'); }
}
</script>

jQuery Wrap

If your website is WordPress OR you are using the my-buyingbuddy.js include file then you can remove this jQuery wrap from the sample code.

The following applies if you site is NOT WordPress and you are NOT using the my-buying-buddy.js file include.

The jQuery statements shown in the sample JavaScript code (and shown below) must be used.

Because Codepen is not WordPress, all JavaScript samples included in Codepen are shown WITH this jQuery wrap where required.

The wrap code looks like this:

jQuery(document).on("mbb-widgets-loaded",function(){
...
});

<div id=MBBv3Form...> wrapper

All HTML code should be enclosed inside this wrapper that triggers the application of the MBB CSS classes.

This wrapper that must be an ID that starts with MBBv3Form e.g. the following are all acceptable variants where you may want to have multiple forms on a page.

  • <div id=MBBv3Form">, <div id=MBBv3Form-1">, <div id=MBBv3Form_myform">, <div id=MBBv3Form7">

Additional CSS classes and JavaScript are shown only where needed.

Remember: You can create custom forms using any HTML and CSS, you are not obliged to use the MBB CSS
Our Codepen samples utilize the MBB CSS library to assist with your layouts.

Parameter: mls_id

The "mls_id" is the ID used by the MBB system to identify YOUR MLS and this is used in filters and API calls.
When used in the sample code, the reference will be to our Demonstration MLS, and the mls_id for this MLS is "demo".
You'll see it used in ways like this: mls_id:demo or /mls/demo/ or mls_id=demo

To determine your MBB "mls_id", go to your Leads and Contacts account and click "Widgets > Display Properties with Widgets" in the left menu. Go through all the steps to get to the last page where the code is shown. Look for the part that says filter="mls_id:xxxx" - the "xxxx" part is YOUR MBB mls_id.
There are a variety of formats used - examples include: "co90", "1011", "denver" "mn287" etc

So, if your mls_id is "cy123" then where you see /mls/demo/, change this to be /mls/xy123/ etc.

Parameter: API-Authcode

Your API-Authcode authenticates your use of the JavaScript code on your "authorized website(s)" for API calls.

The sample code references a demonstration account and the auth_key for the demo account is used in the JavaScript like this:
auth_key:728iu4y49ru-7dbmdews11z

Your API-Authcode can be obtained from your Leads And Contacts Account Settings.

To get the API-Authcode - login to your LAC account and go to My Account > Account & Preferences, then go to the "Preferences" tab. Scroll down to see your account API-Authcode.

Other Parameters

All forms will contain various form fields. You must review and ensure that all fields names, values and options are set correctly for your Account and MLS.

See the support articles for Custom Search Forms and Custom Lead Capture Forms for complete technical guidance and instructions.

HTML Code

Copy and use HTML with CSS classes shown.

FORM Field Names and Values

Where FORMS include MLS search fields and values, always check these correctly match the field names and values that are used by MBB Filters for your MLS.

The sample code references fields and values from the Demonstration MLS.

Values and Names are easily checked by either inspecting the source code of the standard search form widget, or using the "Widget wizards" (either the Display Properties wizard or the Create Custom Search links wizard) - and inspect the generated filter="..." to discover field names and values.

CSS Code

Most of the CSS shown in the forms comes from the core MBB CSS library that is part of the MBB Plugin.

Any additional CSS is shown in the CSS section.

Feel free to create your own overrides and rules.

Stopping Spam with the CAPCHA

You may optionally include a mandatory CAPCHA form on any form by simply adding a few lines in your HTML layout.

This is essentially set using an IMG and an INPUT field, for example.

See the code in Codepen

Look out for how this is used on FORMS In codepen if you wish to

JavaScript Code

Most of the JavaScript used in the forms comes from the core MBB library that is part of the MBB Plugin (and is not visible).

Any additional JavaScript is shown in the JavaScript section.

Copy the JavaScript code and place in the <head> section of pages.
You MUST enclose between <script> and </script> tags.
Suggest Edit