Basic AE Connect Install

The first step in setting up FairShare for Business is to implement the registration flow on your website. This registration flow is called AE Connect, and is 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. AE Connect is added to your site using AEJS, a Javascript framework.

Note: Before you install AE Connect on your website, make sure you have allowlisted any domains where AE Connect will be used.

Jump to:

Add AEJS to your website
Email registration with data-ae-register-window
Email registration with data-ae-register-form
AE Connect customization
Test email registration

Add AEJS to your website

To add AEJS to your website, you will need to be able to add code to header and footer. If you are using WordPress, an easy way to do this is to use WordPress’s WPCode plugin. For demonstration purposes, this tutorial uses WordPress and the WPCode plugin.

Navigate to your AE Connect application in your FairShare dashboard by selecting AE Connect from the Settings menu. Scroll down and choose the Install AE Connect tab.
Under 2. Add AE Connect to your website, you will find the AEJS framework code. Copy this code.
In another window, open the admin side of your website and navigate to where you can add code to the header, or head tag (<head>). If you are using WordPress and the WPCode plugin, click Code Snippets in the side menu (1), then Header & Footer (2).
Paste the code in the header section.
Go back to your AE Connect application window and scroll down to 3. Add the JavaScript function. This is the AEJSReady function and is where you will manage AE Connect settings and events. Copy this code.
In your other window, navigate to where you can add code to the footer, or just above the closing body tag (</body>). If you are using WordPress and the WPCode plugin, this is on the same page as in step 4.
Paste the code in the footer section and save changes.
Alternatively, you can add this code just to the footer of the page where you want the AE Connect registration flow to appear. There are a few cases where this may be the best approach. For example, if you want to redirect logged in users to a “success” page using the onUser and onLogin events (see AE Connect: Advanced Setup and Customization and the AEJS Framework Reference for more details).
AEJS has now been added to your site and you can begin building your registration flow with either our built-in registration flow (data-ae-register-window) or a more customized approach.

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