How to Embed Badges on Your Website

Step-by-step guide to embedding ChangeCrab badges on your website using HTML, Markdown, or JavaScript.

All Articles

How to Embed Badges on Your Website

Embed ChangeCrab badges on your website, README files, or documentation using simple HTML, Markdown, or JavaScript embed codes.

Getting Your Embed Code

  1. Navigate to your changelog settings
  2. Go to the "Badges" section
  3. Configure your badge type, style, and settings
  4. Copy the embed code that matches your needs
  5. Paste it into your website or documentation

Embed Methods

1. Script Embed (Recommended)

The script embed is the simplest and most flexible option. It automatically updates when your badge changes, without requiring you to re-embed the code.

How It Works

The script tag dynamically loads your badge HTML (including CSS) and inserts it right after the script tag. This means:

  • Badge updates automatically when your tier changes
  • No need to re-embed when you update settings
  • Includes all necessary CSS automatically
  • Works on any platform that allows JavaScript

Code Example

<script src="https://changecrab.com/badge.js?id=YOUR_CHANGELOG_ID&type=frequency&style=flat"></script>

Where to Place It

Place the script tag where you want the badge to appear. The badge will be inserted right after the script tag.

2. Markdown Embed

Perfect for README files on GitHub, GitLab, or other platforms that support Markdown.

Code Example

[![ChangeCrab](https://changecrab.com/badge?id=YOUR_CHANGELOG_ID&type=frequency&format=svg)](https://your-changelog-url.com)

Platforms

  • GitHub README files
  • GitLab README files
  • Documentation sites (Docusaurus, MkDocs, etc.)
  • Any Markdown-based documentation

3. HTML Image Embed

Simple HTML image tag that works everywhere. Good for platforms that strip style tags.

Code Example

<a href="https://your-changelog-url.com">
  <img src="https://changecrab.com/badge?id=YOUR_CHANGELOG_ID&type=frequency&format=svg" alt="ChangeCrab" />
</a>

When to Use

  • Platforms that don't allow JavaScript
  • Email signatures (if supported)
  • Simple HTML pages
  • When you need just an image link

4. Direct HTML Embed

Full HTML badge code with inline CSS. Use this when you need complete control or when embedding in HTML that supports style tags.

Code Example

<style>
  /* Badge CSS included automatically */
</style>
<a href="https://your-changelog-url.com" class="cc-badge flat" data-color="gold">
  <span class="cc-badge-left">
    <img src="..." alt="ChangeCrab" class="cc-badge-logo" />
    <span class="cc-badge-label">ChangeCrab</span>
  </span>
  <span class="cc-badge-right">Updated Weekly</span>
</a>

Badge URL Parameters

You can customize badges using URL parameters:

Parameter Options Description
id Your changelog ID Required. Your changelog access ID or subdomain
type frequency, tier, activity Badge type (default: frequency)
style flat, plastic, flat-square, flat-dark, plastic-dark, flat-square-dark Badge style (default: flat)
format html, svg Output format (default: html)
minimal true, false Hide attribution (paid users only, default: false)

Platform-Specific Guides

GitHub README

Add your badge to your GitHub README.md file:

  1. Get your Markdown embed code from badge settings
  2. Paste it at the top of your README.md file
  3. Commit and push to GitHub
  4. The badge will appear on your repository page

Documentation Sites

For documentation sites like Docusaurus, MkDocs, or GitBook:

  • Use Markdown embed for Markdown-based docs
  • Use HTML embed for HTML-based docs
  • Use script embed if JavaScript is supported

WordPress

For WordPress sites:

  1. Use the HTML embed code
  2. Add it via a Custom HTML block or widget
  3. Or add it directly to your theme template

Static Websites

For static sites (HTML, Jekyll, Hugo, etc.):

  • Use script embed for automatic updates
  • Use HTML embed for static HTML
  • Use Markdown embed for Markdown-based sites

Badge Links

By default, badges link to your changelog URL. You can customize the link destination in your badge settings:

  • Default: Links to your changelog homepage
  • Custom: Set a custom URL in badge settings
  • Left side (logo/attribution): Always links to ChangeCrab.com
  • Right side (badge text): Links to your configured destination

Best Practices

  • Use Script Embed - It's the most flexible and updates automatically
  • Test on Mobile - Ensure badges display correctly on all devices
  • Match Your Design - Choose a style that matches your website's theme
  • Place Prominently - Put badges where visitors can easily see them
  • Keep Updated - Badges update automatically, but verify they're displaying correctly

Troubleshooting

Badge Not Displaying

  • Check that your changelog ID is correct
  • Verify the embed code was copied completely
  • Ensure JavaScript is enabled (for script embed)
  • Check browser console for errors

Badge Not Updating

  • Badges cache for performance - changes may take a few minutes
  • Clear your browser cache
  • Verify your tier has actually changed
  • Script embeds update automatically, HTML embeds may need refreshing

Styling Issues

  • Ensure CSS is included (script embed includes it automatically)
  • Check for CSS conflicts with your site's styles
  • Use SVG format if style tags are being stripped

Next Steps