This guide will walk you through installing and setting up Buying Buddy on your Webflow website. You will need a PAID Webflow plan to be able to add the Buying Buddy library and widget codes.
Important: Make sure you have set your website type as a "Webflow" site in . This ensures you see the correct install code for your Webflow website.
Staging Domain Authorization: When working in the Webflow development area, your site may display using a Webflow subdomain like "https://xxxxxxx.webflow.io". If you see "Sorry this domain is not authorized", the widgets are working correctly but need this domain added to your account. Contact support to add your staging domain.
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 Webflow site on the "Get Ready" tab
- Go to the "Add Plugin" tab and copy the JavaScript code
Install the Plugin:
- Login to your Webflow website dashboard
- Go to the Project Settings section for your website
- In Project Settings, click on the Custom Code tab
- Paste the Buying Buddy JavaScript code in the Head Code panel
- Click Save Changes
Critical: Do not modify the code. Webflow may show a warning message advising you to "defer" or "async" load the Buying Buddy plugin script - you must ignore this warning. Do NOT defer or async load the plugin as this will break functionality.
Add the Disclaimer Widget (Recommended):
While in the Custom Code settings panel, add the "Disclaimer Widget" to the Footer Code panel to keep your pages clean:
<bb-widget data-type="Disclaimer"></bb-widget>
This displays required MLS disclaimers in your footer instead of under each widget. 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:
Create 4 new pages that are required for Buying Buddy:
- 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)
Plus, you should add a Search Form widget on any other different page too for testing.
- Go to your Webflow site editor and create four BLANK PAGES
- Give them appropriate titles like "Results", "Details", "Market Report" and "Community Hub". To match the default page addresses, use slugs "/listing-results", "/listing-details", "/market-area-report" and "/featured-communities" (these slugs can be anything you like as long as they match the Foundation Page settings)
- The Results, Details and Market Report pages should NOT be displayed in the menu. The Community Hub page can be displayed in the menu if you wish.
Add Widgets to Pages:
Tip: These widgets look best when placed in a container that can be the full width of the browser.
For the Results page:
- Select your new "Results" page to edit it
- Add an Embed component to the page
- In the code panel, 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>
For the Market Report page:
- Repeat the above steps for your "Market Report" page
- Use this widget code instead:
<bb-widget data-type="MarketReport"></bb-widget>
For the Community Hub page:
- Repeat the above steps for your "Community Hub" page
- Use this widget code instead:
<bb-widget data-type="Communities"></bb-widget>
Add a Search Form (for testing):
Add the Search Form widget to any other page using the same process (do not add it to your Results, Details, Market Report or Community Hub pages):
<bb-widget data-type="SearchForm"></bb-widget>
Confirm Foundation Page Settings:
- Return to your Buying Buddy dashboard
- Go to and click the "Foundation Pages" tab
- Check the page names shown and update them if needed
- You will see they are probably shown as /listing-results, /listing-details, /market-area-report and /featured-communities. If your pages use different slugs, change these to match your actual page addresses
Important: Use the actual page names for YOUR site - don't assume they are the same as shown in this example!
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
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.
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 Webflow staging domain as a temporary authorized domain
Next Steps
Your Webflow 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
You can use all the capabilities of Buying Buddy widgets with Webflow. For inspiration, view our demonstration site at https://charliesmithrealty.net - all the methods you see are applicable to and can be set up in Webflow.
Need additional help? Contact our support team through your Buying Buddy dashboard.