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 Buying Buddy plugin needs 3 key pages to be identified

  • Search Page
  • Results Page
  • Property Details Page

IMPORTANT:
It's not possible to add the Buying Buddy 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 Buying Buddy Widget to any page, you must also ensure that the Buying Buddy 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 Buying Buddy JavaScript Library before the DIV tag for the Widget. However, if you add multiple Buying Buddy widgets to a page, make sure you only add the Buying Buddy 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 Buying Buddy 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 Buying Buddy Plugin.
  3. COPY the plugin code

The Buying Buddy 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 Buying Buddy JavaScript before the widget code.  See the image to the right - this shows the JavasScript 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 Buying Buddy 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.

Admin