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.
There are two parts to making the login box work:
- A form for the login box, inserted where you would like the box placed on your page.
Installing the login box
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.
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".
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!