AE Connect: Advanced Setup and 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. Depending on your experience with CSS, JavaScript and APIs, you may require a developer for these methods.

CSS

Using custom CSS, you can tweak or completely change the style of your form to best fit your website and branding. For some examples of basic CSS styling, read our AE Connect: Basic CSS Styling article.

AEJS Settings

Using AEJS settings, you can change the format, fields and even the language your form should display. See the AEJS Settings Reference article for a full list of available settings.

Here is an example of customization through the AEJSReady function:

// Global variable to store the AEJS instance
var myAEJS;

// Function to initialize AEJS
function AEJSReady(aeJS) {
 myAEJS = aeJS; // Store the AEJS instance for later use

 // Basic AEJS settings
 aeJS.settings['auth_window'] = false; // Use in-page authentication
 aeJS.settings['services'] = 'google,youtube,spotify,facebook,twitter,applemusic,email'; // Supported services
 aeJS.settings['verify_email_for_login'] = false; // Email verification not required for login
 aeJS.settings['return'] = '/thanks.html'; // Redirect after authentication

 // Configure extra fields
 aeJS.settings['extra_fields'] = {
 gender: { 'required': false },
 birthdate: { 'required': false },
 };

 // Define event handlers
 aeJS.events.onLogin.addHandler(loginHandler); // Handle login events
 aeJS.events.onUser.addHandler(userHandler); // Handle user-related events
}

AEJS and the AE API

If you choose not to use the provided widgets and create your own form instead, you can create a customized registration flow using AEJS and the AE API. For more information, see Using AE JS and the AE API to Register Users.