Install Buying Buddy on Duda

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

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

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

NOTE:
1. Website Settings.
Make sure you have set your website type as a 'Duda' site in Website Settings.
This then ensures that you see the correct install code required for your Duda website.

2.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 Duda development area your site may be displayed using a Duda subdomain such as:
https://xxxxxxx.duda.co
and so instead of seeing the widgets you will see a loading icon or a message that says: "Sorry this domain is not authorized"
(Seeing this message means that the widgets and Plugin JavaScript are indeed working correctly!)
Also - the preview URL for Duda can also have a different URL too!
For example,
https://xxxxxxx.duda.com

Duda Staging Domain

If you need your staging / development domain to be authorized, please submit a help ticket and request a sandbox development domain and tell us the domain you need authorized. When we authorize a staging domain for Duda, you must also add the page slugs to the 2 foundation pages too.
For example, if your preview link is something like this:
https://my.duda.co/preview/412dec21
Then we will authorize this domain: "my.duda.co"
And, in the "Website Settings" panel for "Widget Foundation Pages", you will need to specify the page addresses as follows (notice '/site' replaces '/preview')
/site/412dec21/results (for search results)
/site/412dec21/details (for property details)
This alternative path is needed as the preview links show the staging site in an IFRAME that displays your actual site using the '/site' path

Don't forget to ALSO add the staging domain (in this case with the full URL - not just the domain name) as authorized referrers to your Google Maps API key too if you want to see the map loading. This is not needed of course, but would be useful where you want to see it all working in development mode.

Step 1: Get your Google Map API Key

A Google Map API key is required.

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

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

When Editing and Previewing a Duda site, there can be 3 domains you may want to authorize

Step 2: Add Buying Buddy Plugin to your Site

Step 2a: Get the Buying Buddy JavaScript Library Code

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

  1. Login to your Buying Buddy dashboard at leadsandcontacts.com.
  2. Navigate to: Websites & Widgets / Setup and Install
    Then click the "Plugin Installation" button to view the installation instructions.
  3. Select the appropriate website. Make sure that your site is set as a Duda site. For a Duda website you will be shown the JavaScript that is your Buying Buddy Plugin.
  4. COPY the plugin code.

Step 2b: Add The Plugin to Your Site

Now login to your Duda website dashboard where you can edit your site.

  1. Go to the SETTINGS section for your website
  2. In SETTINGS, then click on HEAD HTML
  3. Paste the Buying Buddy JavaScript code (see above) in the HEAD HTML section and then click SAVE.
    IGNORE any warning messages you see about SCRIPT loading in the HEAD. This is required for Buying Buddy function.

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 3: Add Foundation Pages with Widgets

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

Step 3a: Add 2 Foundation Pages

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 should add a Search Form widget on any other different page too for testing.

  1. Go back to your Duda site editor, and create two BLANK PAGES.
    We suggest you give them appropriate titles, such as "results" and "details".
  2. These 2 pages should NOT be displayed in the menu
    So, click the 'cog' icon for the page then select "Hide In Navigation > Hide on all".

Step 3b: Insert Buying Buddy Widget Code to Display Widgets

  1. Next, Edit the new "results" page.
  2. Add any columns or blocks for your page layout.

    TIP! You may want to change the "row" settings so that the row is "full bleed" - this will make the results full screen.

    Then, right click the block where you want to place the Buying Buddy widget - and choose "Edit HTML/CSS".
    Paste the following short code for the Buying Buddy "Results" widget:

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


  3. SAVE your page.
  4. VERIFY. Once you have SAVED this page, preview it to see Buying Buddy results widget being displayed on the authorized domain (this will not display if you are using a sandbox development domain).
    Excellent! You have set up the Results Foundation Page.
  5. NOW REPEAT the above steps to setup your Details page ** Do not forget to do this! **
    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.
  6. 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).
    The Search form short code is:

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

    Before testing - complete the next step!

Step 3c: 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. If the details and results pages are using different slugs, then you need to change these to say the actual names of the pages you created, and in the browser when viewing these pages you will see the full address.
    (Note: With Duda, the page names do not use ".html")

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

Step 4: Enable Property Sharing

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

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

  1. In Website Settings, scroll to review section "3. SOCIAL SHARE OPTIONS".
    Or, Navigate to: Widgets > Website & Settings
    Then click the "Website Settings" link for your website. and then scroll down.
  2. Modify the DNS records for your domain 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 Duda has applied while you are in the editor of your website, e.g. "https://[some-subdomain].duda.com/xxxx/xxxx"

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 Duda 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 Duda 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 July 14, 2022

Was this article helpful?

Related Articles

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