How to show your status page where customers ask for help

A customer notices a problem, opens the help widget on your site, and starts typing a message. Meanwhile, you've already posted an incident on your status page. They just didn't know to look there.

Multiply that by every customer who hits the same problem, and your support inbox fills with the same question: "Is something down?"

Our Help Scout Beacon is usually the first place customers go to get answers. Our status page was up to date, but it wasn't showing in the one place customers looked first. So we added it.

Why put status in the help widget?

The help widget is often the busiest door into your support team. Putting your status there means customers see it at the exact moment they're about to ask.

If your status is shown there, three things happen:

• Fewer duplicate tickets. Customers can see you already know about the problem, so they don't need to tell you.
• Customers feel informed, not ignored. They get an answer straight away, instead of waiting in a queue.
• Your team gets breathing room. Support can focus on the customers who need a reply, not on answering the same question again and again.

Intercom has it built in. What about Help Scout?

If you use Intercom, Sorry™ already has a native Intercom Messenger app that shows your live status inside the Messenger.

Help Scout doesn't have a native option like that. But our own help widget is Help Scout's Beacon, and we wanted our customers to see our status there too. So we found a way.

How we did it

Every Sorry™ status page comes with its own publicly available Status API. One of the endpoints returns an overall status for the status page, without notices or components. This returns as a JSON response with a state and state_text.

Help Scout has a handy Beacon JavaScript API, enabling you to customise this. As we already inject the Beacon into our marketing website, the foundation was already there.

Putting the two together came down to a few small steps:

1. Get the current status. When the page loads, we ask our Status API for the overall state of our status page.
2. Turn it into a friendly label. Each state gets a short line customers will understand at a glance, like "🟢 All systems operational" or "🔵 Maintenance in progress".
3. Put it at the top of Beacon. Beacon lets you suggest links as well as help articles, so we add the status as the first suggestion, linking to our status page, with our usual articles underneath.
4. Plan for the worst. If the Status API can't be reached for any reason, Beacon still shows a plain "View service status" link and all our articles, so nothing disappears.

Here's a simplified version you can adapt. Swap in your own Beacon ID, article IDs and status page address:

// 1. Start Help Scout Beacon as normal.
window.Beacon("init", "YOUR-BEACON-ID");

// The help articles you already suggest in Beacon.
var articleIds = ["ARTICLE-ID-1", "ARTICLE-ID-2", "ARTICLE-ID-3"];

// Your Sorry™ status page.
var statusPage = "https://status.yourcompany.com";

// 2. Ask your Sorry™ Status API for the overall status.
fetch(statusPage + "/api/v1/status")
  .then(function (response) {
    if (!response.ok) throw new Error("HTTP " + response.status);
    return response.json();
  })
  .then(function (data) {
    var page = data.page || {};

    // 3. Turn the state into a friendly label.
    var labels = {
      operational: "🟢 All systems operational",
      degraded: "🟠 Service disruption — View status",
      under_maintenance: "🔵 Maintenance in progress"
    };

    // 4. Show the status first, then your usual articles.
    window.Beacon("suggest", [
      { text: labels[page.state] || "⚪ View service status", url: page.url || statusPage }
    ].concat(articleIds));
  })
  .catch(function () {
    // 5. If the status can't load, still link to the status page.
    window.Beacon("suggest", [
      { text: "⚪ View service status", url: statusPage }
    ].concat(articleIds));
  });

We put the status above the suggested articles, so it's the first thing customers see when they open Beacon. If there's an incident, they know before they start reading help articles or typing a message.

What customers see

On a normal day, customers opening the Beacon see a simple "All systems operational" line above the help articles. It's reassuring, and it stays out of the way.

During an incident, it changes to "🟠 Service disruption — View status", and during planned work it shows "🔵 Maintenance in progress". Customers see it the moment they open the widget, before they've typed a word, and one click takes them to the full status page. Because the status is checked each time a page loads, it follows whatever we post in Sorry™. There's nothing extra for the team to do.

Small change, big difference

It only took a few minutes to set up, and it pays off during every incident. Customers get answers sooner, and our inbox stays calmer during incidents.

If your customers ask for help through Help Scout, you can do the same. All you need is a Sorry™ status page, which comes with its own Status API. Start your free trial and you could have it running in Beacon today.

And if you want more ideas for getting your status page in front of customers, read How and why you should promote your status page.