How to add the official PixelPin SSO button to your site

Updated May 29th 2018

This is a guide on how add the official styled PixelPin SSO button to your site.

Via CDN

a. PixelPin SSO Button "Log in with PixelPin"

<a href="#" class="ppsso-btn">Log in with <span class="ppsso-logotype">PixelPin</span></a>

b. PixelPin Logo and Text SSO Button

<a href="#" class="ppsso-btn"><span class="ppsso-logotype">PixelPin</span></a>

c. PixelPin Icon-only SSO Button

<a href="#" class="ppsso-btn ppsso-logo-lg"></a>

SSO Colour variations

You can statically attach the login endpoint url (https://login.pixelpin.io....) to the a.href using the correct arguments from Browser Redirect

Or you can add a Javascript click handler to redirect the current window using

document.location.assign('https://login.pixelpin.io...');

1. Add the following code into the html page that has the button in it:

   <link rel="stylesheet" href="https://developer-assets.pixelpin.io/sso-buttons/sso-button.css">
   

    

2. Then copy and paste one of the following html snippets into your login page. Note that you can us an 'a' or 'button' element for the PixelPin button depending on how you are attaching the click handler or href.

3. Add a click handler to the element