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 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:
- In your Showit website, create 2 pages ("foundation pages")
- Give them appropriate titles like "Results" and "Details"
- To match default page addresses, use slugs "/listing-results" and "/listing-details"
- These pages should NOT be added to your main navigation menu
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 and /listing-details)
- 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>
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
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.
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.