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.
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:
- Javascript code, inserted just above the </head> tag. This code makes the login box work.
- A form for the login box, inserted where you would like the box placed on your page.
Inserting the Javascript
The Javascript code needs to be referenced in the <head> section of your website, right above the </head> tag.
<script src="http://www.wildapricot.com/docs/scripts/waloginbox.js"></script>
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:
<script>
var browserInfo;
(function ()
{
if (browserInfo == null)
{
browserInfo = new Object();
}
// Browser check
ua = navigator.userAgent;
browserInfo.isMSIE = (navigator.appName == "Microsoft Internet Explorer");
browserInfo.isMSIE5 = browserInfo.isMSIE && (ua.indexOf('MSIE 5') != -1);
browserInfo.isMSIE50 = browserInfo.isMSIE && (ua.indexOf('MSIE 5.0') != -1);
browserInfo.isMSIE55 = browserInfo.isMSIE && (ua.indexOf('MSIE 5.5') != -1);
browserInfo.isMSIE60 = browserInfo.isMSIE && (ua.indexOf('MSIE 6.0') != -1);
browserInfo.isMSIE70 = browserInfo.isMSIE && (ua.indexOf('MSIE 7') != -1);
browserInfo.isMSIE80 = browserInfo.isMSIE && (ua.indexOf('MSIE 8') != -1);
browserInfo.isMSIE90 = browserInfo.isMSIE && (ua.indexOf('MSIE 9') != -1); // lol
browserInfo.isGecko = ua.indexOf('Gecko') != -1;
browserInfo.isSafari = ua.indexOf('Safari') != -1;
browserInfo.isOpera = ua.indexOf('Opera') != -1;
browserInfo.isWebKit = (ua.indexOf('WebKit') != -1 && window.devicePixelRatio) ? true : false;
browserInfo.isMac = ua.indexOf('Mac') != -1;
browserInfo.isFirefox = ua.indexOf('Firefox') != -1;
if (browserInfo.isFirefox)
{
var reVersion = /Firefox\/(\d)*\./;
reVersion.test(ua);
browserInfo.firefoxMajorVersion = RegExp.$1;
}
browserInfo.isNS7 = ua.indexOf('Netscape/7') != -1;
browserInfo.isNS71 = ua.indexOf('Netscape/7.1') != -1;
// Fake MSIE on Opera and if Opera fakes IE, Gecko or Safari cancel those
if (browserInfo.isOpera)
{
browserInfo.isMSIE = true;
browserInfo.isGecko = false;
browserInfo.isSafari = false;
}
browserInfo.isIE = browserInfo.isMSIE;
browserInfo.isRealIE = browserInfo.isMSIE && !browserInfo.isOpera;
// Check if valid browser has execcommand support
browserInfo.execCommand = (typeof (document.execCommand) != 'undefined');
browserInfo.getBrowserCapabilitiesData = function()
{
var clientCookiesEnabled = false;
var javascriptEnabled = true;
var isPlatformCompatible = false;
setCookie("TestClientCookie", "TestClientCookieValue");
clientCookiesEnabled = (getCookie("TestClientCookie") == "TestClientCookieValue");
setCookie("TestClientCookie", "", (new Date("1/1/2000")).toGMTString());
isPlatformCompatible = javascriptEnabled && (browserInfo.isMSIE60 || browserInfo.isMSIE70 || browserInfo.isMSIE80 || browserInfo.isMSIE90 || browserInfo.isFirefox || browserInfo.isWebKit) && browserInfo.execCommand;
return (browserInfo.isMSIE60 ? "MSIE 6.0;" : "") +
(browserInfo.isMSIE70 ? "MSIE 7.0;" : "") +
(browserInfo.isMSIE80 ? "MSIE 8.0;" : "") +
(browserInfo.isMSIE90 ? "MSIE 9.0;" : "") +
(browserInfo.isWebKit ? "WebKit;" : "") +
(browserInfo.isFirefox ? "Firefox;" : "") +
(browserInfo.firefoxMajorVersion ? "FirefoxMajorVersion:" + browserInfo.firefoxMajorVersion + ";" : "") +
(browserInfo.execCommand ? "Exec Command;" : "") +
(clientCookiesEnabled ? "Client Cookies Enabled;" : "") +
(isPlatformCompatible ? "Platform Compatible;" : "") +
(javascriptEnabled ? "Javascript Enabled;" : "");
}
function setCookie(name, value, expires, path, domain, secure)
{
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function getCookie(name)
{
var cookie = " " + document.cookie;
var search = " " + name + "=";
var setStr = null;
var offset = 0;
var end = 0;
if (cookie.length > 0)
{
offset = cookie.indexOf(search);
if (offset != -1)
{
offset += search.length;
end = cookie.indexOf(";", offset)
if (end == -1)
{
end = cookie.length;
}
setStr = unescape(cookie.substring(offset, end));
}
}
return (setStr);
}
})();
window.onload = function()
{
var browserField = document.getElementById('idLoginBoxBrowserField');
browserField.value = browserInfo.getBrowserCapabilitiesData();
}
</script>Inserting the 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.
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".
<!--place your site url instead of "localhost" --> <form action="http://localhost/Sys/Login" method="post"> <input type="hidden" name="ReturnUrl" value=""> <input type="hidden" name="browserData" id="idLoginBoxBrowserField"> <input name="email" type="email" maxlength="100"/> <input type="password" name="password"> <input type="checkbox" name="rememberMe" id="idLoginBoxRememberMeCheckbox"> <label for="idLoginBoxRememberMeCheckbox">Remember me</label> <input type="submit" class="loginBoxLoginButton" tabindex="4" value="Login"> </form>
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.
Styling with CSS
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.
