Trusona Web SDK

Easy to use buttons, that work on any site.


Installation and setup

Using the Trusona buttons is as easy as importing a CSS file and adding a link to your website.

1. Import the Trusona CSS file

To add one of the buttons to your website, first import the Trusona CSS file to your webpage. In the head of your HTML page, add the following:

<link type="text/css" rel="stylesheet"
href="https://static.trusona.net/web-sdk/1.1.1/css/trusona.css">
        

Then in the body of your HTML where you want the button to go, add an anchor tag with the href attribute to your login URL:

<a href="https://example.org/">Login with Trusona</a>
        

3. Choose a button style

Choose a button style and apply the CSS class name to your link.

<a class="trusona-employee-button" href="https://example.org">Login with Trusona</a>
        

By default, the login buttons have a height of 50px and width of 300px. They will appear centered in their parent container.

Examples and code

Recommended buttons

Employee button

Best for employee focused use cases.

Login with Trusona

Just add the class trusona-employee-button to your <a> tag.

Example code:

<a class="trusona-employee-button" href="#">
    Login with Trusona
</a>
            

Consumer button

Best for consumer focused use cases.

Easy Login

Just add the class trusona-consumer-button to your <a> tag.

Example code:

<a class="trusona-consumer-button" href="#">
    Easy Login
</a>
            

Deprecated buttons

Trusona logo button

Just the Trusona logo.

Just add the class trusona-login-button to your <a> tag.

Example code:

<a class="trusona-login-button" href="#">
    Login with Trusona
</a>
                    

#NoPasswords button

#NoPasswords button without logo.

Just add the class no-passwords-login-button to your <a> tag.

Example code:

<a class="no-passwords-login-button" href="#">
    Login with Trusona
</a>
            

Logo #NoPasswords button

#NoPasswords button with logo.

Just add the class trusona-no-passwords-login-button to your <a> tag.

Example code:

<a class="trusona-no-passwords-login-button" href="#">
    Login with Trusona
</a>