How to add the official PixelPin SSO button to your site

Updated January 25th 2018

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

Via CDN

  1. Add the following code into your html header:

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

  2. Then copy and paste the following html options into your log in page:

  3. 1. Full SSO Button

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

    2. Full PixelPin Logo SSO Button

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

    3. PixelPin Icon 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 Log in with PixelPin
    ppsso-btn ppsso-cyan Log in with PixelPin
    ppsso-btn ppsso-pink Log in with PixelPin
    ppsso-btn ppsso-white Log in with PixelPin