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>
How to add the official PixelPin SSO button to your siteUpdated May 29th 2018 This is a guide on how add the official styled PixelPin SSO button to your site. Via CDNa. 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...');
|
|||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 |
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...');
-
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">
-
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.
-
Add a click handler to the element