There are 4 steps to install and setup Buying Buddy on your Squarespace website:
- Get a Google Map API Key.
- Install the Buying Buddy plugin.
- Create 2 new web pages and add the "results" and "details" widget short codes to them.
- Setup Social Share settings
NOTE: You must have at least a Squarespace Business plan.
This article provides detailed instructions to guide you through these steps.
Squarespace support articles that may help:
Built-in domain / "Sorry this domain is not authorized"
Your Buying Buddy widgets are authorized to work on your IDX approved domain (and only on this domain).
When you are in the Squarespace editor area your site will be displayed using the built-in domain provided by Squarespace, such as
"halibut-bulldog-3xb6.squarespace.com"
If this domain is not an "authorized Domain" in your Buying Buddy account then you will see a message that says
"Sorry this domain is not authorized".
(Seeing this message means that the widgets and Plugin JavaScript are indeed working correctly!)
To add your Built-In Domain to your Buying Buddy account:
1. In your Squarespace editor, go to Settings > Domains
The "Built-In Domain" is shown at the bottom of the panel on the left.
2. Click this domain to show options to manage the name.
3. On the panel shown, you will be able to use your mouse to select the name so you can then copy to your clipboard.
4. Go to your Buying Buddy dashboard and submit a new ticket requesting a staging domain for your Squarespace "Built In Domain" (paste this domain name into the ticket). We will add the domain and confirm back to you.
Squarespace Editor Option for Squarespace 7.1
We recommend using the Fluid Engine editor when adding code blocks to your sections.
This will ensure perfect responsive behavior of code blocks.
If you see the "Upgrade" button when you edit a section, use this to start using the Fluid Engine editor.
Important Note on AJAX.
Buying Buddy will not function correctly on Squarespace sites where Ajax is enabled. For example, widgets may initially load but then with clicks to other pages with widgets on your site, nothing is being displayed.
Ajax is a special method for site loading which makes content-heavy pages much faster and more nimble. However, it can interfere with link functionality.
If your Squarespace template supports Ajax, you may need to disable it in the Design menu to get anchor links and the Buying Buddy widgets to work. See this article for how to Disable Ajax in Squarespace.
Ajax is currently available in the following Squarespace templates (grouped by family):
Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West
Farro, Haute
Tremont, Camino, Carson, Henson
York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori
Don't overlap Blocks in your Editor
Be careful to NOT overlap the code blocks that contain the Widgets when you add widgets to your pages.
For example - this shows how a code block with a Search form is overlapped by the block that has the Heading Text. 
When a widget is overlapped like this, it will prevent the mouse/cursor from interacting with buttons and forms etc.
Get Ready
Note: If you added your Squarespace built-in domain as a staging-site domain as well, you only install the Buying Buddy plugin code once.
- Login to your Buying Buddy dashboard at leadsandcontacts.com.
- Go to Plugin Installation and Setup for your website.
- Select your website (if you have multiple domains).
On the Get Ready tab on the left, make sure that your site is set as a Squarespace site.
Step-1. Get your Google Map API Key
- Stay in Plugin Installation and Setup for your website, and go to the "Google Map Key" tab on the left.
- Add your API Key.
There is an optional field where you can add a reminder about the Google Account you used to create the key.
A Google Map API Key is required for the display of maps on widgets. Widget features that do not use the map will function normally without a map key.
You should not postpone getting a Map Key - do this straight away so that everything works and you do not have to repeat this process.
Note: If this is a production or live website, you should obtain a Map Key.
Even if the Google Maps JavaScript library is being loaded (including a valid API Key) by third party code in you website, you must STILL add your Google Map API Key here.
Follow these instructions to Get a Google Map API key.
Step 2: Add Buying Buddy Plugin to your Site
IMPORTANT:
The plugin JavaScript should only be added ONCE so that it applies to all pages on your site.
This will be added using Code Injection in Website Tools.
Do not use code injection on an individual page!
Step 2a: Get the Buying Buddy JavaScript Library Code
- In your Buying Buddy dashboard go to Plugin Installation and Setup for your website.
- Select the appropriate website at the top.
On the Get Ready tab make sure that your site is set as a Squarespace site. - Go to the "Add Plugin" tab.
COPY the JavaScript code that is your Buying Buddy Plugin.
Step 2b: Add The Plugin to Your Site
Now go to your Squarespace account and open the the editor for your website.
- Go to "Website" then "Pages".
Then scroll down to the bottom of the menu and select "Website Tools". - In "Website Tools" menu, select "Code Injection"
(If you don't see this, then you probably have a Personal account with Squarespace. Upgrade your Squarespace account to a Business plan).
NOTE: This is the ONLY time we use Code Injection. Do not use Code Injection to add widgets to pages! - Paste the Buying Buddy JavaScript code (see above) in the HEADER section and then click SAVE.
This ensures that the Buying Buddy JavaScript is loaded on every page in your website. DO NOT MODIFY THE CODE.
NOTE: This is the only place where the Plugin JavaScript should be added. Do not add this code to individual pages.
Ensure that the Buying Buddy JavaScript is ONLY added once using the method described above.
Add the Disclaimer Widget
While you are still in the Code Injection settings panel, you should also add the "Disclaimer Widget" to the 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. So 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 an Disclaimer widget with color options.
See Disclaimer Widget Reference to learn more about this.
To add the Disclaimer widget:
- Stay in the Code Injection settings panel, scroll down to the FOOTER panel and paste in this code:
<div id="MBBv3_Disclaimer"></div>
Then SAVE.
Step 3: Add Foundation Pages with Widgets
Follow these instructions carefully. In summary:
* Create 2 pages that are "Not Linked" (they are not in the menu).
* Add the correct widget specified to each page. Only add one widget to each page.
* Ensure that these page addresses are correctly added to the "Foundation Pages" section in Plugin Installation and Setup in your Buying Buddy account.
IMPORTANT:
Add HTML widgets to pages using CODE BLOCKS.
Only use the "Code Block" (e.g. do not use the "Embed" block").
Do not add widgets in the code-injection area for a page.
Step 3a: Add 2 Foundation Pages
In this step, you will create 2 new pages that are required for Buying Buddy.
Use the page names and url-slugs we present here as these match the default settings in your Buying Buddy account.
(These can be named anything you like as long as the URL Slugs match the settings in you Buying Buddy account.)
- Results Page
- Property Details Page
In addition, you should have a separate page (possibly your existing "home" page) where you can add a Search Widget for testing.
- Go your Squarespace menu, click "Website."
Then in the left section - under "Not Linked", create your two new pages.
We suggest you give them appropriate titles, such as "Results" and "Details".
- Ensure the page URL Slugs match the defaults used in your Buying Buddy account.
Hover the page name and click the cog icon to show the Page Settings panel.
Then, edit the "URL Slug" for each page as follows
- For results: listing-results
- For details: listing-details
For example, set the results page URL Slug like this:
Step 3b: Add Widgets to the 2 Foundation Pages you just created
In this section, you will copy the widget shortcodes (a little piece of HTML) we give you for each page and add each to your newly created Squarespace pages.
NOTE:
1. Do NOT add the Plugin JavaScript to pages
2. Do NOT add widgets with 'code injection'.
3. Only use the "Code" block (e.g. do not use "Embed")
TIP!
The "results" and "details" look best when they are placed in a container that can be the full width of the browser.
- EDIT the new "results" page and in a section, add click the "+ ADD BLOCK" button
Select the "Code" block and make this full-width.
Do not allow these blocks for Widgets to be overlapped by other content blocks (such as headings and text) on your page layout as it will block user interaction.
- Paste the following short code for the Buying Buddy "Results" widget into the code panel:
<div id="MBBv3_ListingResults"></div>
For example - in the image below this is the short code for the Results widget.
- SAVE.
Excellent! You have set up the Results Foundation Page. - NOW REPEAT the above steps to setup your Details page ** Do not forget to do this! **
Remember - Do not add widgets with Code Injection.
The Widget short code to use is:<div id="MBBv3_SearchDetails"></div>
Note: The details widget preview will show a random property from the demo data data set.
Excellent! You have now set up the Details Foundation Page. - Finally, paste the 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!)
The Search form short code is:<div id="MBBv3_SearchForm"></div>
Before testing - complete the next step!
NOTE: If you are viewing using the Squarespace "built-in" domain and you don't see widgets, make sure this has been added to your Buying Buddy account (submit a help ticket if you need this added).
Step 3c: Confirm that Foundation Page Slugs match
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.
So in this step, you will confirm these Page Slugs match:
- Go back to your Buying Buddy account Plugin Installation and Settings
Click the Foundation Pages tab to review the page addresses of the Widget Foundation pages. - Check the page address slugs.
The default page slugs are: /listing-results and /listing-details.
Change these if needed to match what you created.
NOTE: Use the actual page slugs for YOUR site - don't assume that they are the same as shown in this example!
Step 4: Enable Property Sharing
To allow Buyers and Sellers on your website to share properties from your website on Facebook etc., the DNS settings for your domain will need to be updated to add a new A RECORD.
Setting this option will ensure that properties shared on social media show the correct listing photo and details.
These settings will define a new secure subdomain "bb." for your domain, and are updates to your domain name's DNS records.
These changes can be made in your current domain name registrar (e.g. Godaddy etc).
Or, you can setup a free Cloudflare account that can provide a simpler and faster option.
- Go back to your Buying Buddy account.
In Plugin Installation and Settings, click the "Social Share" tab to see full instructions for your domain. - Modify the DNS records for your domain as follows:
Add an A-RECORD for the subdomain "bb"
to point to: 52.206.194.238 - Once you have added your A-RECORD, set the 'Social Share Option' (below) to be YES, and Save settings.
Check the radio button to indicate that settings have been changed.
Troubleshooting
Staging / "Sorry this domain is not authorized"
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 staging domain that Squarespace has applied while you are in the editor of your website, e.g. "https://[some-subdomain].squarespace.com"
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 Squarespace development staging 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.
Step 5: Doing More
Your Squarespace site editor will allow you to create custom search forms and use all the capabilities of the Buying Buddy widgets.
Some example that you may like to consider include;
- Adding a Featured Listings page to display your own listings
- Showing your Sold properties
- Creating neighborhood pages with properties for neighborhoods
- Adding lead capture forms that send leads directly to the Buying Buddy CRM
- Adding a general contact form widget
- and a lot more!
You can now use Widget Themes to style widgets - or even add custom CSS too if you wish to.
See our demonstration website for ideas and inspiration
If you need more help please contact us.