All API endpoints are auth protected. To successfully issue a command, you need to provide an authentication header with your request. There are two ways to authenticate. JWT authentication is more secure but can be a little tricky to set up. HTTP Basic authentication is a less secure alternative, but is a good option if you want a simpler setup.
With Basic authentication, you provide an Authorization: Basic <token> header where the token is a base64 encoded string of your apiKey:apiSecret tokens.
This auth token is a JSON web token generated based on your API key and API secret. Pass { key: <your API key> } as the payload of the JWT call and the API secret as the secret, and set a kid header equal to the API key. Pass the resulting token as a Authorization: Bearer <generated token> header in all API requests.
An example of how to construct the JWT token can be found in the source code for the happo.io client.
Here's a full list of API paths you can call. All endpoints speak JSON. Body params are sent as a JSON blob in the body of the request. Responses are sent as JSON in the body of the HTTP response.
POST /api/reports/:sha
Uploads a list of snapshots for a certain identifier (usually a commit sha). Note: If there is an existing report for the same sha, it will be overwritten as a result of calling this endpoint.
sha | String | The id of the report. |
snaps | Array<Snapshot> | A list of snapshot objects associated with the report |
project | String | (optional) The identifying name of the project this report should belong to. If none is specified, the default project will be used. |
link | String | (optional) URL to the source of the report (e.g. PR URL). |
message | String | (optional) A short string describing the source of the report (e.g. PR title). |
json | Object | An object containing a url where the uploaded report can be accessed |
GET /api/reports/:sha
Gets a list of snapshots for a certain identifier (usually a commit sha).
sha | String | The id of the report. |
project | String | (optional) The identifying name of the project this report belongs to. If none is specified, the default project will be assumed. |
json | Array<Snapshot> | A list of snapshots associated with this sha. |
POST /api/reports/:sha1/compare/:sha2
Compare reports and get useful information on the possible differences.
sha1 | String | The id of the "before" report. |
sha2 | String | The id of the "after" report. |
project | String | (optional) The identifying name of the project the reports belong to. If none is specified, the default project will be assumed. |
link | String | (optional) URL to the source of the report (e.g. PR URL). |
message | String | (optional) A short string describing the source of the report (e.g. PR title). |
author | String | (optional) The email address for the author of the change. |
json | Comparison | An object with useful properties describing the differences between the two reports. |
POST /api/subscriptions/:component
Add subscribers (email addresses) to a specific UI component. When a diff is found in a component, subscribers are notified with a link to the Happo report. Users can themselves unsubscribe manually. If you try adding an email address that has been unsubscribed by the user, it will be ignored and the user will continue to be unsubscribed.
component | String | The name of a component. Should match component names that are in the reports. |
emailAddresses | Array<String> | A list of email addresses to add as subscribers. |
DELETE /api/subscriptions/:component
Remove subscribers for a specific UI component.
component | String | The name of a component. Should match component names that are in the reports. |
emailAddresses | Array<String> | A list of email addresses to remove subscriptions for. |
These are the domain objects you can come across while communicating with the API.
An object describing a screenshot of a certain component variant
url | String | URL of the screenshot image. It's important that the URL is deterministically generated based on the contents of the image. A hash function (like md5) is of good help here, so that two images that have the same bitmap content end up having the same URL. More about URL creation. |
variant | String | The name of the variant (e.g. "disabled") |
target | String | The snapshot's target (e.g. "firefox", "iphone 7") |
component | String | The name of the component shown in the screenshot (e.g. "Button") |
height | Number | The pixel height of the screenshot image |
width | Number | The pixel width of the screenshot image |
An object with useful properties describing the differences between two reports.
diffs | Array<Snapshot> | A list of snapshots that are different |
added | Array<Snapshot> | Snapshots that have been added |
deleted | Array<Snapshot> | Snapshots that have been removed |
unchanged | Array<Snapshot> | A list of identical snapshots |
summary | String | A summary of the results, with the most important information listed |
equal | Boolean | True if the two reports are identical, false otherwise |