Overview Video for getting AE Social Login Up & Running

Adding the Framework To Your Site

To get started with AE Connect on your website you'll need to add the AE JS Framework to your website by adding the custom javascript to your page. You can find this javascript by logging into the dashboard and clicking "Application" in the header. (If you have multiple applications you will be taken to an index and can select the individual application from there.)

Your framework javascript should looks something like this:

<script type="text/javascript" charset="utf-8" src="https://theappreciationengine.com/framework/js/3"></script>

You can add this code to either the head tag or the body of your site. While on this page in the dashboard, you'll also need to whitelist any domains you want AE Connect to appear on.

You'll also need to add an AEJSReady javascript function to handle your user object as well as any call backs and settings (more on these later). This can go anywhere on the page as long as it appears after the framework script above. The most basic AEJSReady function should look something like this:

<script type="text/javascript">function AEJSReady(aeJS) { } </script>

There are a number of ways you can integrate AE social sign on into your website now that you have the javascript framework in place.

1. Basic Sign In Popup

The simplest way to integrate AE Connect into your website is with a simple popup triggered by a single button. 

Firstly you'll need to let the aeJS object know that you want the sign up to operate as a popup.

<script type="text/javascript">function AEJSReady(aeJS) { aeJS.settings['auth_window'] = true;} </script>

Now you can activate the AE Connect popup by adding the data-ae-register-window="true" attribute to any anchor tag.

<a href="#" data-ae-register-window="true"><button>Sign up</button></a>

Try it:

Sign up

2. Individual Social Services

To further integrate the sign up into your site, you may want to display individual social service icons on the page. Each anchor tag should have the attribute data-ae-register-link="[service name]".

<ul>
    <li><a href="/test#" data-ae-register-link="twitter"><i class="twitter" title="Register with twitter"></i></a></li>
    <li><a href="/test#" data-ae-register-link="instagram"><i class="instagram" title="Register with instagram"></i></a></li>
    <li><a href="/test#" data-ae-register-link="youtube"><i class="youtube" title="Register with youtube"></i></a></li>    
   <li><a href="/test#" data-ae-register-link="facebook"><i class="facebook" title="Register with facebook"></i></a></li>
   <li><a href="/test#" data-ae-register-link="spotify"><i class="spotify" title="Register with spotify"></i></a></li>
</ul>

The auth_window setting still applies here, as having it set to true will open each service in its own popup, while setting it to false or removing it will redirect you to each service in the current tab. 

If you want to even further customize each service link you can get an individual URL for each service from the application's page in the dashboard.

Try it:

3. What happens next?

This is where the real power of the Appreciation Engine comes in. Once a user is signed in they are now available for tracking activities on that service.

For example, if they have signed in with Spotify, you will now be able to track their Spotify data in the AE Dashboard.

If a user signs in a second time with a different social service, we will match on their verified email address (where possible) and add the new service to the existing user, meaning you can gather complex data on your users across multiple social services for each user.

See a list of all social activity we track by default

http://docs.developers.appreciationengine.com/article/110-framework-initialization

More AE JS Details

We have a huge amount of AE JS information on our site - so check it out.

Did this answer your question?