Connect button

The Onecub Connect button is a way to simplify your implementation of Onecub Connect into your service.
With only a few lines of code, you can add a button that automatically configures itself to fulfill the step one of the authorization server workflow.

  • Load the Onecub Connect sdk

    <script src="https://connect.onecub.com/Scripts/sdk.min.js" async defer></script>

  • Specify your account information (and possibly a state) in meta elements.

    <meta name="onecub-connect-client_id" content="your_client_id">
    <meta name="onecub-connect-redirect_uri" content="your_redirect_uri">
    <meta name="onecub-connect-state" content="some_state">

  • Add a div element with the class oc-connect-button

    <div class="oc-connect-button"></div>

That's it. The button is generated and configured to open the authorize endpoint on a user's click.

If the user authorizes access to his data, he will be redirected to your redirect_uri and you will obtain an authorization code as described in the authorization server workflow.
You can then jump to the step two of the process.


To customize your button you can specify some settings by defining data- attributes to the div element with the class oc-connect-button

Parameters Description Default
size small, medium or large. medium
backgroundcolor Only a valid HEX color code is supported (e.g. #2A6E9D). An hover color will be generated based on this color. #2F7392
fontcolor Color of the text. white
logotint Possible values are light () or dark (). light
popup true or false
Define if the Onecub Connect process opens in a popup or if the user is redirected to it in the current page.
true

Examples:

  • <div class="oc-connect-button" data-size="small" data-backgroundcolor="#FF5D5D"></div>


  • <div class="oc-connect-button></div>


  • <div class="oc-connect-button" data-size="large" data-backgroundcolor="#FF842D" data-fontcolor="black" data-logotint="dark"></div>


Metrics

In order to track the users' comportment in front of Onecub Connect, we integrated some tracking (based on Google Analytics) into the sdk script.

Note
This tracking is designed to only calculate a click rate on the button.
The point is not and will never be to follow any activity in your website.

If for some reason you don't want to use the auto-configured button, you're invited to include in the page that fires the Onecub Connect process another tiny script that carries the tracking code.

<script src="https://connect.onecub.com/Scripts/occ-metrics.min.js" async defer></script>

Important
It is very important for us to move forward together with you as partners.
This tracking will allow us to understand fully if our common work is efficient and what can be improved.