Here's how to setup AE Connect on your Squarespace website.
Important
You will be manually adding code to your website's HTML and JavaScript. This will only work with a Squarespace Business or Commerce plan.
1. Start by logging into your dashboard and clicking on AE Connect, located on the top right menu bar.
Then click "Install AE Connect" followed by "Install Manually."
2. Allowlist the domain of the site where the code will be embedded.
Head over to the Privacy & Permissions tab and then add in your Squarespace website's URL.
Allowlisting is for security reasons. It prevents other people from using your unique code on unauthorized websites.
3. Next, head over to your Squarespace website.
Log in and go to: Settings --> Advanced --> Code Injection
4. Add the AE-JS JavaScript to the Header section.
Copy and paste the code from Steps 2 and 3 in the Manual Installation instructions.
5. Now navigate to where you want AE Connect to appear on your site.
Hover over the page content and click "Edit" on the Squarespace hover popup. Click the "+" on the right hand side of the grey bar.
At this time you can only offer Social Login in the main body of a Squarespace page, not in a page's nav bar.
6. Click on “Code.”
7. Paste your custom HTML here.
This is where you decide what Social Login options you want to offer and how you want them styled. You can link to each of your login services with AE JS Data Tags.
Here is an example that opens a popup window with links to all your connected services (uses the data-ae-register-window and data-ae-return Data Tags):
<a href="#" data-ae-register-window="true" data-ae-return="https://example.com/handler">Register</a>
Here is an example that creates a menu with register links for specific services (uses the data-ae-register-link Data Tag):
<ul> <li><a href="#" data-ae-register-link="facebook">Register with Facebook</a></li> <li><a href="#" data-ae-register-link="spotify">Register with Spotify</a></li> <li><a href="#" data-ae-register-link="instagram">Register with Instagram</a></li></ul>
Important
You may have to do a full page refresh for the links to actually start working after you add them.
8. Want to add style with custom CSS?
In Squarespace, head over to Design --> Custom CSS and paste your CSS code in there.
Before custom CSS:
After custom CSS:
