You can set up multiple websites at UniSingIn's Projects
section. All the sites are grouped under your Organization. Once you have added a site under the projects section, the site can be set up to use user registration, user login, content wall and other features of the UniSignIn platform.
You can add a logo, customize the colour to make UniSingIn's UI match your website's style.
SUBDOMAIN.WEBSITE_DOMAIN
) for the website to be used for the UniSignIn platform at the UniSignIn Subdomain
field.We will use SUBDOMAIN.WEBSITE_DOMAIN
for the next step.
NOTE: This means testing on local host is not supported.
<script
id="unisignin-tag"
data-license="WEBSITE_LICENSE"
data-domain="SUBDOMAIN.WEBSITE_DOMAIN"
src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/tag.js"
></script>
You have to create and preserve the space for multiple DIVs on your website to display the Login, Sign Up, My Account buttons or links.
You can add a DIV placeholder for the buttons:
<div data-exp="unisignin-button"></div>
Otherwise you can add them manually, for example:
unisignin-navigation-placeholder
to display the UI for the anonymous users.unisignin-user-placeholder
to display the UI for the authenticated users.You can use CSS to define the style to fit with the style of your website.
You can use API window.unisignin.cmd.push(['getUser', function (user) {}])
to get the status of the current user, either logged or not. Then control the Login UI on your website with the data response from the getUser
command.
You can also setup listener to be notified when the user status is changed with API window.unisignin.cmd.push(['register_event', 'user_update', function () {}])
. This is useful to update the Login UI when a user changing the Login status.
You can trigger login popup with API window.unisignin.cmd.push(['show_dialog', 'login']
, or trigger My Account popup with API window.unisignin.cmd.push(['show_dialog', 'home']
.
Example implementation:
<script>
window.unisignin = window.unisignin || {};
window.unisignin.cmd = window.unisignin.cmd || [];
function loadUnisignin(event) {
var doms = document.querySelectorAll('.unisignin-navigation-placeholder');
doms.forEach(function (dom) {
var loginLink = document.createElement('a');
loginLink.href = "javascript: window.unisignin.cmd.push(['show_dialog', 'login']);";
loginLink.style.display = 'none';
loginLink.innerText = 'LOG IN';
loginLink.classList.add('unisignin-login-wrapper');
var signupLink = document.createElement('a');
signupLink.href = "javascript: window.unisignin.cmd.push(['signup']);";
signupLink.style.display = 'none';
signupLink.innerText = 'SIGN UP';
signupLink.classList.add('unisignin-signup-wrapper');
dom.appendChild(loginLink);
dom.appendChild(signupLink);
});
var users = document.querySelectorAll('.unisignin-user-placeholder');
users.forEach(function (user) {
var link = document.createElement('a');
link.href = "javascript: window.unisignin.cmd.push(['show_dialog', 'home']);";
link.style.display = 'none';
link.innerText = 'MY ACCOUNT';
link.classList.add('unisignin-user-wrapper');
user.appendChild(link);
});
var updateUi = function () {
window.unisignin.cmd.push(['getUser', function (user) {
var userList = document.querySelectorAll('.unisignin-user-wrapper');
var signupList = document.querySelectorAll('.unisignin-signup-wrapper');
var loginList = document.querySelectorAll('.unisignin-login-wrapper');
if (user.isLogin) {
userList.forEach(function (user) {
user.style.display = '';
});
signupList.forEach(function (signup) {
signup.style.display = 'none';
});
loginList.forEach(function (login) {
login.style.display = 'none';
});
}
else {
userList.forEach(function (user) {
user.style.display = 'none';
});
signupList.forEach(function (signup) {
signup.style.display = '';
});
loginList.forEach(function (login) {
login.style.display = '';
});
}
}]);
};
window.unisignin.cmd.push(['register_event', 'user_update', function () {
updateUi();
}]);
updateUi();
}
if(document.readyState !== 'loading') {
loadUnisignin();
} else {
document.addEventListener('DOMContentLoaded', loadUnisignin);
}
</script>
You can find more details of UniSignIn javascript API on page JavaScript API for website.