Install Buying Buddy on Showit

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

  1. Get a Google Map API Key.
  2. Create 2 new web pages and add the "results" and "details" widget short codes to them.
    Confirm that the websites settings in your buying buddy account match the pages you just created.
  3. Add the Buying Buddy plugin JavaScript and Widgets to each page
  4. Add a search form to another page (add the Buying Buddy plugin JavaScript and Widget), and test

This article provides detailed instructions to guide you through these steps.

Please Note:

Staging Domain / "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 the Showit development area your site may be displayed using a Showit subdomain such as
"https://app.showit.co/?dk=dk:csx6s_fntgo4l5ftg4giyg"
and the "preview" domain may also be different too.
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!)
If you need your staging domain to be authorized, please submit a help ticket and request a sandbox / staging domain and tell us the specific URL you need authorized.

How to Add Buying Buddy Plugin and Widgets to a Page

With Showit, you must add the Buying Buddy plugin JavaScript AND widgets to each page where you want to use Buying Buddy widgets.

So, use this sequence for adding widgets to any page on your Showit website:

  1. Create your page in Showit
  2. Add the Buying Buddy plugin JavaScript to the page's Advanced settings "Custom Head HTML"
  3. Add the Buying Buddy widgets (embed codes) to the page canvas using Embed Code blocks.

Step 1: Get your Google Map API Key

A Google Map API key is required before you can install the plugin and widgets.

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

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

Step 2: Add Foundation Pages

Follow these instructions carefully.
In summary:
* Create 2 pages that are NOT in your menus (they are reserved for use by Buying Buddy).
* Add the plugin and the correct widget specified to each page. Only add one widget to each page.
* Ensure that the 2 page addresses are added to Website Settings in your Buying Buddy account.
* You must also add a DNS record to enable social sharing of properties.

Step 2a: Create 2 New Pages

In your Showit website, create 2 pages ("foundation pages").
These must also be identified in the Website Settings section in your Buying Buddy account.

  • Results page e.g. "results". which will show the "Results" widget.
  • Property Details page, e.g. "details" which will show the "Property Details" widget.

These pages should NOT be added to your main navigation menu.

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

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

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

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

Step 3: Add Buying Buddy Plugin JavaScript and Widgets to Pages

IMPORTANT:
For any page that displays Buying Buddy widgets or function, you will always need to add the Buying Buddy plugin JavaScript to the page's Advanced settings "Custom Head HTML".

Step 3a: Get the Buying Buddy JavaScript Library Code

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

  1. In your Buying Buddy dashboard,
    Navigate to: Websites & Widgets / Getting Started
    Then click the "Plugin Installation" button to view the installation instructions.
  2. Select the appropriate website. Make sure that in Website Settings your site is set as a Showit site. For a Showit website you will be shown the JavaScript that is your Buying Buddy Plugin.
  3. COPY the plugin code to your clipboard for use in the next step.
    As this needs to be added to every page to display widgets, you may like to pasts this into a temporary text file for easy access.
This image has an empty alt attribute; its file name is website-settings-install-general-widgets.jpg

Step 3b: Create a Results page and add the Plugin and Widget

Now return to your Showit editor to finish setting up the 2 pages.

First, for the Results page:

  1. Edit the new "results" page and in the right hand options panel, click "ADVANCED SETTINGS" and then click "Custom Head HTML"
  2. Paste the Buying Buddy plugin JavaScript to the form and click SAVE
  3. Next, select the canvas area on the page where you want to add the Results widget.
    You must change the "Canvas type". In the right hand options panel, in the CANVAS tab section, change the Canvas Type to be "Grow with Content" and set the initial height to be 600.
    Repeat for Mobile AND Desktop views.
  4. In the bottom options panel section, chose the option to add "Embed Code"
    When this is added on the canvas, as this is the 'search results', it is recommended that the embed code section is re-sized to be as wide as the canvas.
  5. With the embed code block selected - paste the following short code for the Buying Buddy "Results" widget into the "Custom code" panel in the right hand side panel

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

Step 3c: Create a Property Details page and add the Plugin and Widget

NOW REPEAT step 3b to setup the Details page as follows:
** Do not forget to do this! **

  1. Edit the new "details" page and in the right hand options panel, click "ADVANCED SETTINGS" and then click "Custom Head HTML"
  2. Paste the Buying Buddy plugin JavaScript to the form and click SAVE
  3. Next, select the canvas area on the page where you want to add the Results widget.
    You must change the "Canvas type". In the right hand options panel, in the CANVAS tab section, change the Canvas Type to be "Grow with Content" and set the initial height to be 600.
    Repeat for Mobile AND Desktop views.
  4. In the bottom options panel section, chose the option to add "Embed Code"
    When this is added on the canvas, as this is the 'property details' view, it is recommended that the embed code section is re-sized to be as wide as the canvas.
  5. With the embed code block selected - paste the following short code for the Buying Buddy "Details" widget into the "Custom code" panel in the right hand side panel

    <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

Step 3d: Add a Search Form (add the Plugin and Widget) to Test

Finally, add the Search Form widget to any other page using the process described above, ie add the plugin JavaScript then add the Widget (this is for testing the search - this is not a foundation page).
Once this is done you will be able to use the search form to test your setup.

For example, this could be your home page:

  1. Edit the page and in the right hand options panel, click "ADVANCED SETTINGS" and then click "Custom Head HTML"
  2. Paste the Buying Buddy plugin JavaScript to the form and click SAVE
  3. Next, select the canvas area on the page where you want to add the Results widget.
    The search form widgets are all a standard height, so there is no need to change the "Canvas type". to be "Grow with Content". So find an initial height that works for the widget you have selected on desktop and mobile.
  4. In the bottom options panel section, chose the option to add "Embed Code"
    When this is added on the canvas, re-size the embed section as needed for this widget (you may need to preview and adjust once the page is published).
  5. With the embed code block selected - paste the following short code for the Buying Buddy "Quick Search" widget into the "Custom code" panel in the right hand side panel (there are multiple search forms that you can choose from and this can be changed at anytime).

    <div id="MBBv3_QuickSearch" filter="formType:simple1"></div>

    This is one of the types of QUICK SEARCH widget and you can change this if you wish

The List, Gallery and Results widgets can grow in height as the user interacts to "Show More" properties. When you add these widgets, always ensure that the canvas type is set to be "Grow with content". Otherwise, the displays will be 'cut off'.
For other widgets, set the initial canvas height as needed.

Step 4: Enable Property Sharing

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

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

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

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.

Staging / "Sorry this domain is not authorized"

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

There are two options for dealing with this:

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

Step 5: Doing More

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

Some example that you may like to consider include;

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

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

See our demonstration websites for ideas and inspiration

If you need more help please contact us.

Updated on August 8, 2022

Was this article helpful?

Related Articles

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