Status Badges

Want to show your website's uptime and performance directly on your pages? Pulsetic's Status Badges allow you to easily display a real-time summary of your website's operational status, keeping your customers informed without them needing to visit a separate status page.

Pulsetic offers a user-friendly, no-code way to customize these badges to match your website's design. However, for those who like more control, you also have the option to add your own custom CSS.

How To Create a Status Badge

Step 1: Navigate to Status Badges

1. Select the Status Badges on the left menu sidebar within your Pulsetic dashboard.
2. Select the Create Badge button, located in the upper right corner of the Status Badges page.
3. From the Website dropdown, choose the monitor you added to your Monitor's List.
4. In the Badge Pages section, customize the appearance of your status badge. Available options include:
   • Style: Choose from different pre-designed layouts for your status badge (e.g., horizontal, vertical, compact).
   • Roundness: Adjust the corner roundness of the badge to match your website's aesthetic.
   • Font-Style: Select the font style for the text displayed on the badge.
   • Text Color: Choose the color of the text that shows the status (e.g., "Up," "Down," "Investigating").
   • Symbol Color: Set the color of any symbols or icons used in the badge to indicate status.
   • Frame Background Color: Customize the background color of the badge frame.
   • Custom Text: You might have the option to add custom text to the badge alongside the status information.
   • Custom CSS: For advanced users, this allows you to enter your own CSS code to further personalize the badge's appearance beyond the built-in options.
   • Badge URL: This is the URL that the badge will link to when clicked. You can typically link it to your full Pulsetic status page for more detailed information.
5. Tap the Save Badge button after making any changes to your badge's design.

Step 2: Embed the Badge on Your Website

1. Search for the Code section and copy the generated code for the website URL you selected from the Badge Pages page.

   

2. Paste the copied code into the desired location within your website's HTML. The exact placement will depend on your website's structure and platform.

3. After you’ve added the code to your website, you should see the status badge in the section where you added the code, as shown in the image below. The badge will dynamically update in real time to reflect the current uptime and operational status of the website URL you linked it to.