Using Community Box with Squarespace Member Sites

With our Single Sign On integration with Squarespace Member Sites (previously called Member Areas) you can allow your members to log in with their Squarespace account and add/edit their own profiles without having to create a separate Community Box account.

Activating the Member Sites integration

First, contact customer support on help@communitybox.co to ask SSO to be turned on for Member Sites.

Next, copy and paste the code below to your Squarespace header code injection. This is an extra piece of code that you need in addition to the regular embed code that loads the directory. You can place it before or after that code.

<script>
let g_iframe_observer = null;


function get_input_field( login_root ) {
	return login_root.contentWindow.document.body.querySelector(`[data-test="login-email"]`)
}


function get_signup_field( login_root ) {
	return login_root.contentWindow.document.body.querySelector(`[data-test="create-account-email"]`)
}


function install_input_field_event_listener( login_root ) {
	const input_field = get_input_field( login_root )
	if (input_field !== null) {
		input_field.addEventListener("change", function () {
			console.log("login value:", input_field.value);
			document.cookie = `logged_in_maybe=${input_field.value}`;
		})
	}
}


function install_signup_field_event_listener( login_root ) {
	const signup_field = get_signup_field( login_root )
	if( signup_field !== null ) {
		signup_field.addEventListener("change", function () {
			console.log("signup value:", signup_field.value);
			document.cookie = `logged_in_maybe=${signup_field.value}`;
		})
	}
}


function install_iframe_observer( login_root ) {
	g_iframe_observer = new MutationObserver(function () {
		if (get_input_field( login_root ) !== null) {
			install_input_field_event_listener( login_root )
		}


		if (get_signup_field( login_root ) !== null) {
			install_signup_field_event_listener( login_root )
		}


	})
	const iframe_config = { subtree: true, childList: true };
	const iframe_body_list = login_root.contentWindow.document.body;


	console.log("Installing iframe observer on", iframe_body_list, "and", iframe_config)
	g_iframe_observer.observe(iframe_body_list, iframe_config);


}


window.addEventListener('DOMContentLoaded', (event) => {
	let installed_listener = false;


	const observer = new MutationObserver(function (mutations) {
		mutations.forEach(function () {
			const login_root = document.body.querySelector(`iframe[id="accountFrame"]`);
			if (login_root !== null && installed_listener === false) {
				login_root.contentWindow.addEventListener("load", function () {
					console.log("iframe fully loaded");


					const iframe_body = login_root.contentWindow.document.body;
					console.log("account login root", iframe_body.querySelector("#user-account-login-root"));
					console.log("input field", iframe_body.querySelector("input[data-test='login-email']"));


					if (get_input_field( login_root ) !== null || get_signup_field( login_root ) !== null) {
						install_input_field_event_listener( login_root )
						install_signup_field_event_listener( login_root )
					} else {
						install_iframe_observer( login_root )
					}


				})


				installed_listener = true;
			}
		});
	});


	const config = { subtree: true, childList: true };
	const body_list = document.body;


	console.log("Installing observer on", body_list, "and", config)
	observer.observe(body_list, config);
});</script>