Install Buying Buddy on Superlative

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

1. Get a Google Map API Key..
2. Create 2 new web pages
3. Add the "results" and "details" widget short codes, and also the Buying Buddy plugin to each page.
4. Setup Social Share settings

This article provides detailed instructions to guide you through these steps

Step 1: Get your Google Map API Key

A Google Map API key is required.

A Google Map API Key is required for any widget that uses a map. Widget features that do not use the map will function normally without a map key.
You should not postpone getting a Map Key - do this straight away so that everything works and you do not have to repeat this process.

Note: If this is a production or live website, you should obtain a Map Key.

Even if the Google Maps JavaScript library is being loaded (including a valid API Key) by third party code in you website, you must STILL add your Google Map API Key here.

Follow these instructions to Get a Google Map API key.
When you have created your Key, make sure it is added to Plugin Installation and Settings in your Buying Buddy account before proceeding with the next step.

Step 2: Add Foundation Pages with Widgets

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.

Only add the Buying Buddy JavaScript Library once to each page or else you will see odd screen behaviors.

First, create 2 key pages to be in your Buying Buddy account:

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

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

1. Login to your Superlative account and create 3 extra pages using the the Superlative Page Editor.
   
   For each page, now add a Content Block. You should select "Text Block".
   
   

Step-3: Insert Widget Code and Plugin on each Page

Step 3a: Add Widget Code

1. EDIT the new "results" page and click Edit page
   
2. 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.
   
   
   
3. Paste the following short code for the Buying Buddy "Results" widget into the code panel:
   <div id="MBBv3_ListingResults"></div>

Step 3b: Copy the Buying Buddy JavaScript Plugin JavaScript

If you have not yet added the Google Map API key to your Buying Buddy account (Plugin Installation and Settings), then you will see Google warning messages on all maps.

1. Menu Widgets / Plugin Installation and Setup
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
   You will be adding this to each page - so keep the page open in a browser.

Step 3c: Add Buying Buddy JavaScript to page

1. Now return to your Superlative page editor.
2. Paste the Buying Buddy JavaScript into the page before the widget code.
   
   See the image below - this shows the JavaScript and the Widget code all added in the editor.
   
   
   
3. Now click SAVE AND FINISH to save the text block for this page.
4. 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.

Step 3d: Repeat for 'details' and 'search' page

1. NOW REPEAT the above steps to setup your Details page ** Do not forget to do this! **
   Add BOTH the Plugin JavaScript and the widget short code.
   The Widget short code to use is:
   <div id="MBBv3_SearchDetails"></div>
   
   Note: The details widget may display a SQL error if you preview it - ignore this.
   Excellent! You have now set up the Details Foundation Page.
   
2. Finally, paste the Search Form widget to any other page using the process described above (this is for testing the search - this is not a foundation page).
   Add BOTH the Plugin JavaScript and the widget short code.
   The Search form short code is:
   <div id="MBBv3_SearchForm"></div>

Doing More

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.

Some example that you may like to consider include;

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

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

See our demonstration websites for ideas and inspiration

• https://charliesmithrealty.com (WordPress)
• https://charliesmithrealty.net (HTML / php)

If you need more help please contact us.