Build Your AE Connect Registration Flow

Once AE Connect is installed on your site, you will create the registration flow for your user signup. This how your users will be captured so you can start collecting valuable insights on their social media, streaming and on-site behavior and interactions.

Jump to:

• Registration with data-ae-register-window
• Registration with data-ae-register-form
• AE Connect customization
• Test AE Connect

Registration with data-ae-register-window

This is the most simple approach to adding the AE Connect registration flow to your website. Using the steps below, you will create a link that will start the registration flow with email and all social apps that you have enabled in the AE dashboard.

1. You will be using AEJS data tags and adding them to the HTML on the page where you want the AE Connect registration to appear. Here is an example of HTML that will redirect to a new page for the registration flow, and then send the user to a "thank you" page after registration:
   
   

   <a href="#" data‑ae‑register‑window="true" data‑ae‑return="https://get.theappreciationengine.com/tutorialthanks">Register</a>
   HTML

   
   

   This code uses the AEJS data tags:

   • data-ae-register-window: shows a screen that allows registration via the services enabled for the site in the AE dashboard
   • data-ae-return: the URL where the user will be sent after registration
2. On the front end, your users will see a link that says "Register". When they click the link, the registration flow will start. In the example below, Spotify and Discord apps have been enabled in the AE dashboard.
   
   After registration, the user will be sent to the page specified above.
   
   

3. If you want the registration flow to be in a pop-up window, you will need to adjust the AEJS Settings. This is done by editing the code in the footer section to include the “auth_window” setting. Here is how the code will look:
   
   

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

   
   

4. On the frontend, you users will see a pop-up window when they click "Register":
   
   
   

   IMPORTANT: If you use the modal pop-up registration window, the window will close after the user registers. They will not be redirected to the page specified in step 3.

Jump to Test email registration

Email registration with data-ae-register-form

If you want to build your own form and not use the one built into the AE Connect framework, this is the data tag you will use. 

1. You will be using AEJS data tags and adding them to the HTML on the page where you want the AE Connect registration to appear. In this method, you will be creating your own form with HTML. Here is an example of a very basic email sign-up form:
   
   

   <form id="email-signup" data-ae-register-form="email" action="https://get.appreciationengine.com/thank-you/" method="POST">
       <input type="text" placeholder="Name" name="firstname" required>
   <br>
    <br>
       <input type="text" placeholder="Email" name="email" required>
   <br>
    <br>
     <input type="password" placeholder="Password" id="psw" name="password">
   <br>
    <br>
    <p style= "color:#8f8f8f" ><em>By creating an account, you agree to the terms and conditions and our <a href="https://get.theappreciationengine.com/privacy-policy/">privacy policy.</a></em></p>
   <button type="submit" class="signupbtn">Sign Up</button>
   </form>

2. On the frontend, your user will see the form:
   
   For adding social sign-on services to your custom form, see the AEJS Framework Reference articles in our Developer Documentation section.

Jump to Test email registration

AE Connect customization

AE Connect is designed to be flexible and can be styled to match your website and branding. There are a few ways to customize the look and feel of your sign-up and login forms. You can also customize how the registration flow works. For more information, see our Advanced Setup and Developer Documentation sections.

Test AE Connect

Once you’ve created an AE Connect registration flow on your site, you should test that social login is working so your customers can start using it.

IMPORTANT: You need to have at least one social app set up and have added at least one brand to test AE Connect.

1. Navigate to the page where your AE Connect registration is.
2. Complete the registration flow by signing up with a social service (not just your email).
   
   

   NOTE: It can take up to 1 hour to see your test member in your AE dashboard.

   
   
   
3. Next, you need to perform an activity on the social network you registered with against one of the brands added to your dashboard. For example, if you registered with Facebook, like the brand on Facebook. For a full list of activities AE tracks see The Data AE Collects.
4. Check your AE dashboard to ensure the activity was recorded.
   
   

   NOTE: It can take up to 24 hours for the activity to show up in the dashboard.