Implementing Single-Sign-On button

To implement the Single-Sign-On button, you will have to append the code below in your body tag. You may put additional information in the 'webshoploginbuttonparent'-div, this will be hidden along with the button if that is necessary.


Please make sure that you use the right button type on the corresponding page. This way we can make sure that our analytics will be logged accurately.

Important

There are three types of users: 1=ShopLogin users, 2=regular users and 3=controlgroup users. The difference between all these groups is that the shoppingcart and checkout button will not be shown to control users. note: For testing you can change the cookie 'wsl_user_type' to 1, 2 of 3. Make sure that you are logged out at my.shoplogin.nl, otherwise the userType will be overruled by the JavaScript!
<div class="webshoploginbuttonparent" style="display: block;">
     <div id="button1" class="webshoploginbutton"
        data-type="[register/login/shoppingcart/checkout]"
        data-autoresize="[true/false]"
        data-size="[lg/md/sm/xs]"
        data-lang="[language]">
    </div>
</div>
To get callback response from login action you can call the "buttonresponse" event on the Single-Sign-On button div.
event.detail is a object with response data
document.getElementById("button1").addEventListener("buttonresponse", function(event) {
    console.log(event.detail);
}, false);

Parameters

None of these parameters are required.

Parameter Description Options Default Note
data-type Sets the type of modal to be opened login / register / shoppingcart / checkout login
data-autoresize Resize the button dynamically relative to the parent element true / false true
data-size Give a desired size - this has no influence at media queries large / medium / small / extrasmall large Only works with data-autoresize=false
data-lang Set modal language nl/de/... (ISO 639-1 codes) nl Click here for more info.