diff --git a/communicate/status-pages/custom-domain.mdx b/communicate/status-pages/custom-domain.mdx new file mode 100644 index 00000000..08f711d8 --- /dev/null +++ b/communicate/status-pages/custom-domain.mdx @@ -0,0 +1,39 @@ +--- +title: "Custom domain" +description: "Add a custom domain to your status page." +sidebarTitle: "Custom Domain" +canonical: 'https://www.checklyhq.com/docs/communicate/status-pages/custom-domain/' +--- + +You can host your status page on your own domain. To set it up, add the domain in Checkly and create the required DNS records with your DNS provider. + + + Custom domains are available on Communicate Starter, Team and Enterprise + plans. [View pricing](https://checklyhq.com/pricing) + + + + +![Custom domain configuration](/images/docs/images/status-pages/status-pages-custom-domain-1.png) + + + + Create a CNAME record with your DNS provider and point it to + `custom-domain.checkly-status-page.com` For example, in Cloudflare, the + configuration looks like this: ![Custom domain CNAME + configuration](/images/docs/images/status-pages/status-pages-custom-domain-2.png) + If your provider is Cloudflare, you must disable the proxy on the CNAME, it + should always be set to DNS only. + + + +After you've added your custom domain and saved the page, one or more TXT records will be displayed depending on the domain you're using. +![Example custom domain TXT configuration](/images/docs/images/status-pages/status-pages-custom-domain-3.png) + +Update your DNS settings to match the TXT record(s) displayed on your Status Page to prove the ownership of the domain. + + +Search engines require this verification to index and list your Status Page. + + + diff --git a/communicate/status-pages/customization.mdx b/communicate/status-pages/customization.mdx index 82f909ae..4066169c 100644 --- a/communicate/status-pages/customization.mdx +++ b/communicate/status-pages/customization.mdx @@ -1,53 +1,53 @@ --- title: "Status Page Customization" -description: "Add a custom domain and look & feel to your Status Page." +description: "Change the logo, favicon, theme, and colors of your status page to match your brand." sidebarTitle: "Customization" canonical: 'https://www.checklyhq.com/docs/communicate/status-pages/customization/' --- -## Custom domain +You can change how your status page looks and match it to your branding. Add your logo and favicon, pick a light or d +ark theme, and override the colors used across the page. - Custom domains are available on Communicate Starter, Team and Enterprise - plans. [View pricing](https://checklyhq.com/pricing) + Theme customization is available on Communicate Team and Enterprise plans. + [View pricing](https://checklyhq.com/pricing) -You can host your Status Page on your own domain. To set it up, add the domain in Checkly and create the required DNS records with your DNS provider. +## Logo and favicon - - -![Custom domain configuration](/images/docs/images/status-pages/status-pages-custom-domain-1.png) - +Put your own brand front and center. Your logo sits at the top of every page view, and your favicon makes the page easy to spot in a crowded tab bar. Both are set by URL, so host the image files somewhere publicly reachable first. - - Create a CNAME record with your DNS provider and point it to - `custom-domain.checkly-status-page.com` For example, in Cloudflare, the - configuration looks like this: ![Custom domain CNAME - configuration](/images/docs/images/status-pages/status-pages-custom-domain-2.png) - If your provider is Cloudflare, you must disable the proxy on the CNAME, it - should always be set to DNS only. - +- **Logo**: your primary brand mark, displayed in the page header. Use a PNG, JPG, or SVG with a roughly 5:3 aspect ratio for the best fit. +- **Dark mode logo**: an alternative version shown when the page is in dark mode, so your logo looks sharp on both light and dark backgrounds. +- **Logo redirects user to**: where visitors go when they click your logo. Point it at your website to keep them close to your product. +- **Favicon**: the icon in the browser tab and bookmarks. Use a PNG, ICO, or SVG. - -After you've added your custom domain and saved the page, one or more TXT records will be displayed depending on the domain you're using. -![Example custom domain TXT configuration](/images/docs/images/status-pages/status-pages-custom-domain-3.png) +## Theme -Update your DNS settings to match the TXT record(s) displayed on your Status Page to prove the ownership of the domain. +Choose the look that suits your brand, or let each visitor decide: - -Search engines require this verification to index and list your Status Page. - - - +- **Auto**: matches the visitor's system preference, so the page always feels native. +- **Light**: a clean, bright layout for every visitor. +- **Dark**: a darker layout for every visitor. -## Customize your Status Page to match your brand identity +## Custom theme colors -- Upload your company logo and the link it should open -- Upload a custom favicon -- Choose the default theme: auto (system), light or dark -- Customize the color theme to match your brand +Go beyond a logo and make the whole page yours. Every major surface and text color can be overridden to match your +brand guidelines, with separate palettes for light and dark mode under the **Light** and **Dark** tabs. - - Theme customization is available on Communicate Team and Enterprise plans. - [View pricing](https://checklyhq.com/pricing) - +![Status page customizaztion example](/images/docs/images/status-pages-v3/status_page_v3_custom_1.jpg) + +| Color | Where it's used | +|-------|-----------------| +| Body background | Background of the page body | +| Header background | Background of the page header | +| Header font | Main header text, such as your company name | +| Title font | Titles on the page | +| Body font | Regular body text | +| Body font (muted) | Secondary text, such as timestamps | +| Navigation font | Navigation links in the header | +| Link font | Links within the page content | +| Card background | Component and incident cards | +| Border | Divider below the header and card borders | +| Primary button background | Primary buttons, such as **Get updates** | +| Primary button font | Text on primary buttons | diff --git a/communicate/status-pages/overview.mdx b/communicate/status-pages/overview.mdx index 97758f43..6c12559c 100644 --- a/communicate/status-pages/overview.mdx +++ b/communicate/status-pages/overview.mdx @@ -30,13 +30,13 @@ Components belong to one status page. You manage them in the page's settings, wh Each component has one of five statuses: -| Status | Meaning | -|--------|---------| -| Operational | Everything works | -| Under maintenance | Planned maintenance is running | -| Degraded performance | Slow, but working | -| Partial outage | Some functionality is unavailable | -| Major outage | The component is down | +| Status | Meaning | Uptime calculation | +|--------|---------|--------------------| +| Operational | Everything works | N/A | +| Under maintenance | Planned maintenance is running | 0% | +| Degraded performance | Slow, but working | 0% | +| Partial outage | Some functionality is unavailable | 30% | +| Major outage | The component is down | 100% | A component's status is set by open [incidents](/communicate/status-pages/incidents): each incident declares an impact per affected component. The page header shows the worst status across all components. @@ -54,10 +54,10 @@ Incident automation is available on Communicate Team and Enterprise plans. [View Uptime is calculated over the **last 90 days**, per component, from incident impacts: -- **Major outage** time counts as full downtime. -- **Partial outage** time counts as 30% downtime. -- **Degraded performance** and **under maintenance** do not lower uptime. - +- **Major outage** counts as 100% downtime. +- **Partial outage** counts as 30% downtime. +- **Degraded performance** counts as 0% downtime as the service is still usable. +- **Under maintenance** counts as 0% downtime as it is an intentional pause of service. ``` Uptime = ((Total time - Weighted downtime) / Total time) × 100 ``` diff --git a/docs.json b/docs.json index 593aa683..03510de6 100644 --- a/docs.json +++ b/docs.json @@ -291,6 +291,7 @@ "pages": [ "communicate/status-pages/overview", "communicate/status-pages/creating-a-status-page", + "communicate/status-pages/custom-domain", "communicate/status-pages/customization", "communicate/status-pages/password-protection", "communicate/status-pages/incidents", diff --git a/images/docs/images/status-pages-v3/status_page_v3_custom_1.jpg b/images/docs/images/status-pages-v3/status_page_v3_custom_1.jpg new file mode 100644 index 00000000..0ffb8c3f Binary files /dev/null and b/images/docs/images/status-pages-v3/status_page_v3_custom_1.jpg differ diff --git a/images/docs/images/status-pages-v3/status_page_v3_public.jpg b/images/docs/images/status-pages-v3/status_page_v3_public.jpg index 569a6428..ba0aeef9 100644 Binary files a/images/docs/images/status-pages-v3/status_page_v3_public.jpg and b/images/docs/images/status-pages-v3/status_page_v3_public.jpg differ diff --git a/sitemap.xml b/sitemap.xml index 2dc45e0b..0619f736 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -882,6 +882,9 @@ https://www.checklyhq.com/docs/communicate/status-pages/creating-a-status-page/ + + https://www.checklyhq.com/docs/communicate/status-pages/custom-domain/ + https://www.checklyhq.com/docs/communicate/status-pages/customization/