This guide provides general installation instructions for Buying Buddy on any website. This includes custom websites and HTML/PHP platforms. If you have a specific website type (WordPress, Squarespace, PHP platforms, Duda, etc.), please follow the detailed instructions provided for your platform on the Installing Buying Buddy page.
If your website type is not listed, follow these general instructions that apply to any website.
Building with React, Next.js, or an AI website builder? (for example HighLevel AI Studio, Lovable, or Bolt) Don't use these script-based instructions — follow the dedicated Install Buying Buddy in React Applications guide instead. It uses the @buyingbuddy/react package, which is far more reliable in single-page apps. For Framer, see Install Buying Buddy on Framer.
Installation Steps
1
Add Buying Buddy Plugin to Your Site
Install the JavaScript library on your pages
Get Your Plugin Code:
- In your Buying Buddy dashboard go to Installation and Setup
- Select your website and ensure it's set as a HTML (general) site on the "Get Ready" tab
- Go to the "Add Plugin" tab and copy the JavaScript code
Install the Plugin:
You should ensure that the Buying Buddy plugin loads on every page where you intend to use any Buying Buddy widgets.
Paste the Buying Buddy plugin between the <head> and </head> tags and after any other JavaScript <script> tags. However, if you cannot place the Plugin in the <head> section of your site, you can alternatively embed it at the top of the actual page where it is needed.
Critical: The plugin must load before the widgets on the page load, so do not add the script to the footer. Keep the plugin as a single block of code and ensure it's added only once.
- Paste the Buying Buddy JavaScript code in the HEAD HTML section of your site
- Click SAVE
This ensures that the Buying Buddy JavaScript is loaded on every page in your website. Do not modify the code.
2
Create Foundation Pages
Set up required Results and Details pages
Important: Create 2 live pages that should NOT be in your menus (they are reserved for use by Buying Buddy). Add the correct widget to each page (only one widget per page), and ensure page addresses match your Buying Buddy account settings.
Create the 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 to your site editor and create two BLANK PAGES
- Give them appropriate titles like "Results" and "Details"
- To match default page addresses, use "/listing-results" and "/listing-details" (or .html, .htm, .php etc as needed)
- These page addresses can be anything you like as long as they match the Foundation Page settings
Add Widgets to Pages:
For the Results page:
- Edit the new "Results" page
- Paste the following code for the Results widget:
<bb-widget data-type="ListingResults"></bb-widget>
- Save your page
- Preview the page to verify the widget displays correctly (this will not display if you are using a sandbox development domain)
For the Details page:
- Repeat the above steps for your "Details" page
- Use this widget code instead:
<bb-widget data-type="SearchDetails"></bb-widget>
Note: The details widget may display a SQL error if you preview it - ignore this. The widget is installed correctly and this error is never seen by users.
Add a Search Form (for testing):
Add the Search Form widget to any other page using the same process (do not add it to Results or Details pages):
<bb-widget data-type="SearchForm"></bb-widget>
Confirm Foundation Page Settings:
- Return to your Buying Buddy dashboard
- Go to
- Check the page names shown and update them if needed
- You will see they are probably shown as /listing-results and /listing-details. If your pages use different names, change these to match your actual page addresses
For example, your website pages might have ".html" at the end of the page address. In which case, the page address slugs would be "listing-results.html" and "listing-details.html".
Important: Use the actual page names for YOUR site - don't assume they are the same as shown in this example!
Add the Disclaimer Widget (Recommended):
Add the MLS Disclaimer Widget to the Footer section. This widget is not required as disclaimers will be shown with each widget, but using this widget will place all the disclaimers at the foot of each page instead.
Add an HTML widget to your footer and paste this code:
<bb-widget data-type="Disclaimer"></bb-widget>
The Disclaimer Widget shows mandatory MLS disclaimers and terms in a panel with a white background. To blend this widget with your website footer, the color of the disclaimer text and panel background can be modified using the Widget Wizard.
3
Enable Property Sharing
Set up social media sharing with correct listing photos
To allow visitors to share properties from your website on Facebook and other social media platforms with the correct listing photos and details, you'll need to set up a "bb" subdomain for your domain.
Setup Options: You can use either Cloudflare (recommended for free SSL certificates) or your current domain registrar.
The Social Media Sharing Setup Instructions will guide you through both options.
Next Step:
Note: Your Buying Buddy dashboard has customized instructions for your domain in the Installation and Setup section (Social Share Settings tab) of your Buying Buddy account.Widgets - Installation and Setup : Social Share tab
Troubleshooting
SQL Error on Details Page
If you see this message, it's because you're attempting to view the Property Details widget on a page without a reference to a property. Ignore this - the widget is installed correctly and this error is never seen by users.
Staging Domain Authorization
If you see "Sorry this domain is not authorized", the widgets and Plugin JavaScript are working correctly, but your page address is using a domain not authorized to display Buying Buddy widgets. This is probably a subdomain from your development environment.
There are two options:
- Ensure your actual domain name is applied and working, then view the live site
- For extensive development, contact Help Desk to add your staging domain as a temporary authorized domain
Next Steps
Your site is now ready for advanced Buying Buddy features! Consider adding:
- Featured Listings pages to display your own listings
- Sold properties displays
- Neighborhood-specific property pages
- Lead capture forms connected to Buying Buddy CRM
- Contact forms and custom styling with Widget Themes
For inspiration, view our demonstration sites:
- https://charliesmithrealty.com (WordPress)
- https://charliesmithrealty.net (HTML / PHP)
Need additional help? Contact our support team through your Buying Buddy dashboard.