Adding AE Connect to your Squarespace Website

Here's how to setup AE Connect on your Squarespace website.

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.

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.

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>

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:

9. That's it! AE Connect is now up and running on your Squarespace website.