Overview Video for getting AE Social Login Up & Running
Adding the Framework To Your Site
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.
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.
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>
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]".
<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>
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.
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.
More AE JS Details
We have a huge amount of AE JS information on our site - so check it out.