Home

Download this help site
(PDF 80MB)

Download

Adding Wild Apricot login boxes to another site

Many Wild Apricot customers only use the system for their members-only content, and have a static website that is either custom built, a third-party system, or powered by WordPress or other blogging software. This tutorial provides the code for embedding the login box on another site.

Please Note

Icon

In order to implement this, you will need to have access to editing the code of your site.

There are two parts to making the login box work:

  1. Javascript code, inserted just above the </head> tag.  This code makes the login box work.
  2. A form for the login box, inserted where you would like the box placed on your page.

Installing the login box

1. Insert Javascript

The Javascript code needs to be referenced in the <head> section of your website, right above the </head> tag.

Note for Wordpress

Icon

Wordpress users will need to edit their theme template.

For advanced users who might want to combine this script with another, the full source code is here:

2. Insert form code

Here is the basic login box code, which should be placed where you would like the box to be placed on your site.

Note: One Change Required

Icon

There is one bit of this code that needs to be changed in order to make it work.  "localhost" needs to be replaced with your Wild Apricot site URL.

So, for example, our test Wild Apricot site is http://aams.wildapricot.org.

Thus, where it says "http://localhost/Sys/Login", we would change it to "http://aams.wildapricot.org/Sys/Login".

Note for Wordpress

Icon

Wordpress users, if you have an html widget included with your theme, you can insert this form code there in order to drop the login box into sidebars, etc.  You may need to style with CSS for it to display properly.

If you do not have an html widget in your theme, you can also insert the code by editing the theme template.

3. Style with CSS if desired

Since the login box itself is just html form code, you can apply css styles in order to change the look and feel of the login box to match your current website.

The base code for the form renders like this:

With some extra text, line breaks, and CSS styles applied, the look can be quite different.  This is a style example from the test "ABC Association".

Test it

We've made an example site -- the ABC Association -- to illustrate how this code works.

The main page of the ABC Association shows the basic code of the login box in the top right corner, and a CSS-styled version in the middle. You can apply any CSS styles to the login box to help it match the look and feel of your existing website.

We've also made a Wild Apricot member site for ABC Association, that is located at http://aams.wildapricot.org. Notice that when you click that link and are not logged in, all you see is a homepage.

Let's try logging in. Visit the ABC Association homepage, and use the login credentials for "Test Person" included on the page. You'll end up logged in to the Wild Apricot member site!

 

Icon

These tutorials are intended for experienced web designers only. Wild Apricot does not provide technical support for installing or modifying these customizations.

  • No labels
 
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7