There are 4 steps to install and setup Buying Buddy on your Webydo website:
- Get a Google Map API Key.
- Install the Buying Buddy plugin as JavaScript.
- 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.
This article provides detailed instructions to guide you through these steps.
Please Note:
1. Website Type. You must set your website type as a 'Webydo' site in Plugin Installation and Settings. This then ensures that you see the correct install code required for your Webydo website
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 Webydo development area your site may be displayed using a Webydo subdomain such as "http://xxxxxxx.webydo.com" - and so instead of seeing the widgets you may see nothing displayed
NOTE: You will probably not see the widgets being displayed in your Webydo editor. So save the page and click the VIEW SITE button in the Webydo editor header bar on the right to see a preview. You may also 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.
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.
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 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 (Plugin Installation and Setup), then you will see Google warning messages on all maps.
- Login to your Buying Buddy dashboard at leadsandcontacts.com.
- Go to Plugin Installation for your website.
- Select the appropriate website. Make sure that your site is set as a Webydo site. For a Webydo website you will be shown the JavaScript that is your Buying Buddy Plugin.
- COPY the plugin code.
Step 2b: Add The Plugin to Your Site
Ensure that the Buying Buddy JavaScript is ONLY added once.
- Now login to your Webydo website dashboard where you can edit your site.
- In the top menu - click "Pages" to see the popup panel for Pages and Navigation.
See additional page edit options on the right and click the HTML icon (</>)as shown below:
- On the next panel, (shown below) click the tab that says "Add Code To All Pages", and PASTE all of the code from your clipboard into this panel.
- Click 'Save' to save.
This method ensures that the Buying Buddy JavaScript is loaded on every page in your website. DO NOT MODIFY THE CODE.
Step 3: Add Foundation Pages with Widgets
The following steps are important, they will guide you to:
* Create 2 live pages that should NOT be 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 Foundation Page Settings in your Buying Buddy account.
* You must add a DNS record to enable social sharing of properties.
Step 3a: Add 2 Foundation Pages
Create 2 new pages that are required for Buying Buddy:
- Results Page
- Property Details Page
Plus, you should add a Search Form widget on any other different page too for testing.
- Go back to your Webydo site editor, and from the Pages top menu, create 2 extra pages for your site.
- Create two BLANK PAGES, which should NOT be displayed in the menu.
In the Pages menu panel, click the 'cog' icon for the page to change page settings.
We suggest you give them appropriate titles, such as "Results" and "Details".
To match the default slugs we use in your Buying Buddy account, give these pages slugs of "/listing-results" and "/listing-details".
However these slugs can be anything you like as long as they match the Foundation Page settings (see 3c. below).
- Un-check 'Display Page in menu' option
- Name in Menu: 'results' and 'details' - for reference
Step 3b: Add Widgets to the 2 Foundation Pages you just created
TIP!
The "results" and "details" look best when they are placed in a container that can be the full width of the browser.
- EDIT the new "results" page
- From the left menu - click the HTML menu item - then click and drag the "HTML Widget" to your page
You should adjust the container size to be full width on the page.
Click in the selected area to see the PROPERTIES panel on the right, and paste the following short code for the Buying Buddy "Results" widget into the code panel:<div id="MBBv3_ListingResults"></div>
For example - in the image below this shows how you might add the Results widget.
- SAVE your page.
- VERIFY. Once you have SAVED this page, preview it to see Buying Buddy results widget being displayed on the authorized domain
NOTE: You will probably not see the widgets being displayed in your Webydo editor. So save the page and click the VIEW SITE button in the Webydo editor header bar on the right to see a preview.
Excellent! You have set up the Results Foundation Page. - 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. - 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).
(Do not add the search widget to your "results" or "details" pages as this will break the widgets.)
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.
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 confirm the page addresses (slugs) that you used, in Foundation Page Settings in your Buying Buddy dashboard.
- In your Buying Buddy dashboard, navigate to Plugin Installation and Settings.
Then select the domain. - Click the "Foundation Pages" tab to review the page addresses of the Foundation pages.
- Check the page names shown and update them if needed.
- You will see that they are probably shown as /listing-results and /listing-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: 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 on the Plugin Installation and Settings page in your Buying Buddy account for this next step.
Go to the Social Share Settings tab.
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.
Then go to "Social Share Settings" tab- 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 - 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 Webydo has applied while you are in the editor of your website.
There are two options for dealing with this:
- 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.
- If you need to do more extensive development then you can request (via Help Desk) to add your Webydo 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 Webydo 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
- https://charliesmithrealty.com (WordPress)
- https://charliesmithrealty.net (HTML / php)
If you need more help please contact us.