Step 3 - Get AE Connect Running On Your WordPress Site
- Sample Spotify Registration Flow
- Shortcode Naming
- How the Links Work
- Test Your Registration
- On-Page Sign Up Option
- A round of applause - you did it!!
You've already run through the AE Connect WordPress plugin setup -- now it's time to get it up and running on your WordPress site.
If you are a regular WordPress user, chances are you have run into shortcodes before. However, in case you are unfamiliar with them, here is an article to get you up to speed.
AE Connect uses shortcodes to display login/registration forms and links on the front end of your WordPress site.
With AE Connect, you have 5 basic shortcodes to use:
For more information on these shortcodes, visit the AE Connect Shortcodes help doc.
Sample Spotify Registration Flow
Now we’re going to set up the modal flow so your users can use a pop-up to sign in and out of your website.The following example uses Spotify, but the same steps apply for any other social network.
Go to the "Pages" tab in the WordPress Admin sidebar
Click "Add New" in the top of the page:
If you have no content creation plugins such as Visual Composer, you will just have a page that looks like this:
Go ahead and give your page a title.
Then copy and paste the following shortcodes into the text box:
- [ae-link type="register" service="spotify"]Register With Spotify[/ae-link]
- [ae-link type="login" service="spotify"]Login With Spotify[/ae-link]
- [ae-window type="register"]All Registration Options[/ae-window]
- [ae-window type="login"]All Login Options[/ae-window]
Hit the update button for pre-existing pages, or publish for new pages.
Then copy the permalink.
Log out of WordPress or open your website in an incognito (Chrome) or private (Firefox) window.
If you open your site in an incognito window, you can remain signed in in your regular browser window.
Paste the permalink you copied before into your browser search bar. Now you're seeing your website with 4 links that correspond to the shortcodes you just added.
If you are not logged out of WordPress, these links won't show up. That's because they are for users who are logging in or registering -- they shouldn't be accessible to users who are already signed in.
Notice how the name of the link you see on the front end corresponds to the text in the middle of the shortcode.
So, for example:
The Register With Spotify link corresponds with the
ae-link type="register" service="spotify"]Register With Spotify[/ae-link] shortcode.
How the Links Work
- The "Register With Spotify" link allows users to register a new Spotify account OR log into an existing one - Our recommended type of link - see the warning below
- The "Login With Spotify" link allows users to log into an existing Spotify account. If they do not have an account, they will have to click the link in the window: “Don't have an account? Sign Up”
- The “All Registration Options” link allows users to register through any of the social services you’ve hooked into AE, as well as with an email or password.
- The “All Login Options” link allows users to log in through any of the social services you’ve hooked into AE, as well as with an email or password. If they do not have an account they will have to click the link in the window: "create an account", which is the same as the "All Registration Options" link.
It is ALWAYS safer to use type="register" rather than type="login" in ae-link and ae-window shortcodes. This is because type="register" allows users with and without existing AE accounts to sign into your website. It's much more flexible!
Go back to the admin page where you added the shortcodes and add one more: [ae-logout]Logout[/ae-logout].
Update the page and switch to the front end again.
If you are still signed out of WordPress, you won’t notice any changes. This is because logout links are hidden from your users if they are not yet signed in.
Test Your Registration
Now is the perfect time to test out your slick new registration links.
Click "Register with Spotify". Once you are signed in, you will be redirected to the homepage. Go back to the page where you have been dropping all these shortcodes and you will see your logout link looking something like this:
Go ahead and click it. You will be logged back out and redirected to the homepage. Now if you go back to the shortcode page again, you will see all of your login/registration links.
On-Page Sign Up Option
AE Connect also comes equipped with its own on-page signup form. This form can be displayed by use of the [ae-form] shortcode. Just like the previous shortcodes, create a new page or use an existing one and copy and paste [ae-form] into the text editor box, hit "Update/Publish" and visit the permalink while logged out of WordPress.
The front end of your site should now look something like this (dependent on styling and which services you have activated).