Style AE Connect With Custom CSS

We've designed AE Connect so that it's totally flexible. It can be completely re-styled to suit your website or brand. This way, you can use your site's existing branding and styles to make AE Connect your own. 

Below is one example of a fully branded AE Connect signup form:

If a popup widget like this one isn't going to work for you, you can configure your AE Connect settings to redirect users to a separate registration page.

Customize Your Registration Forms

There are three ways to customize the look and feel of your signup and login forms:

1. Using AE JS settings, you can change the format, fields, and even which language your form should display. For a full list of available settings, see our AE JS Settings Reference article.
2. Using CSS, you can tweak or completely change the style of your form to best fit your website. For more information, see our Style AE Connect with Custom CSS article.
3. Using AE JS and the AE API, you can create a customized registration flow by choosing not to use the provided widgets and instead creating your own form. For more information, see Using AE JS and the AE API to Register Users.

Basic Signup Form Customization

You can start with the default signup form styles and customize them using your own CSS. Below is an example of an AE Connect signup form with the default Bootstrap-based styles:

flow_css Example

If you wanted to remove the social icons from next to each active service in the AE Connect widget, you could do so by creating your own style sheet that overrides the CSS rules that are set by default.

Once you have created a stylesheet and have it at an accessible URL on your domain, you can use the AE JS framework's flow_csssetting to load in the new CSS:

function AEJSReady(aeJS) {
  globalAEJS = aeJS;
  aeJS.settings['auth_window'] = true;
  aeJS.settings['flow_css'] = '<a href="https://domain.com/css/custom-ae-connect.css" rel="nofollow noopener noreferrer" target="_blank">https://domain.com/css/custom-ae-connect.css</a>';
};