Adding a WildApricot login box to another site

This article provides the code for embedding a WildApricot login box on another site.

In order to implement a WildApricot login box on another website, you will need to turn off the login reCaptcha. Please contact support@wildapricot.com to assist you.

JavaScript code

WordPress users need to edit their theme template.
<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>

Login box HTML code

This login box code should be inserted within the code where you would like the box to appear 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 WildApricot site URL. So, for example, our test WildApricot 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

You can apply CSS styles to adjust the login box styling 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.


Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.
Powered by Zendesk