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

  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. a. PixelPin SSO Button "Log in with PixelPin"

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

    b. PixelPin Logo and Text SSO Button

    <a href="#" class="ppsso-btn"><span class="ppsso-logotype">PixelPin</span></a>
    Class Button
    ppsso-btn
    ppsso-btn ppsso-md
    ppsso-btn ppsso-sm

    c. PixelPin Icon-only SSO Button

    <a href="#" class="ppsso-btn ppsso-logo-lg"></a>
    Class Button
    ppsso-btn ppsso-logo-lg
    ppsso-btn ppsso-md ppsso-logo-md
    ppsso-btn ppsso-sm ppsso-logo-sm

    SSO Colour variations

    Class Button
    ppsso-btn
    ppsso-btn ppsso-cyan
    ppsso-btn ppsso-pink
    ppsso-btn ppsso-white
  4. Add a click handler to the element

  5. 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...');
    .