Install AE Connect with JavaScript

Updated 1 month ago by Mike Penhall

Start by logging in to your dashboard and clicking on AE Connect, located in the top right menu bar. 

Then click "Install AE Connect" followed by "Install Manually."

1. Whitelist the domain of the site on which the code will be embedded.


This is for security reasons, to prevent other people from using your unique code on unauthorized websites.

2. Add the AE-JS JavaScript to your website. 

    Scroll down and you'll see the framework JavaScript as an embed code. You'll need to add this to the markup of your site.


     3. Once the embed code is added, you'll need to add anAEJSReady JavaScript function to your site.

    <script type="text/javascript" charset="utf-8">
              function AEJSReady(aeJS) {
                  /* additional settings go here */
              }
          </script>

    You now have the full AE JS Framework at your disposal. You can use the AEJSReady function to assign callback events and edit the text and functionality of AE Connect. 

    4. You're all set to add social apps and using them on your site

    For each service you've added (e.g. Facebook, Twitter, Spotify), your members will be given the option of signing in to your site using their account on these services. You can find more information on adding social services to AE Connect here. 

    Are you Spotify focused? You also have the option of tracking your fans with our custom Spotify buttons. Learn how to add a Follow Artist, Follow Playlist, Follow User or Add Track button  to your website!

    After adding the AE JS JavaScript to your website, you can link to each of your login services with AE JS Data Tags.

    The URL in the code below, "https://example.com/handler", refers to your website URL (with the 'handler', which is the specific login/register/logout/etc. page it should redirect to) to return to once the link action is complete. For example: https://your-website-here.com/login. 
    <!-- Open a popup window containing links to all of your services -->
          <a href="#" data-ae-register-window="true" data-ae-return="https://example.com/handler">Register</a>
          
          <!-- Create a menu with register links for specific services -->
          <ul>
              <li><a href="#" data-ae-register-link="facebook">Register with Facebook</a></li>
              <li><a href="#" data-ae-register-link="twitter">Register with Twitter</a></li>
              <li><a href="#" data-ae-register-link="spotify">Register with Spotify</a></li>
          </ul>
    Note: If you'd like to take a more manual approach, you'll also be given a unique URL for each service that you can add to your site that for the member to use for registration. These URLS can be found in the "URL Authenticator" section, found in the AE Connect page (this concerns Enterprise users only).

    How did we do?