Wild Apricot Blog

View: Tags | Archives

Including A Login Box On Your Non-Wild Apricot Website

Lori Halley 27 April 2012 4 comments

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.



Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

Posted by Lori Halley [Engaging Apricot]

Published Friday, 27 April 2012 at 8:05 AM


  • Guy Bagley said:

    Friday, 27 April 2012 at 9:22 AM
    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 -
  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Friday, 27 April 2012 at 10:46 AM
    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: https://www.wildapricot.com/webinar-managing-events
  • Steve said:

    Sunday, 29 April 2012 at 10:13 PM
    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?
  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Monday, 30 April 2012 at 9:31 AM
    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 - https://www.wildapricot.com/contact. They would be happy to assist you!
Sorry, this blog post is closed for further comments.

Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.
Scroll to top