Wild Apricot Blog

View: Tags  |  Archives

Sign up to have the latest blog posts sent straight to your inbox!

    or RSS feed:  

Including A Login Box On Your Non-Wild Apricot Website

A few months ago, we looked at how users were able to embed Wild Apricot functionality using widgets into other websites. And as we continue to offer guidance for designers and organizations, we decided to offer some tips for customers who want to offer login access on a non-Wild Apricot website to members-only content through Wild Apricot.

Our latest "design and development" tutorial provides the code for embedding the login box for access to members-only content on another site.  Note that in order to implement this, you would need to have access to editing the code of your site.

How it works

By inserting two pieces of code, you can add the login box to your site.  Then, when a user logs in with their credentials, they will be redirected to the logged-in state of your WIld Apricot account.

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

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!

 

What you need

There are two pieces of code you need to insert on your main website to make this happen.

  1. Javascript code, inserted just above the </head> tag (so no matter what platform your website is built on, you must have access to editing your page template). This code makes the login box work.
  2. The login box itself is a form, contained within <form> tag.  This html code is placed where you would like the login box to be on your page.

To get the code and more detailed instructions, visit the tutorial on our help site.

 

 

Get a Special Report on Simplifying Membership Management

Enter your e-mail and receive this special report in your inbox.

Learn how to stop doing all those tasks manually.

Get frustration-decreasing, time-saving, stress-relieving membership management tips in your inbox.

Comments

  • Guy BagleyGuy Bagley

    Guy Bagley said:

    I had to do this awhile back for the Parkloft condos in San Diego
    My client insisted on a logout button as well so I had to concoct the way it works now

    surfmuseum.org I have embedded various pages into their main website that allows them to update their events and other news feeds

    I am still having problems with staff and volunteers updating what I have implemented -
    Friday, 27 April 2012 at 9:22 AM
  • Lenna Titizian [Dancing Apricot] said:

    Guy, thanks for the comment!

    Perhaps the staff and volunteers would benefit from some Wild Apricot training? We have a webinar about how to manage events: http://www.wildapricot.com/webinar-managing-events
    Friday, 27 April 2012 at 10:46 AM
  • SteveSteve

    Steve said:

    I'm using a non-wild apricot as the public facing site for my organization and then WA site as the member only portal like you mentioned many are using. Is there a way to remove the public pages from my WA site so that the pages in the Member Area become the top level navigation?
    Sunday, 29 April 2012 at 10:13 PM
  • Lenna Titizian [Dancing Apricot] said:

    Hi Steve,

    The short answer is yes -- as you can see in my test example site http://aams.wildapricot.org/, the only public page is a splash page to say it is a members-only site requiring login.

    That said, there are situations when you would need to keep some pages public. For example, if you use WA functionality via widgets in your public site (for membership applications, to list events, etc.), those pages would need to be public in order to function properly.

    For help with your specific situation, I suggest you contact our support team - http://www.wildapricot.com/contact. They would be happy to assist you!
    Monday, 30 April 2012 at 9:31 AM
Sorry, this blog post is closed for further comments.
Membership Software - Wild Apricot For sales and support questions, call us!
1-877-493-6090 or schedule a callback
Not a big talker?
email support@wildapricot.com
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7