website logo
Navigate through spaces
ChartHop documentation
⌘K
ChartHop Help Center
Getting around in ChartHop
ChartHop Video Library
Navigating ChartHop
Home page
Org Chart
Map
Data Sheet
Employee Profiles
Implementing ChartHop
ChartHop implementation overview
Creating your ChartHop org
Configuring your Org settings
Inviting users and setting permissions
User access and sensitive data
Creating and managing groups
Integrations and bundles
ChartHop for Administrators
Planning
Managing employee data
Creating reports and analytics
Managing people and jobs
Performance reviews
Building custom forms, tabs, and documents
ChartHop for Developers
ChartHop connect
Developer basics
Events
Syncing data to/from ChartHop
Partners
Sequoia getting started
Resources
Available ChartHop packages
ChartHop Standard Terms and Conditions
ChartHop Basic Agreement
Data Processing Addendum
Privacy policy
Security statement
Subprocessors
FAQ
Docs powered by archbee 
website logo

ChartHop connect

ChartHop Connect provides an end-to-end workflow to let you turn on payroll APIs for your application using a simple Oauth2 flow.

If you are developing an application that relies on underlying payroll API data, you can use ChartHop Connect to connect to a single API -- the ChartHop API -- and let ChartHop handle the messy details of connecting to each particular payroll or HR system.

[Your App] ---> [ChartHop API] ---> [Payroll System]

Connecting APIs

The experience for the user, your customer, will be to click from your application and walk through a step-by-step workflow to turn on their payroll API, then redirecting it back to your application.

If they already are an Owner of a ChartHop account, they will be prompted to connect to their existing account, but if not, a free account will be created on the fly.

Requesting ChartHop Connect access

To build a ChartHop Connect app, email support@charthop.com with a "ChartHop Connect App Request."

Then provide the following information:

  1. The name of the App.
  2. Specific fields that you want to be authorized to retrieve (see Swagger).
  3. The Oauth2 Redirect URL.
    • This should be a URL on your site that you control, and can receive redirect traffic to.
    • Make sure to add the full URL including https://.

The support team will then set up a ChartHop Connect app and email you back your client_id for that app.



The app must also include two versions of your logo - both in PNG format:

  1. The Image - your ISO logo (100x100).
    • This will appear with a rounded space so make sure the content fits within the circle.
  2. The Wordmark Image - your wordmark logo (150 x 100).
    • Please ensure this has a transparent or white background.

Setting up ChartHop Connect

There are only a few steps, which should be familiar if you've integrated an Oauth2 authorization workflow before:

  1. From your application, create a link that connects the user to the ChartHop Connect workflow.
    • This will be a URL provided by our Support team which will look like:
      • https://app.charthop.com/connect?client_id=<client-id>
  2. When the user completes the ChartHop Connect workflow, they will be redirected to your Oauth2 Redirect URL with a parameter called code which will contain an authorization code.
  3. When you receive requests to that URL, exchange the code for a ChartHop API key.
    • You can accomplish this by making a POST to the following URL:
      • https://api.charthop.com/oauth/token
  4. Pass the following parameters (as application/x-www-form-urlencoded):
grant_type=authorization_code code=<code-you-received> client_id=<your-client-id> redirect_uri=<your-redirect-url>

You will receive back a response that contains an access token, in the format:

{"access_token":"<token>","token_type":"bearer","expires_in":<expiration>}

You can then use that access token to query the ChartHop API for that particular customer. For more information about querying the ChartHop API, see Syncing From ChartHop.

Setting up ChartHop Connect button

Installation

To use the Charthop Connect Button you must have a Client ID. The button will redirect the users to the charthop connect module with the partner's client parameters.

To get the Charthop Connect Button to appear on your web app simply copy and paste this snippet on your <head> element.

JS
|


and you will be able to place the button by copying the following line on the place of your choice to be rendered.

HTML
|


(where client_id is the partner client id provided from ChartHop)

Configuration

By default the Button will appear with this appearance:





You can change the color and size option by including these arguments into your element like this:

JS
|


with any of the following available combinations:



Here is the complete list of available options:

Option

Data attribute

Description

Options

Client ID (Required)

data-client

The Partner Client-Id to be included on the redirect URL

(custom)

HR System Param

data-app

The HR System name param, to skip the HR system selection step

• adp • bamboo • gusto • humaans • justworks • namely • paylocity • rippling • sapling • sequoia-one •successfactors • trinet • ultipro • workday • zenefits

Button Size

data-size

Defines the size of the button and whether or not to include the ChartHop Isotype

• short (default) large

Button Color Style

data-style

Defines the color variant

•default (default) • blue • dark • light large

Forward Mode

data-mode

The browser behavior once the button is clicked

• blank (default) • parent • self • top



Updated 14 Feb 2023
Did this page help you?
Yes
No
UP NEXT
Developer basics
Docs powered by archbee