Articles on: Automations

How to include a Status Page badge image

Learn how to display a Crisp Status Page badge on your website.


A Status Page badge is a small image that reflects your current system health. It can be added to your website footer, internal dashboard, or any place where users should quickly see whether your services are healthy.


Before embedding the badge, make sure your Status Page is already created from Crisp under Settings → Status Page. You will use your public Status Page domain as the base URL for the badge image.



How the badge URL works


The badge image is generated from your public Status Page domain. It uses the current Status Page health color: green for healthy, orange for sick, and red for dead.


Crisp Status badge in a website footer


To get your badge URL:

  • Start from your Status Page URL, such as https://acme.crisp.watch
  • Append /includes/badge/ to the URL
  • Use the resulting URL as an image source


For example, https://acme.crisp.watch/includes/badge/ points to the badge for https://acme.crisp.watch.


Replace example domains with your own Status Page domain. If you use a custom Status Page domain, append /includes/badge/ to that custom domain instead.



Include the badge in your HTML


Add the badge as a standard HTML image:


<img src="https://acme.crisp.watch/includes/badge/" alt="Service status" width="64" height="64" />


Make sure the src value points to your own Status Page badge URL, not the example URL above.



Customize badge colors


You can override the badge colors with hexadecimal color query parameters.


Available color parameters:

  • Healthy?healthy=000000
  • Sick?sick=000000
  • Dead?dead=000000


For example, this changes the healthy color:


<img src="https://acme.crisp.watch/includes/badge/?healthy=00AB7E" alt="Service status" width="64" height="64" />


Omit the leading # when passing a hexadecimal color code. Invalid color values are ignored.



Frequently Asked Questions


Still have questions which were not covered in this article? Here is a collection of the most frequently asked questions on this topic.


Can I use the badge with a custom Status Page domain?


Yes, use your custom Status Page domain as the base URL. For example, if your page is https://status.acme.com, your badge URL is https://status.acme.com/includes/badge/.


Do I need to update the image when the status changes?


No, the badge is generated from the current Status Page health. Keep the same image URL in your HTML, and Crisp will serve the badge color that matches your current status.


Updated on: 03/05/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!