Skip to main content
Cachet provides the ability to customize your status page with custom HTML and CSS. To customize your status page, navigate to the “Manage Customization” section which is found under “Settings” in your Cachet dashboard.

​
Custom header HTML

From here, you can add custom HTML including scripts and styles into the header of your status page. This is an ideal section to add custom analytics scripts. Cachet adds HTML or scripts placed in this section to the <head> of your status page.

​
Fathom Analytics

We recommend Fathom Analytics for privacy-focused analytics. To add Fathom Analytics to your status page, you can use the following script:
This Fathom link is a referral link. If you sign up using the link, you’ll receive $10 credit. This helps support the Cachet project.
Add custom HTML to the footer of your status page to personalize scripts or styles. Cachet adds HTML or scripts placed in this section to the end of the <body> of your status page.

​
Custom CSS

Add custom CSS to your status page to personalize the design. You do not need to include <style> tags as Cachet wraps the CSS in them automatically. Cachet appends CSS placed in this section to its own styles.

​
CSS variables

As part of Cachet’s accent colors system, you can use CSS variables to customize the colors of your status page. The following CSS variables are available: Cachet will automatically generate a light and dark version of the accent color. When overriding colors, ensure you override both versions to maintain a consistent design:
Custom CSS
Cachet’s status page will do its best to adapt its design to configured colors. However, some colors may not be visible or may clash with the design. Please ensure you test your colors in both light and dark mode.