Integrate with Chromatic
Integrate Chromatic into your existing tools and services with webhooks.
Slack notifications
Post a message in a designated Slack channel when a build’s status changes. Follow the instructions below to connect a Chromatic project to a Slack channel using a webhook. You can repeat this process to create webhook URLs for multiple channels.
- Sign in to Slack and add the Incoming WebHooks app to your workspace.
- Choose the channel where you want Chromatic to post notifications then click “Add Incoming WebHooks integration”.
- Set the icon to the custom Chromatic icon found below.
- Set the “Customize name” to “Chromatic”.
- Copy the webhook URL. It’s formatted like this
https://hooks.slack.com/services/...
- Go to your Chromatic project and click the manage tab in the sidebar. Scroll down to “Integrations”.
- Click the “Add webhook” button in the Slack section then paste the webhook from step 4 into the input.
- 🎉 You’ll now receive notifications in your Slack channel.
The custom icon:
Custom webhooks
Connect Chromatic to other services that support webhooks to script custom behavior and automate advanced workflows.
- Go to your Chromatic project and click the manage tab in the sidebar. Scroll down to “Integrations”.
- Click the “Add webhook” button in the custom webhook section then paste your webhook into the input.
When a build’s status changes we’ll call your webhook with this data:
{
"event": "build-status-changed",
"build": {
"status": "BUILD_ACCEPTED",
"webUrl": "https://www.chromatic.com/build?appId={appId}&number={buildNumber}",
"committerName": "Jack",
"number": 1,
"branch": "tech/refactor",
"storybookUrl": "https://{appId}-{hash}.chromatic.com/",
"changeCount": 0,
"componentCount": 42,
"specCount": 100
}
}
Status notifications
Chromatic reports these statuses for each build.
Build | Status |
---|---|
🌕 Ready for review | BUILD_PENDING |
✅ Accepted | BUILD_ACCEPTED |
✅ Passed | BUILD_PASSED |
🔴 Denied | BUILD_DENIED |
🔴 Failed | BUILD_FAILED |
⚫️ Error | BUILD_ERROR |
⚫️ Timed out | BUILD_TIMED_OUT |
⚫️ Not captured | BUILD_NO_CAPTURE |