···11+---
22+title: How to run a synthetic test in a GitHub Action
33+description: Learn how to run a synthetic test in a GitHub Action using OpenStatus.
44+sidebar:
55+ label: GitHub Action for Synthetics
66+---
77+88+In this guide, we will show you how to run a synthetic test in a GitHub Action using OpenStatus.
99+1010+### Requirements
1111+1212+- An [OpenStatus](https://www.openstatus.dev) Account .
1313+- A GitHub Repository.
1414+1515+### Create a configuration file
1616+1717+First, you need to create a configuration file for your synthetic test.
1818+1919+2020+```yaml
2121+tests:
2222+ ids:
2323+ - 1
2424+ - 2
2525+```
2626+The ids are the ids of the monitors you want to run. You can find the ids in the URL of the monitor page.
2727+2828+2929+### Get your OpenStatus API Key
3030+3131+You can find your API key in the settings page of your OpenStatus account.
3232+Go to the settings page and copy your API key.
3333+3434+3535+3636+### Add your API Key to GitHub Secrets
3737+3838+Go to the settings of your repository and add a new secret with the name `OPENSTATUS_API_KEY` and the value of your OpenStatus API key.
3939+4040+4141+### Create a GitHub Action
4242+4343+Create a new file in your repository under `.github/workflows` with the following content:
4444+4545+```yaml
4646+name: Run OpenStatus Synthetics CI
4747+4848+on:
4949+ workflow_dispatch:
5050+ push:
5151+ branches: [ main ]
5252+5353+jobs:
5454+ synthetic_ci:
5555+ runs-on: ubuntu-latest
5656+ name: Run OpenStatus Synthetics CI
5757+ steps:
5858+ - name: Checkout
5959+ uses: actions/checkout@v4
6060+ - name: Run OpenStatus Synthetics CI
6161+ uses: openstatushq/openstatus-github-action@v1
6262+ with:
6363+ api_key: ${{ secrets.OPENSTATUS_API_KEY }}
6464+```
6565+6666+### Run the GitHub Action
6767+6868+On every push to the main branch, the GitHub Action will run the synthetic tests you have configured in the configuration file.
···10101111- [How to deploy your own probe to Koyeb](/guides/how-deploy-checker-koyeb/)
12121313-- [Deploy your own Status Page to Cloudflare Pages](/guides/how-deploy-status-page-cf-pages)1313+- [Deploy your own Status Page to Cloudflare Pages](/guides/how-deploy-status-page-cf-pages)
1414+1515+- [How to run synthetic tests in your GitHub Actions](/guides/how-to-run-synthetic-test-github-action/)
···44---
5566import { Aside } from '@astrojs/starlight/components';
77+import { Image } from 'astro:assets';
7899+import StatusWidget from '../../../assets/status-widget/widget-example.png';
810911We have added a public endpoint where you can access the status of your status
1012page. To access it, you only need the unique `:slug` you have chosen for your
···7678Component. Small reminder that we are using shadcn ui and tailwindcss. You might
7779want to update the `bg-muted` and `text-foreground` classes to your needs.
78807979-
8181+<br />
8282+8383+<Image src={StatusWidget} alt="Status Widget" />
8484+8585+8686+<br />
80878188We are using `zod` to validate the response. You can use any other library if
8289you want or just remove it. But better be safe than sorry.
···168175```jsx
169176import StatusWidget from '../../components/StatusWidget.tsx
170177171171-...
172178173179<StatusWidget slug="monitor-slug-here" />
174180```
···282288283289<StatusWidget slug="monitor-slug-here" />
284290```
291291+### SVG Badge
292292+293293+You can also use the SVG badge to display the status of your page.
294294+295295+```html
296296+ <img src='https://[slug].openstatus.dev/badge'>
297297+```
298298+This will return an SVG image with the status of your page. It will look like this:
299299+<img src='https://status.openstatus.dev/badge' />
300300+301301+