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 added to the FairShare marketplace so you can start collecting valuable insights on their social media, streaming and on-site behavior and interactions.

Jump to:

Email registration with data-ae-register-window
Email registration with data-ae-register-form
AE Connect customization
Test email registration

Email 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 FairShare dashboard.

Navigate to the editing side of the page where you want the AE Connect registration flow to appear.
You will need to add custom HTML to this page. In WordPress, click the + button to add a new block (1) and choose Custom HTML (2).
We will be using AEJS data tags and adding them to the HTML on this page to create the registration flow. 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://myfairshare.io/tutorialthanks">Register</a>
```
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

Here’s what that looks like on the frontend:

Click the link to start the registration flow:

And the user will be sent to the page specified above after signing up:
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 (see step 6 of the previous 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>
```
Here’s what the pop-up looks like on the frontend:

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 ae-data-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. You can also add social logins to the page with ae-data-register-link.

Navigate to the editing side of the page where you want the AE Connect registration flow to appear.
You will need to add custom HTML to this page. In WordPress, click the + button to add a new block (1) and choose Custom HTML (2).

We will be using AEJS data tags and adding them to the HTML on this page to create the registration flow. 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://myfairsharedev.wpenginepowered.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://myfairshare.io/privacy-policy/">privacy policy.</a></em></p>
<button type="submit" class="signupbtn">Sign Up</button>
</form>

Here’s what the form looks like on the frontend:

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. See AE Connect: Basic CSS Styling and AE Connect: Advanced Setup and Customization for more information.

Test email registration

Once you’ve created an AE Connect email registration form on your site, you should test that email registration is working.

Navigate to the page where your AE Connect registration is.
Register using your email.
You should receive a FairShare welcome email that contains a link to your My FairShare dashboard. This dashboard is where your users will manage their data and data sharing permissions.
Navigate back to your FairShare for Business dashboard.
Select All Members from the quick links section.
You should see your email in the All Members list.

Next Article: Create Social Apps