Creating Custom OAuth Button

Note: The following steps are for apps built on code-based platforms. If you are using no-code platform like Bubble, visit the documentation here instead.



Design your own HTML snippet

Steps breakdown

1. Include the helper tag by injecting the script element
2. Add the html connect block with necessary attributes
3. Show state of html block as connected or not
4. Show disconnect button

Step 1: Include helper script

The Script tag is the primary include that loads all the libraries based on what is needed. In this case you only need it to load the pinc.oauth.min library

Replacements



Step 2: Add HTML Connect block

Add the following HTML block to your page. You can customize the html in any manner you want. Just ensure that the attributes are included as specified.

Replacements



Step 3: Change Connected State

There are two ways to do this.

1. (Recommended) Make an API Call (Proxied by your server) to the provider and check the response for errors
2. Make a call to the User Connection API(Proxied by your server) to check whether the User is Authorized.



Step 4: Offer Disconnect

Offer your users the ability to disconnect or revoke their authorization. Call the Revoke Connection API (Proxied by your server) available on the User Connection page under the Revoke User Connection section.