How to setup UniSignIn on your website

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.

Configuring a Site

1. Enter the basic details of a site

You can add a logo, customize the colour to make UniSingIn's UI match your website's style.

2. Setup a subdomain for UniSignIn platform

1. Enter the subdomain (SUBDOMAIN.WEBSITE_DOMAIN) for the website to be used for the UniSignIn platform at the UniSignIn Subdomain field.
2. Contact your Account Manager for the subdomain setup, you will receive details about the subdomain.

We will use SUBDOMAIN.WEBSITE_DOMAIN for the next step.

2. Install javascript tag on your website

<script
  id="unisignin-tag"
  data-license="WEBSITE_LICENSE"
  data-domain="SUBDOMAIN.WEBSITE_DOMAIN"
  src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/tag.js"
></script>

• WEBSITE_LICENSE — The license ID for current website.
• SUBDOMAIN.WEBSITE_DOMAIN — The UniSignIn subdomain of the current website.

3. Setup placeholder DIV for the Login, Signup and Account buttons.

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 and javascript tag for the buttons:

<div data-exp="unisignin-button"></div>
<script defer async src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/signin/tag.js">
</script>

Otherwise you can add them manually, for example:

1. Create a DIV with CSS class name unisignin-navigation-placeholder to display the UI for the anonymous users.
2. Create a DIV with the CSS class name 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.

4. Integrate with the Login UI on your website with javascript API

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.