Adding AE Connect to your Squarespace Website

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

1. Log into your AE dashboard and open AE Connect

Start by logging in to your dashboard. From the dashboard home screen, click the AE Connect tile.

2. Manage the application you want to install AE Connect on

AE Connect is configured per application. Click Manage on the application you want to set up (or Create new application if you don't have one yet).

3. Open the Install AE Connect tab

On that application's edit page, click the Install AE Connect tab.

4. Allowlist the domain of the site where the code will be embedded

The Install AE Connect tab walks you through setup in order, starting with allowlisting your domain. Add your Squarespace site's URL under the Privacy & Permissions tab before testing anything on your website — this is for security reasons, to prevent other people from using your unique code on unauthorized websites.

5. Choose Squarespace as your platform

Under Get Started Quickly, click the Squarespace card.

6. Copy the Squarespace snippet

This single snippet includes everything needed for email signup — the AE JS framework embed and the signup form itself, combined. Click Copy the Squarespace snippet.

7. 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.

8. Click on "Code."

9. Paste the snippet you copied from AE Connect

Paste the snippet from Step 6 into this Code block. This is the same location the article used to describe for a custom social-login-only snippet — that's still available as an optional add-on below if you want it, but the default snippet already gets email signup working on its own.

<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>

10. 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:

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