This guide will walk you through installing and setting up Buying Buddy on your Weebly website. The process involves three main steps that we'll cover in detail.
Special Notes for Weebly: When you add a custom HTML element, the Weebly system puts this code into a layout block that has a setting to stop content from overflowing. This can prevent interaction on some widgets. For example, the Quick Search widget using the "max-min" price selector drop-down will be cut-off or show odd behavior. We have included JavaScript solutions at the end of this article to help you fix this.
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 your website and ensure it's set as a Weebly site on the "Get Ready" tab
- Go to the "Add Plugin" tab and copy the JavaScript code
Install the Plugin:
- In your Weebly account, click the button to Edit Site
- In the top menu, click Settings
- Go to the SEO menu and scroll down to find the panel for entering "Header Code"
- Paste the Buying Buddy JavaScript code into this panel and click SAVE
Success: By adding the JavaScript like this, the Buying Buddy plugin now loads automatically on every page so that any Buying Buddy widgets will display. This script only "enables" functions to work - you won't see anything changed on your site just yet!
Add the Disclaimer Widget (Recommended):
While you are still in the SEO settings, add the disclaimer widget to the footer code so it shows on every page. This keeps your pages clean by showing required MLS disclaimers in the footer area instead of under each widget.
<bb-widget data-type="Disclaimer"></bb-widget>
This displays dark gray text on a white background by default. To blend with your website footer, you can customize colors using the Widget Wizard.
2
Create Foundation Pages
Set up the four required Buying Buddy pages
Important: Buying Buddy uses four Foundation Pages. Three of them are Utility Pages (Results, Property Details and Market Report) that should NOT be added to your menus - their content is generated dynamically when a visitor runs a search, views a property, or opens a market report. The fourth is a Feature Page (Community Hub), which displays your default Community group and CAN be added to a menu if you wish. Add only one Buying Buddy widget to each page, and make sure all four page addresses match your Buying Buddy account settings.
Create the Pages:
- Results Page (not in menu)
- Property Details Page (not in menu)
- Market Report Page (not in menu)
- Community Hub Page (can be in a menu if desired)
- Go back to your Weebly site editor
- From the top menu, click Pages
- Click the "+" to add a new page and select "standard" page
- Create four pages with these URL slugs:
- Results page with URL slug: listing-results
- Details page with URL slug: listing-details
- Market Report page with URL slug: market-area-report
- Community Hub page with URL slug: featured-communities
These slugs can be anything you like as long as they match the Foundation Page settings. - For the Results, Details and Market Report pages:
- Check "Hide in navigation"
- Set header option to "no header"
- Ensure visibility is set to "public"
The Community Hub page can be left visible in navigation if you wish (still set header to "no header" and visibility to "public").
Add Widgets to Pages:
Tip: These widgets look best when placed in a container that can be the full width of the browser. Use "Embed Code" elements, not "Embed" blocks.
For the Results page:
- Edit your "Results" page and click Build in the top menu
- Drag the "Embed Code" element from the Build options
- Click the element and select "Edit Custom HTML"
- Paste this code:
<bb-widget data-type="ListingResults"></bb-widget>
For the Details page:
- Edit your "Details" page and click Build in the top menu
- Add an "Embed Code" element and paste this code:
<bb-widget data-type="SearchDetails"></bb-widget>
For the Market Report page:
- Edit your "Market Report" page and click Build in the top menu
- Add an "Embed Code" element and paste this code:
<bb-widget data-type="MarketReport"></bb-widget>
For the Community Hub page:
- Edit your "Community Hub" page and click Build in the top menu
- Add an "Embed Code" element and paste this code:
<bb-widget data-type="Communities"></bb-widget>
Add a Search Form (for testing):
Create a search form on any other page (not on your Results, Details, Market Report or Community Hub pages) using:
<bb-widget data-type="SearchForm"></bb-widget>
Note: Widgets will not be visible until you view the published site. In the editor, your page may look empty, but if you hover over the element you should see the Embed Code block highlighted.
Confirm Foundation Page Settings:
- Return to your Buying Buddy dashboard
- Go to and click the "Foundation Pages" tab
- Verify page addresses match your URL slugs:
- Results: listing-results
- Details: listing-details
- Market Report: market-area-report
- Community Hub: featured-communities - Update if needed to match your actual page slugs
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
Widgets Not Fully Displaying - Content Cut Off
When you add a custom HTML element, the Weebly system puts this code into a layout block that prevents content from overflowing. This can cut off dropdown menus and other interactive elements.
The solution is to add JavaScript to allow widget content to overflow normally. See the example at the bottom of this article.
Domain Authorization Issues
If you see "Sorry this domain is not authorized":
- For live sites: Ensure your actual domain name is applied and working, then view the live site
- For development: Contact support to temporarily add your Weebly staging domain as a free authorized domain
Next Steps
Your Weebly 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
- Custom styling with Widget Themes
For inspiration, view our demonstration sites:
- https://charliesmithrealty.com (WordPress)
- https://charliesmithrealty.net (HTML / PHP)
Fixing the Overflow Problem
If Buying Buddy widgets are being cut off or prevented from displaying correctly, this is typically because the "custom html" element has settings to prevent content from overflowing.
Common elements that typically have overflow hidden include:
- #banner (top of page banner section)
- The <div> wrapper that contains the custom HTML
- .wsite-section-bg-video (the wrapper for background video)
Example JavaScript Solution
Add this JavaScript after your widget code to fix overflow issues. You'll need to inspect your page code to find the specific div IDs or classes that need modification:
<bb-widget data-type="QuickSearch" data-filter="formType:simple1"></bb-widget>
<script>
$("#banner").css("overflow", "visible");
$("#934796931539956411").css("overflow-y", "visible");
$(".wsite-section-bg-video").css("overflow", "visible");
</script>
Need assistance identifying the specific elements causing issues? Contact our support team through your Buying Buddy dashboard.