Here's how to setup AE Connect on your Squarespace website.
Important
You will be manually adding code to your website's HTML. This works on the Squarespace Core, Plus and Advanced plans. JavaScript in Code blocks is not available on the Basic plan.
1. Log into your AE dashboard and open AE Connect
Log in to your AE dashboard. Every customer has their own dashboard address, for example yourcompany.theappreciationengine.com. From the dashboard home page, click the AE Connect tile.
2. Manage the application you want to install AE Connect on
AE Connect is set up per application. On the AE Connect page, click Manage on the application you want to set up. If you don't have one yet, click Add new application, enter a name and click Add App. The new application opens on its edit page.
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 the AE JS framework embed, the AEJSReady function and the email signup form. Click Copy the Squarespace snippet.
An additional query parameter can be added to the AEJS snippet to add registered members to a specific segment. eg. /framework/js/123?segment=456.
7. Now navigate to where you want AE Connect to appear on your site
In Squarespace, open the page where you want signup to appear and click Edit. Hover over a section and click Add block (the + icon).
At this time you can only offer Social Login in the main body of a Squarespace page, not in a page's nav bar.
8. Choose the Code block
Choose Code from the block menu, then click the pencil icon on the block to open the code editor.
9. Paste the snippet you copied from AE Connect
Paste the snippet from Step 6 into this Code block. Make sure the block's mode is set to HTML and that Display Source is turned off, or the code will show as text instead of running. The default snippet gets email signup working on its own. Social login links are optional (see below).
Want social login buttons too? You can additionally link to each of your connected login services with AE JS Data Tags. Here's 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.
10. Want to add style with custom CSS?
In Squarespace, open the Pages panel, scroll to Custom Code at the bottom and click Custom CSS (on a version 7.0 site it is under Website Tools). Paste your CSS code in there.
11. That's it! AE Connect is now up and running on your Squarespace website.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article
