The changelog panel lets you display recent announcements anywhere in your application. Keep users informed about updates without requiring them to visit a separate page.
[image]
Quick Setup
- Navigate to Embeds in your Stellar dashboard
- Click Create Embed → Changelog Panel
- Customize appearance to match your brand
- Copy the embed code
- Paste into your application
<script src="https://embed.usestellar.com/changelog.js"
data-stellar-account="your-account-id"
data-stellar-embed="your-embed-id">
</script>
<div id="stellar-changelog"></div>
What Users See
Panel Features
- Recent announcements - Latest updates in chronological order
- Unread indicators - Red dot for new content
- Category badges - Colored labels for announcement types
- Time stamps - “2 days ago” format
- Read more - Links to full announcement
- View all - Opens your complete changelog
Responsive Design
- Adapts to container width
- Mobile-optimized layout
- Smooth animations
- Accessible markup
[image]
Customization Options
Display Settings
Post Format
full - Show complete announcement contentsummary - Show preview text only (default)
Visible Elements
- Show/hide category badges
- Show/hide author names
- Show/hide timestamps
- Limit number of posts
Visual Styling
Theme
- Light or dark mode
- Auto-detect from parent page
- Custom color overrides
Layout
- Panel width and max-height
- Padding and spacing
- Border radius
- Box shadow
[image]
The embed automatically inherits fonts from your website for seamless integration.
Advanced Configuration
JavaScript API
// Initialize with options
StellarChangelog.init({
accountId: 'your-account-id',
embedId: 'your-embed-id',
theme: 'auto',
postFormat: 'summary',
showCategory: true,
showAuthor: false,
maxPosts: 5
});
// Listen for events
StellarChangelog.on('post-clicked', (post) => {
console.log('User clicked:', post.title);
});
Custom Styling
/* Override embed styles */
.stellar-changelog {
--stellar-primary: #5850ec;
--stellar-border-radius: 8px;
--stellar-font-family: inherit;
}
.stellar-changelog-post {
margin-bottom: 1rem;
}
Unread Tracking
How It Works
- Tracks viewed announcements per user
- Uses localStorage for persistence
- Shows unread count badge
- Clears when panel is opened
User Identification
Optional user tracking for better experience:
StellarChangelog.identify({
userId: 'user-123',
email: 'user@example.com'
});
Implementation Examples
React
import { useEffect } from 'react';
function ChangelogPanel() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://embed.usestellar.com/changelog.js';
script.dataset.stellarAccount = 'your-account-id';
script.dataset.stellarEmbed = 'your-embed-id';
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return <div id="stellar-changelog" />;
}
Vue
<template>
<div id="stellar-changelog"></div>
</template>
<script>
export default {
mounted() {
const script = document.createElement('script');
script.src = 'https://embed.usestellar.com/changelog.js';
script.dataset.stellarAccount = 'your-account-id';
script.dataset.stellarEmbed = 'your-embed-id';
document.body.appendChild(script);
}
}
</script>
Best Practices
Placement - Bottom right corner or dedicated “What’s New” section
Timing - Load after main content for better performance
Frequency - Update badge shows automatically when new posts arrive
Mobile - Test responsive behavior on small screens
Troubleshooting
Embed Not Showing?
- Verify account and embed IDs
- Check browser console for errors
- Ensure announcements are published
- Confirm domain is allowed in embed settings
Styling Issues?
- Check CSS specificity conflicts
- Use custom CSS variables
- Inspect element for applied styles
- Load script asynchronously
- Use summary format for faster loads
- Limit number of displayed posts
[image]
The changelog panel updates in real-time. When you publish new announcements, they appear immediately in all embedded panels.
