Embed Changelogs on Your Website

Learn how to embed your ChangeCrab changelog as a sidebar widget or full page on your website.

All Articles

Embed Changelogs on Your Website

Embed your ChangeCrab changelog on your website as a sidebar widget or full page. Integrate your changelog seamlessly into your existing site.

Embedding Options

ChangeCrab offers three embedding options:

  • Inline Widget - JavaScript-based dropdown changelog that appears below the element
  • Sidebar Widget - Compact widget for sidebars (iframe)
  • Full Page Embed - Complete changelog page in an iframe

Inline Widget

The inline widget is a JavaScript-based embed that creates a dropdown changelog below any element on your page. It shows a notification bubble with the count of new changes, and when clicked, displays a dropdown changelog directly below the element. This is perfect for:

  • Navigation links and menus
  • Header elements
  • Any clickable element on your site
  • Contextual changelog access without leaving the page

How It Works

The inline widget uses JavaScript to add a notification bubble badge to elements you select. The bubble shows how many changes have been made since the user's last visit. When the element is clicked, a dropdown changelog appears directly below it, displaying your recent updates in a compact, accessible format.

Getting the Embed Code

  1. Go to your changelog settings
  2. Navigate to "Embed" or "Widget" section
  3. Copy the inline widget JavaScript code
  4. Add it to your website before the closing </body> tag

Inline Widget Code Example

<script>
  changecrab_config = {
    "projectid": "your-project-id",
    "selector": ".changebubble",
    "type": "full",
    "emptycolor": "rgb(208 208 208)",
    "activecolor": "rgb(232 23 71)",
    "hostedUrl": "https://changecrab.com"
  };
</script>
<script src="https://changecrab.com/embed/embed.js"></script>

<!-- Add the class to any element you want to show the bubble -->
<a href="#" class="changebubble">Changelog</a>

Inline Widget Types

The inline widget has two display variants:

  • Full Type - Creates a sidebar panel that slides in from the right (default when type is "full")
  • Counter/Inline Type - Creates a dropdown changelog that appears below the element (when type is "counter" or using data-crabtype="counter")

To use the inline dropdown variant, add data-crabtype="counter" to your element, or set "type": "counter" in the configuration: 

<!-- Inline dropdown variant -->
<a href="#" class="changebubble" data-crabtype="counter">Changelog</a>

<!-- Or configure globally -->
<script>
  changecrab_config = {
    "projectid": "your-project-id",
    "selector": ".changebubble",
    "type": "counter",  // Creates dropdown below element
    "hostedUrl": "https://changecrab.com"
  };
</script>

The inline dropdown variant creates a compact changelog panel (400px wide, 500px tall) that appears positioned below the clicked element, making it perfect for navigation menus and header links.

Sidebar Widget (Iframe)

The sidebar widget is an iframe-based embed perfect for:

  • Website sidebars
  • Dashboard widgets
  • Compact displays

Getting the Embed Code

  1. Go to your changelog settings
  2. Navigate to "Embed" or "Widget" section
  3. Copy the sidebar widget code
  4. Paste it into your website's HTML

Widget Code Example

<iframe 
  src="https://yourname.changecrab.com/sidebar/{id}"
  width="100%" 
  height="600" 
  frameborder="0"
></iframe>

Full Page Embed (Iframe)

Embed the complete changelog page using an iframe:

  1. Get the embed page URL from settings
  2. Use an iframe to embed it
  3. Customize dimensions as needed

Full Page Code Example

<iframe 
  src="https://yourname.changecrab.com/embedpage/{id}"
  width="100%" 
  height="800" 
  frameborder="0"
></iframe>

Choosing the Right Embed Type

Choose the embed type that best fits your needs:

  • Inline Widget - Best for adding a dropdown changelog to navigation links, headers, or any clickable element. The changelog appears as a dropdown below the element when clicked.
  • Sidebar Widget - Best for dedicated sidebar sections with limited space. Uses an iframe embed.
  • Full Page Embed - Best for dedicated changelog pages or sections. Uses an iframe to embed the complete changelog page.

Widget Styles

Configure widget appearance:

  • Minimal - Just entries, no extra features
  • Full - Includes subscribe button and navigation

Learn about widget styles.

Customization

Customize embedded changelogs:

Best Practices

  • Use responsive iframe dimensions
  • Test on mobile devices
  • Ensure sufficient height for content
  • Match your site's design

Next Steps