This guide will walk you through installing and setting up Buying Buddy on your Showit website. The process involves three main steps that we'll cover in detail.
Important: With Showit, you must add the Buying Buddy plugin JavaScript AND widgets to each page where you want to use Buying Buddy widgets. The plugin code must be added to each page's Advanced settings "Custom Head HTML".
Staging Domain Authorization: When working in the Showit development area, your site may display using a Showit subdomain. 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.
Canvas Type: "Grow with Content": Showit widgets need a canvas that grows with content rather than a fixed pixel height. This setting is on the canvas, not on the embed box. To find it: click an empty area of the canvas (not the embed box), then in the right Properties Panel open the Canvas tab → Canvas Type → Grow with Content. Do this for both Desktop and Mobile views.
Installation Steps
1
Add Foundation Pages
Create 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)
- In your Showit website, create 4 pages ("foundation pages")
- Give them appropriate titles like "Results", "Details", "Market Report" and "Community Hub"
- To match 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 added to your main navigation menu. The Community Hub page can be added to a menu if you wish.
Configure Foundation Page Settings:
- In your Buying Buddy dashboard, navigate to
- Click the "Foundation Pages" tab to review the page addresses
- Verify they match your actual page slugs (usually /listing-results, /listing-details, /market-area-report and /featured-communities)
- Update if needed to match your actual page addresses
2
Add Buying Buddy Plugin and Widgets
Install plugin and widgets on each page
Critical: For any page that displays Buying Buddy widgets, you must always add the Buying Buddy plugin JavaScript to the page's Advanced settings "Custom Head HTML".
Get Your Plugin Code:
- In your Buying Buddy dashboard go to Installation and Setup
- Select your website and ensure it's set as a Showit site on the "Get Ready" tab
- Go to the "Add Plugin" tab and copy the JavaScript code
Set Up Results Page:
- Edit your "Results" page in Showit editor
- In the right panel, click "ADVANCED SETTINGS" then "Custom Head HTML"
- Paste the Buying Buddy plugin JavaScript and click SAVE
- Change the Canvas Type to "Grow with Content" with initial height of 600 (repeat for Mobile AND Desktop views)
- Add an "Embed Code" block from the bottom options panel
- Make the embed code section as wide as the canvas
- With the embed code block selected, paste this code in the "Custom code" panel:
<bb-widget data-type="ListingResults"></bb-widget>
Set Up Details Page:
- Edit your "Details" page in Showit editor
- In the right panel, click "ADVANCED SETTINGS" then "Custom Head HTML"
- Paste the Buying Buddy plugin JavaScript and click SAVE
- Change the Canvas Type to "Grow with Content" with initial height of 600 (repeat for Mobile AND Desktop views)
- Add an "Embed Code" block and make it as wide as the canvas
- With the embed code block selected, paste this code in the "Custom code" panel:
<bb-widget data-type="SearchDetails"></bb-widget>
Set Up Market Report Page:
- Edit your "Market Report" page in Showit editor
- In the right panel, click "ADVANCED SETTINGS" then "Custom Head HTML"
- Paste the Buying Buddy plugin JavaScript and click SAVE
- Change the Canvas Type to "Grow with Content" with initial height of 600 (repeat for Mobile AND Desktop views)
- Add an "Embed Code" block and make it as wide as the canvas
- With the embed code block selected, paste this code in the "Custom code" panel:
<bb-widget data-type="MarketReport"></bb-widget>
Set Up Community Hub Page:
- Edit your "Community Hub" page in Showit editor
- In the right panel, click "ADVANCED SETTINGS" then "Custom Head HTML"
- Paste the Buying Buddy plugin JavaScript and click SAVE
- Change the Canvas Type to "Grow with Content" with initial height of 600 (repeat for Mobile AND Desktop views)
- Add an "Embed Code" block and make it as wide as the canvas
- With the embed code block selected, paste this code in the "Custom code" panel:
<bb-widget data-type="Communities"></bb-widget>
Add Search Page (for testing):
Add a search form to any other page (this could be your home page) using the same process:
- Edit the page and add the plugin JavaScript to "Custom Head HTML"
- Add an "Embed Code" block and resize as needed
- Paste this code in the "Custom code" panel:
<bb-widget data-type="SearchForm"></bb-widget>
Important: The List, Gallery and Results widgets can grow in height as users interact to "Show More" properties. Always ensure the canvas type is set to "Grow with content" for these widgets.
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 Showit staging domain as a temporary authorized domain
Next Steps
Your Showit 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.