This guide will walk you through installing and setting up Buying Buddy on your HighLevel website. The process involves three main steps that we'll cover in detail.
Using HighLevel AI Studio? These instructions are for standard HighLevel sites. If your site was built with HighLevel AI Studio (the AI website/app builder), do not follow this guide as it will fail. Instead, follow the dedicated Install Buying Buddy in React Applications guide, which uses the @buyingbuddy/react package.
Multiple Websites: If you have created multiple websites for the same domain name inside your HighLevel account, you will need to add the Buying Buddy JavaScript Library Code to each of them following the instructions below.
Custom Menu Links
Embed your Buying Buddy Dashboard as a menu item inside HighLevel. Each agent uses their own Embed Key so they see their own private dashboard.
See "Dashboard Embed Key" instructions at the bottom of your User Profile page
Installation Steps
1
Add Buying Buddy Plugin to Your Site
Install the JavaScript library site-wide
Get Your Plugin Code:
- In your Buying Buddy dashboard go to Installation and Setup
- Select the appropriate website at the top. On the Get Ready tab make sure that your site is set as a HighLevel site.
- Go to the "Add Plugin" tab and copy the JavaScript code that is your Buying Buddy Plugin.
Install the Plugin:
- Go to your HighLevel dashboard
- Go to Sites, then Websites. Click the website name to Edit your website.
- On the Site Menu, click the Settings tab.
- Paste the entire Buying Buddy Plugin JavaScript into the Head Tracking Code field
- Save
Critical: Ensure that the Buying Buddy JavaScript is ONLY added once using the method described above. If you have multiple websites using the same domain name, then repeat this step for each website in your HighLevel account.
2
Add Disclaimer Widget
Install the Disclaimer widget site-wide
Note: You should add the Disclaimer Widget to the Global Footer so that it shows on every page. This is not required, however if you don't do this, then the mandatory MLS disclaimer text and terms will be shown directly underneath all widgets. The Disclaimer Widget helps keep your pages clean by showing the required disclaimers in the footer area.
Disclaimer Widget Colors: The widget will display dark gray text on 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, e.g. white text on a transparent background. Use the Widget Wizard in your Buying Buddy account to create a Disclaimer widget with color options.
Steps:
- In the Website menu - click Pages
- Edit your Home page, or any page that has the Global Footer
- First, identify the Global Footer: In the Page Editor - scroll right to the bottom and make sure you can identify the section that is the Global Footer. When you hover your mouse over this section - the label "Global Footer" will be shown at the bottom.
- Click toolbar at the top, click the "+" icon to Add Elements.
- Click and drag the Code element to the Global Footer and place this after all other content in the footer.
- Ensure that the Custom Code Element is selected. On the right side of the screen, click Open Code Editor.
- Copy this code for the Disclaimer Widget and paste to the Code Editor - then SAVE:
<bb-widget data-type="Disclaimer"></bb-widget>
See Disclaimer Widget Reference to learn more about this.
3
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 specified to each page. Only add one widget to each page. Ensure that the 2 page addresses are added to Plugin Installation and Settings in your Buying Buddy account.
Create the Pages:
Create 2 new pages that are required for Buying Buddy:
- Results Page
- Property Details Page
- On the Site Menu, click the "+ Add new Page" button on the right
- Create two BLANK PAGES with the following settings:
- Name for Page: We suggest you give them appropriate titles, such as "Results" and "Details".
- Path: To match the default page addresses we use in your Buying Buddy account, give these pages Paths of /listing-results and /listing-details.
However, these page Paths (slugs) 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
- Add a Custom Code element to the page
- Ensure that the Custom Code Element is selected. On the right side of the screen, click Open Code Editor
- Paste the following code for the Buying Buddy "Results" widget and save:
<bb-widget data-type="ListingResults"></bb-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 (this will not display if you are using a sandbox development domain)
For the Details page:
- Edit the new "DETAILS" page
- Add a Custom Code element to the page
- Ensure that the Custom Code Element is selected. On the right side of the screen, click Open Code Editor
- Paste the following code for the Buying Buddy "Details" widget and save:
<bb-widget data-type="SearchDetails"></bb-widget>
Note: The details widget may display a SQL error if you preview it - ignore this. If you do not view a specific property, this widget displays nothing.
Add a Search Form (for testing):
Finally, paste the following Quick 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.
<bb-widget data-type="SearchForm" data-filter="formType:simple1"></bb-widget>
Configure Foundation Page Settings:
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.
- In your Buying Buddy dashboard, navigate to Installation and Setup
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 page names, then you need to change these to match the actual names of the pages you created
Multiple Websites: If you have multiple websites using the same domain name, then DO NOT create these pages for each site.
4
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 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 when viewing actual property details.
Domain Authorization Issues
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 subdomain that your development environment 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 staging / development 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.
Next Steps
Your HighLevel site is now ready for advanced Buying Buddy features! Consider adding:
- Featured Listings page to display your own listings
- Sold properties displays
- Neighborhood-specific property pages
- Lead capture forms that send leads directly to the Buying Buddy CRM
- General contact form widgets
- Custom styling with Widget Themes
For inspiration, view our demonstration site: https://charliesmithrealty.net
Need additional help? Contact our support team through your Buying Buddy dashboard.