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.
- 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.