OSS Hero Attribution Badges

All OSS Hero projects are required to display an attribution badge linking back to statuspage.me. We offer two badge styles to suit different layouts and design preferences.

Why Attribution Matters

Badges help other open-source projects discover that StatusPage.me offers free monitoring and status pages for serious OSS projects. By displaying our badge, you’re helping to grow the open-source community and support for projects that power the internet.

Small Shield Badge

The small shield badge is perfect for:

• GitHub READMEs
• Documentation sites
• Project homepages
• Anywhere with limited horizontal space

Preview

Using in Markdown

[![StatusPage OSS Hero](https://statuspage.me/static/badge/oss.svg)](https://statuspage.me?utm_source=oss-hero&utm_medium=badge)

Using in HTML

<a href="https://statuspage.me?utm_source=oss-hero&utm_medium=badge">
  <img src="https://statuspage.me/static/badge/oss.svg" alt="StatusPage OSS Hero">
</a>

Direct URL

https://statuspage.me/static/badge/oss.svg

Wide Badge with Icon

The wide badge with heart icon is best for:

• Website headers or footers
• Landing pages
• Sponsor sections
• Wider layouts with more space

Preview

Using in Markdown

[![Supported by StatusPage.me](https://statuspage.me/static/badge/oss-wide.svg)](https://statuspage.me?utm_source=oss-hero&utm_medium=badge)

Using in HTML

<a href="https://statuspage.me?utm_source=oss-hero&utm_medium=badge">
  <img src="https://statuspage.me/static/badge/oss-wide.svg" alt="Supported by StatusPage.me OSS Hero">
</a>

Direct URL

https://statuspage.me/static/badge/oss-wide.svg

Badge Placement Guidelines

Recommended Locations

Best Practices

• Always link back: The badge must link to https://statuspage.me?utm_source=oss-hero&utm_medium=badge to drive awareness
• Visibility: Place where visitors will see it—ideally above the fold on your homepage
• Context: Add a short line like “Our status page is powered by StatusPage.me OSS Hero” above or below the badge
• Multiple badges: If you use other service badges (Build status, License, etc.), the StatusPage badge works great alongside them

Customizing Badge Placement

Example: GitHub README Section

## Status & Transparency

[![StatusPage OSS Hero](https://statuspage.me/static/badge/oss.svg)](https://statuspage.me?utm_source=oss-hero&utm_medium=badge)

Our uptime and incident reports are publicly available on our [status page](https://your-slug.statuspage.me). 
We're using StatusPage.me's free OSS Hero plan to keep you informed.

Example: Website Footer

<footer>
  <div class="footer-content">
    <!-- Other footer content -->
    <a href="https://statuspage.me?utm_source=oss-hero&utm_medium=badge">
      <img src="https://statuspage.me/static/badge/oss-wide.svg" alt="Supported by StatusPage.me OSS Hero">
    </a>
  </div>
</footer>

Troubleshooting

Badge Not Displaying

• Verify the image URL is correct
• Check your content security policy (CSP) allows images from statuspage.me
• Ensure the link href is exactly as provided

Badge Size Issues

• The small badge displays at 142×20px
• The wide badge displays at 225×32px
• Most markdown renderers will scale badges appropriately
• You can wrap in custom HTML for more control: <img width="auto" height="20px" src="...">

Learn More

• View your OSS Hero plan benefits
• Set up your status page
• Embed your status widget anywhere with our live widget or SVG badge
• Create incident updates when issues occur